Major changes to result screen, addition of morph button and parsing logic

2019-04-13 13:21:54 +05:30 · 2019-04-13 13:21:54 +05:30 · 1dab4f10cc
commit 1dab4f10cc
parent 8db26919eb
26 changed files with 2993 additions and 854 deletions
--- a/README.md
+++ b/README.md
@ -1,14 +0,0 @@
-Fullscreen Form Interface
-=========
-
-An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields. 
-
-[Article on Codrops](http://tympanus.net/codrops/?p=19520)
-
-[Demo](http://tympanus.net/Development/FullscreenForm/)
-
-Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 
-
-Read more here: [License](http://tympanus.net/codrops/licensing/)
-
-[© Codrops 2014](http://www.codrops.com)
--- a/css/component.css
+++ b/css/component.css
@ -24,6 +24,20 @@
 	margin: 0;
 }

+/* Help */
+.fs-help {
+	position: absolute;
+	top: 0;
+	left: 100;
+	margin: 0;
+	padding: 40px;
+	width: 100%;
+}
+
+.fs-help h1 {
+	margin: 0;
+}
+
 /* Form */
 .fs-form {
 	position: relative;
@ -828,6 +842,10 @@ input[type=text]::-ms-clear {
 		padding: 20px;
 	}

+	.fs-help {
+		padding: 20px;
+	}
+
 	.fs-numbers {
 		margin: 20px;
 	}
@ -845,6 +863,7 @@ input[type=text]::-ms-clear {
 		height: 50px;
 		border-radius: 50%;
 		font-size: 2em;
+
 	}

 	button.fs-continue::before {
--- a/css/component1.css
+++ b/css/component1.css
@ -0,0 +1,500 @@
+/* Morph Button: Default Styles */
+
+.morph-button {
+	position: absolute;
+	display: block;
+	margin: 0 auto;
+	right: 0;
+}
+
+.morph-button > button {
+	position: absolute;
+	padding: 0 1em;
+	border: none;
+	background-color: #535860;
+	color: #f9f6e5;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-weight: 700;
+	line-height: 80px;
+	overflow: hidden;
+	right: 0;
+}
+
+.morph-button.open > button {
+	pointer-events: none;
+}
+
+.morph-content {
+	pointer-events: none;
+}
+
+.morph-button.open .morph-content {
+	pointer-events: auto;
+}
+
+/* Common styles for overlay and modal type (fixed morph) */
+.morph-button-fixed,
+.morph-button-fixed .morph-content {
+	width: 80px;
+	height: 80px;
+}
+
+.morph-button-fixed > button {
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	-webkit-transition: opacity 0.1s 0.5s;
+	transition: opacity 0.1s 0.5s;
+}
+
+.morph-button-fixed.open > button {
+	opacity: 0;
+	-webkit-transition: opacity 0.1s;
+	transition: opacity 0.1s;
+}
+
+.morph-button-fixed .morph-content {
+	position: fixed;
+	z-index: 900;
+	opacity: 0;
+	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
+	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
+}
+
+.morph-button-fixed.open .morph-content {
+	opacity: 1;
+}
+
+.morph-button-fixed .morph-content > div {
+	visibility: hidden;
+	height: 0;
+	opacity: 0;
+	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
+	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
+}
+
+.morph-button-fixed.open .morph-content > div {
+	visibility: visible;
+	height: auto;
+	opacity: 1;
+	-webkit-transition: opacity 0.3s 0.5s;
+	transition: opacity 0.3s 0.5s;
+}
+
+.morph-button-fixed.active > button {
+	z-index: 2000;
+}
+
+.morph-button-fixed.active .morph-content {
+	z-index: 1900;
+}
+
+/* Transitions for overlay button and sidebar button */
+.morph-button-overlay .morph-content,
+.morph-button-sidebar .morph-content {
+	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
+	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
+}
+
+.morph-button-overlay.open .morph-content,
+.morph-button-sidebar.open .morph-content {
+	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
+	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
+}
+
+/* Morph Button Style: Overlay */
+.morph-button.morph-button-overlay {
+	margin: 50zpx auto;
+}
+
+.morph-button-overlay .morph-content {
+	overflow: hidden;
+	background: #e85657;
+}
+
+.morph-button-overlay.open .morph-content {
+	top: 0 !important;
+	left: 0 !important;
+	width: 100%;
+	height: 100%;
+}
+
+/* Morph Button Style: Modal */
+.morph-button-modal::before {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 800;
+	width: 100%;
+	height: 100%;
+	background: rgba(0,0,0,0.5);
+	content: '';
+	opacity: 0;
+	-webkit-transition: opacity 0.5s;
+	transition: opacity 0.5s;
+	pointer-events: none;
+}
+
+.morph-button-modal.open::before {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.morph-button-modal.active::before {
+	z-index: 1800;
+}
+
+.morph-button-modal .morph-content {
+	overflow: hidden;
+	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
+	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
+}
+
+.morph-button-modal.open .morph-content {
+	top: 50% !important;
+	left: 50% !important;
+	margin: -210px 0 0 -300px;
+	width: 600px;
+	height: 420px;
+	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
+	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
+}
+
+/* Colors and sizes for individual modals */
+.morph-button.morph-button-modal-1 {
+	float: left;
+}
+
+.morph-button.morph-button-modal-2,
+.morph-button.morph-button-modal-3 {
+	display: inline-block;
+	margin: 10px 15px;
+}
+
+.morph-button-modal-1 > button,
+.morph-button-modal-1 .morph-content {
+	background-color: #553445;
+}
+
+.morph-button-modal-2 > button,
+.morph-button-modal-2 .morph-content,
+.morph-button-modal-3 > button,
+.morph-button-modal-3 .morph-content {
+	background-color: #fef0e3;
+	color: #e75854;
+}
+
+.morph-button-modal-4 {
+	display: inline-block;
+}
+
+.morph-button-modal-4 > button,
+.morph-button-modal-4 .morph-content {
+	background-color: #faf1e0;
+	color: #553445;
+}
+
+.morph-button-modal-4 > button span,
+.morph-button-modal-4 .morph-clone {
+	padding-left: 10px;
+	color: #286f81;
+}
+
+.morph-button-modal-4 .morph-clone {
+	position: absolute;
+	right: 34px;
+	bottom: 30px;
+	z-index: 100;
+	letter-spacing: 1px;
+	font-weight: 700;
+	-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
+	transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
+}
+
+.morph-button-modal-4.open .morph-clone,
+.no-js .morph-button-modal-4 .morph-clone {
+	right: 10px;
+	bottom: 10px;
+}
+
+.morph-button-modal-1::before {
+	background: rgba(240,221,204,0.7);
+}
+
+.morph-button-modal-2.open .morph-content {
+	margin: -210px 0 0 -170px;
+	width: 340px;
+	height: 420px;
+}
+
+.morph-button-modal-3.open .morph-content {
+	margin: -255px 0 0 -210px;
+	width: 420px;
+	height: 510px;
+}
+
+.morph-button-modal-3.open .morph-content > div {
+	height: 420px;
+}
+
+.morph-button-modal-2.open .morph-content > div,
+.morph-button-modal-3.open .morph-content > div {
+ 	-webkit-transition: opacity 0.3s 0.3s;
+	transition: opacity 0.3s 0.3s;
+}
+
+.morph-button-modal-4.open .morph-content {
+	margin: -200px 0 0 -320px;
+	width: 640px;
+	height: 400px;
+}
+
+/* Morph Button Style: In the content flow */
+.morph-button-inflow {
+	overflow: hidden;
+	max-width: 100%;
+	height: 70px;
+}
+
+.morph-button-inflow > button {
+	width: 100%;
+	line-height: 70px;
+}
+
+.morph-button-inflow .morph-content {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+}
+
+.morph-button-inflow .morph-content .morph-clone {
+	padding: 0;
+	font-weight: 700;
+	font-size: 1.5em;
+	line-height: 70px;
+}
+
+/* Colors and sizes for individual in flow buttons */
+.morph-button-inflow-1 {
+	width: 600px;
+	margin: 2em auto;
+	-webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
+	transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
+}
+
+.morph-button-inflow-1 > button span {
+	visibility: hidden;
+}
+
+.morph-button-inflow-1 .morph-content .morph-clone {
+	color: #f9f6e5;
+	background: #e85657;
+}
+
+.morph-button-inflow-2 {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 220px;
+	background-color: #fef0e3;
+	-webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
+	transition: height 0.3s, width 0.3s, transform 0.3s;
+	-webkit-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+}
+
+.morph-button-inflow-2 > button {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: transparent;
+	color: #e75854;
+	-webkit-transition: -webkit-transform 0.3s;
+	transition: transform 0.3s;
+}
+
+.morph-button-inflow-2.open > button {
+	-webkit-transform: translateX(-100%);
+	transform: translateX(-100%);
+}
+
+.morph-button-inflow-2 .morph-content {
+	width: 260px;
+	height: 200px;
+}
+
+.morph-button-inflow-2.open {
+	width: 260px;
+}
+
+/* Morph Button Style: Sidebar */
+.morph-button-sidebar,
+.morph-button-sidebar .morph-content {
+	width: 60px;
+	height: 60px;
+}
+
+.morph-button-sidebar {
+	position: fixed;
+	bottom: 50px;
+	left: 50px;
+}
+
+.morph-button-sidebar > button {
+	line-height: 60px;
+	font-size: 1.6em;
+	padding: 0;
+}
+
+.morph-button-sidebar .morph-content {
+	background: #e85657;
+}
+
+.morph-button-sidebar.open .morph-content {
+	top: 0 !important;
+	left: 0 !important;
+	width: 300px;
+	height: 100%;
+	overflow: hidden;
+	-webkit-backface-visibility: hidden;
+}
+
+/* Let's add some nice easing for all cases */
+.morph-button .morph-content,
+.morph-button.open .morph-content,
+.morph-button-modal-4 .morph-clone {
+	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
+	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
+}
+
+/* Helper classes */
+.noscroll {
+	overflow: hidden;
+}
+
+.morph-button-overlay.scroll .morph-content {
+	overflow-y: scroll;
+}
+
+.morph-button-sidebar.scroll .morph-content {
+	overflow: auto;
+}
+
+/* No JS fallback: let's hide the button and show the content */
+.no-js .morph-button > button {
+	display: none;
+}
+
+.no-js .morph-button {
+	margin: 10px 0;
+	float: none;
+}
+
+.no-js .morph-button,
+.no-js .morph-button .morph-content,
+.no-js .morph-button .morph-content > div {
+	position: relative;
+	width: auto;
+	height: auto;
+	opacity: 1;
+	visibility: visible;
+	top: auto;
+	left: auto;
+	-webkit-transform: none;
+	transform: none;
+	pointer-events: auto;
+}
+
+.no-js .morph-button .morph-content .icon-close {
+	display: none;
+}
+
+.no-js .morph-button-sidebar {
+	width: 300px;
+	position: fixed;
+	top: 0;
+	left: 0;
+	margin: 0;
+	height: 100%;
+	background: #e85657;
+	overflow: auto;
+}
+
+.no-transition {
+	-webkit-transition: none !important;
+	transition: none !important;
+}
+
+/* Media Queries */
+
+@media screen and (max-width: 600px) {
+	.morph-button-modal.open .morph-content {
+		top: 0% !important;
+		left: 0% !important;
+		margin: 0;
+		width: 100%;
+		height: 100%;
+		overflow-y: scroll;
+		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
+		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
+	}
+}
+
+@media screen and (max-width: 400px) {
+	.morph-button-fixed,
+	.morph-button-fixed .morph-content {
+		width: 70px;
+		height: 70px;
+	}
+
+	.morph-button-fixed > button {
+		font-size: 75%;
+	}
+
+	.morph-button-sidebar > button {
+		font-size: 1.6em;
+	}
+
+	.morph-button-inflow .morph-content .morph-clone {
+		font-size: 0.9em;
+	}
+
+	.morph-button-modal-4,
+	.morph-button-modal-4 .morph-content {
+		width: 220px;
+		height: 120px;
+	}
+
+	.morph-button-modal-4 > button {
+		font-size: 100%;
+		line-height: 50px;
+	}
+
+	.morph-button-modal-4 > button span {
+		display: block;
+	}
+
+	.morph-button-modal-4 .morph-clone {
+		right: 83px;
+		bottom: 26px;
+	}
+
+	.morph-button-sidebar,
+	.morph-button-sidebar .morph-content {
+		width: 100% !important;
+		height: 60px !important;
+	}
+
+	.morph-button-sidebar {
+		bottom: 0px;
+		left: 0px;
+	}
+
+	.morph-button-sidebar.open .morph-content {
+		height: 100% !important;
+	}
+}
--- a/css/content1.css
+++ b/css/content1.css
@ -0,0 +1,555 @@
+/* Icons */
+@font-face {
+	font-weight: normal;
+	font-style: normal;
+	font-family: 'icomoon';
+	src:url('../fonts/icomoon/icomoon.eot?i64fx9');
+	src:url('../fonts/icomoon/icomoon.eot?#iefixi64fx9') format('embedded-opentype'),
+		url('../fonts/icomoon/icomoon.woff?i64fx9') format('woff'),
+		url('../fonts/icomoon/icomoon.ttf?i64fx9') format('truetype'),
+		url('../fonts/icomoon/icomoon.svg?i64fx9#icomoon') format('svg');
+}
+
+.icon-close {
+	z-index: 100;
+	display: block;
+	overflow: hidden;
+	width: 3em;
+	height: 3em;
+	text-align: center;
+	line-height: 3;
+	cursor: pointer;
+}
+
+.icon:before {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 100%;
+	text-transform: none;
+	font-weight: normal;
+	font-style: normal;
+	font-variant: normal;
+	font-family: 'icomoon';
+	speak: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-camera:before {
+	content: "\e017";
+}
+
+.icon-server:before {
+	content: "\e022";
+}
+
+.icon-heart:before {
+	content: "\e024";
+}
+
+.icon-zoom-in:before {
+	content: "\e037";
+}
+
+.icon-microphone:before {
+	content: "\e048";
+}
+
+.icon-cloud:before {
+	content: "\e066";
+}
+
+.icon-user:before {
+	content: "\e074";
+}
+
+.icon-briefcase:before {
+	content: "\e075";
+}
+
+.icon-globe:before {
+	content: "\e078";
+}
+
+.icon-cog::before {
+	content: "\e600";
+}
+
+.icon-close::before {
+	content: "\e601";
+}
+
+.icon-play::before {
+	content: "\e602";
+}
+
+.icon-pause::before {
+	content: "\e603";
+}
+
+.icon-close {
+	position: absolute;
+	top: 20px;
+	right: 20px;
+}
+
+.icon-close:hover {
+	color: #a50a05;
+}
+
+/* Styles for dummy content */
+
+/* Style for overlay */
+
+.content-style-overlay {
+	padding: 100px 50px;
+	text-align: center;
+}
+
+.content-style-overlay h2 {
+	margin: 0 0 1em 0;
+	padding: 0;
+	font-weight: 300;
+	font-size: 3em;
+}
+
+.content-style-overlay p {
+	margin: 0 auto;
+	padding: 10px 0;
+	max-width: 700px;
+	text-align: justify;
+	font-weight: 300;
+	font-size: 1.5em;
+}
+
+.content-style-overlay .icon-close {
+	border: 2px solid #f9e1c9;
+	border-radius: 50%;
+	line-height: 2.8;
+}
+
+.content-style-overlay .icon-close:hover {
+	border-color: #a50a05;
+}
+
+/* Style for text modal */
+.content-style-text {
+	padding: 60px;
+	text-align: left;
+}
+
+.content-style-text h2 {
+	margin: 0 0 0.5em 0;
+	font-weight: 300;
+	font-size: 1.85em;
+}
+
+.content-style-text p {
+	color: rgba(255,255,255,0.5);
+	font-weight: 300;
+	font-size: 1.15em;
+	line-height: 1.4;
+}
+
+.content-style-text label {
+    padding: 10px;
+    color: #f9e1c9;
+    font-weight: bold;
+}
+
+.content-style-text .icon-close {
+	top: 0;
+	right: 0;
+	color: rgba(0,0,0,0.2);
+}
+
+.content-style-text .icon-close:hover {
+	color: #f9e1c9;
+}
+
+/* Style for form modal */
+.content-style-form {
+	position: relative;
+	text-align: left;
+}
+
+.content-style-form h2 {
+	margin: 0;
+	padding: 0.4em 0 0.3em;
+	text-align: center;
+	font-weight: 300;
+	font-size: 3.5em;
+}
+
+.content-style-form form {
+	padding: 10px 30px;
+}
+
+.content-style-form form p {
+	margin: 0 0 5px 0;
+	font-size: 0.7em;
+}
+
+.content-style-form label {
+	display: block;
+	padding: 10px 0 0;
+	color: #d5bba4;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-weight: bold;
+}
+
+.content-style-form input[type="text"],
+.content-style-form input[type="password"] {
+	padding: 10px;
+	width: 100%;
+	border: 2px solid #ebd3bd;
+	background: transparent;
+	color: #b09a86;
+	font-weight: 300;
+	font-size: 2.2em;
+}
+
+.content-style-form input[type="text"]:focus,
+.content-style-form input[type="password"]:focus {
+	border-color: #e75854;
+	color: #e75854;
+}
+
+.content-style-form input:focus {
+	outline: 0;
+}
+
+.content-style-form button {
+	display: block;
+	margin-top: 2.5em;
+	padding: 1.5em;
+	width: 100%;
+	border: none;
+	background: #e75854;
+	color: #f9f6e5;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-weight: 800;
+	font-size: 1.25em;
+}
+
+.content-style-form .icon-close {
+	top: 0;
+	right: 0;
+	color: #ebd3bd;
+	font-size: 75%;
+}
+
+.content-style-form .icon-close:hover {
+	color: #e75854;
+}
+
+.js .content-style-form-1 h2,
+.js .content-style-form-1 p,
+.js .content-style-form-1 .icon-close {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s 0.35s, -webkit-transform 0.2s 0.35s;
+	transition: opacity 0.2s 0.35s, transform 0.2s 0.35s;
+	-webkit-transform: scale(0.85);
+	transform: scale(0.85);
+}
+
+.content-style-form-1 p:first-child {
+	-webkit-transition-delay: 0.4s;
+	transition-delay: 0.4s;
+}
+
+.content-style-form-1 p:nth-child(2) {
+	-webkit-transition-delay: 0.45s;
+	transition-delay: 0.45s;
+}
+
+.content-style-form-1 p:nth-child(3) {
+	-webkit-transition-delay: 0.5s;
+	transition-delay: 0.5s;
+}
+
+.morph-button.open .content-style-form-1 h2,
+.morph-button.open .content-style-form-1 p,
+.morph-button.open .content-style-form-1 .icon-close {
+	opacity: 1;
+	-webkit-transform: scale(1);
+	transform: scale(1);
+}
+
+.js .content-style-form-2 h2,
+.js .content-style-form-2 p,
+.js .content-style-form-2 .icon-close {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s 0.3s, -webkit-transform 0.2s 0.3s;
+	transition: opacity 0.2s 0.3s, transform 0.2s 0.3s;
+	-webkit-transform: translateY(50px);
+	transform: translateY(50px);
+}
+
+.content-style-form-2 p:first-child {
+	-webkit-transition-delay: 0.35s;
+	transition-delay: 0.35s;
+}
+
+.content-style-form-2 p:nth-child(2) {
+	-webkit-transition-delay: 0.4s;
+	transition-delay: 0.4s;
+}
+
+.content-style-form-2 p:nth-child(3) {
+	-webkit-transition-delay: 0.45s;
+	transition-delay: 0.45s;
+}
+
+.content-style-form-2 p:nth-child(4) {
+	-webkit-transition-delay: 0.5s;
+	transition-delay: 0.5s;
+}
+
+.morph-button.open .content-style-form-2 h2,
+.morph-button.open .content-style-form-2 p,
+.morph-button.open .content-style-form-2 .icon-close {
+	opacity: 1;
+	-webkit-transform: translateY(0);
+	transform: translateY(0);
+}
+
+.content-style-form-4 form {
+	padding: 30px;
+	background: #fff;
+	color: #ccb096;
+	font-size: 1.5em;
+	-webkit-perspective: 1000px;
+	perspective: 1000px;
+}
+
+.content-style-form-4 input[type="text"] {
+	border: none;
+	background-color: #f0f0f0;
+}
+
+.content-style-form-4 form button {
+	background: #ba997b;
+}
+
+.content-style-form-4 form button:focus,
+.content-style-form-4 form button:hover {
+	background: #a9896d;
+}
+
+.js .content-style-form-4 p {
+	opacity: 0;
+	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+	transition: opacity 0.3s, transform 0.3s;
+	-webkit-transform: rotateX(-45deg);
+	transform: rotateX(-45deg);
+	-webkit-transform-origin: center top;
+	transform-origin: center top;
+}
+
+.morph-button.open .content-style-form-4 p {
+	opacity: 1;
+	-webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.4s 0.2s;
+	transition: opacity 0.4s 0.2s, transform 0.4s 0.2s;
+	-webkit-transform: rotateY(0deg);
+	transform: rotateY(0deg);
+}
+
+.morph-button.open .content-style-form-4 p:nth-child(2) {
+	-webkit-transition-delay: 0.35s;
+	transition-delay: 0.35s;
+}
+
+.content-style-social {
+	padding: 30px;
+	text-align: left;
+}
+
+.morph-button-inflow-2 > button svg {
+	display: inline-block;
+	padding-right: 10px;
+	width: 20px;
+	height: 20px;
+	vertical-align: -5%;
+}
+
+.morph-button-inflow-2 > button svg path {
+	fill: #e75854;
+}
+
+.content-style-social a {
+	display: block;
+	padding: 0.5em 0;
+	color: #67c2d4;
+	vertical-align: middle;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-weight: 700;
+	font-size: 0.8em;
+	line-height: 32px;
+}
+
+.js .content-style-social a {
+	-webkit-transition: -webkit-transform 0.3s;
+	transition: transform 0.3s;
+	-webkit-transform: translateX(100%);
+	transform: translateX(100%);
+}
+
+.content-style-social a:hover {
+	color: #e75854;
+}
+
+.content-style-social a:hover svg path {
+	fill: #e75854;
+}
+
+.content-style-social a svg {
+	display: inline-block;
+	padding-right: 10px;
+	vertical-align: middle;
+	-webkit-backface-visibility: hidden;
+}
+
+.morph-button-inflow.open .content-style-social a {
+	-webkit-transform: translateX(0);
+	transform: translateX(0);
+}
+
+.morph-button-inflow.open .content-style-social a:nth-child(2) {
+	-webkit-transition-delay: 0.05s;
+	transition-delay: 0.05s;
+}
+
+.morph-button-inflow.open .content-style-social a:nth-child(3) {
+	-webkit-transition-delay: 0.1s;
+	transition-delay: 0.1s;
+}
+
+.content-style-video {
+	text-align: left;
+}
+
+.video-mockup {
+	width: 640px;
+	height: 360px;
+	max-width: 100%;
+	background: url(../img/rated.png) no-repeat center center;
+	background-size: 100%;
+}
+
+.content-style-video .icon-close,
+.content-style-video .icon-pause {
+	color: #286f81;
+}
+
+.content-style-video .icon-close {
+	top: 0;
+	right: 0;
+}
+
+.content-style-video .icon-close:hover {
+	color: rgba(0,0,0,0.4);
+}
+
+.controls {
+	bottom: 0px;
+	left: 0px;
+	width: 100%;
+}
+
+.js .controls {
+	position: absolute;
+}
+
+.controls span {
+	display: inline-block;
+}
+
+.content-style-video .icon-pause {
+	overflow: hidden;
+	width: 2.5em;
+	height: 2.5em;
+	text-align: center;
+	line-height: 2.5;
+	cursor: pointer;
+	vertical-align: bottom;
+}
+
+.content-style-video span.time {
+	color: #286f81;
+	letter-spacing: 1px;
+	font-weight: 700;
+	line-height: 40px;
+}
+
+.controls::after {
+	content: '';
+	position: absolute;
+	height: 7px;
+	left: 100px;
+	right: 70px;
+	bottom: 16px;
+	background: #aaa;
+}
+
+.content-style-sidebar h2 {
+	font-weight: 300;
+	font-size: 2em;
+	padding: 0.75em 0 0.75em 1em;
+	margin: 0;
+	color: #bb4445;
+}
+
+.content-style-sidebar .icon-close {
+	top: 0;
+	right: 0;
+	font-size: 0.85em;
+}
+
+.content-style-sidebar ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.content-style-sidebar ul li a {
+	display: block;
+	padding: 12px 20px;
+	color: #faf1e0;
+	font-weight: 400;
+	font-size: 1.05em;
+	box-shadow: inset 0 1px rgba(0,0,0,0.1);
+}
+
+.content-style-sidebar ul li:last-child a {
+	box-shadow: inset 0 1px rgba(0,0,0,0.1), inset 0 -1px rgba(0,0,0,0.1);
+}
+
+.content-style-sidebar ul li a:hover {
+	background: rgba(0,0,0,0.1);
+	box-shadow: none;
+}
+
+.content-style-sidebar ul .icon::before {
+	display: inline-block;
+	width: auto;
+	margin-right: 20px;
+	font-size: 1.5em;
+	vertical-align: -10%;
+	color: rgba(0,0,0,0.2);
+}
+
+@media screen and (max-width: 770px) {
+	.content-style-overlay {
+		font-size: 75%;
+	}
+
+	.content-style-overlay .icon-close {
+		top: 5px;
+		right: 5px;
+	}
+}
--- a/css/demo1.css
+++ b/css/demo1.css
@ -0,0 +1,334 @@
+@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Merriweather+Sans:800);
+
+@font-face {
+	font-weight: normal;
+	font-style: normal;
+	font-family: 'codropsicons';
+	src:url('../fonts/codropsicons/codropsicons.eot');
+	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
+		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
+		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
+		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
+}
+
+@font-face {
+	font-family: 'Blokk';
+	src: url('../fonts/blokk/BLOKKRegular.eot');
+	src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
+		 url('../fonts/blokk/BLOKKRegular.woff') format('woff'),
+		 url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+.clearfix:before, .clearfix:after { content: ''; display: table; }
+.clearfix:after { clear: both; }
+
+
+
+
+a, button {
+	color: #553445;
+	text-decoration: none;
+	outline: none;
+}
+
+a:hover, a:focus {
+	color: #e75854;
+}
+
+.codrops-header {
+	margin: 0 auto;
+	padding: 2em;
+	text-align: center;
+}
+
+.codrops-header h1 {
+	margin: 0;
+	font-weight: 800;
+	font-size: 3em;
+	font-family: "Merriweather Sans", sans-serif;
+}
+
+.codrops-header p {
+	padding: 0.35em 0 1.25em;
+	margin: 0;
+	font-size: 1.65em;
+	opacity: 0.7;
+}
+
+/* Codrops Demos */
+.codrops-demos a {
+	font-family: "Merriweather Sans", sans-serif;
+	text-transform: uppercase;
+	display: inline-block;
+	margin: 0 10px;
+}
+
+.codrops-demos a.current-demo {
+	color: #e75854;
+}
+
+/* Top Navigation Style */
+.codrops-top {
+	width: 100%;
+	text-transform: uppercase;
+	font-weight: 700;
+	font-size: 0.69em;
+	line-height: 2.2;
+}
+
+.codrops-top a {
+	display: inline-block;
+	padding: 0 1em;
+	text-decoration: none;
+	letter-spacing: 1px;
+}
+
+.codrops-top span.right {
+	float: right;
+}
+
+.codrops-top span.right a {
+	display: block;
+	float: left;
+}
+
+.codrops-icon:before {
+	margin: 0 4px;
+	text-transform: none;
+	font-weight: normal;
+	font-style: normal;
+	font-variant: normal;
+	font-family: 'codropsicons';
+	line-height: 1;
+	speak: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+.codrops-icon-drop:before {
+	content: "\e001";
+}
+
+.codrops-icon-prev:before {
+	content: "\e004";
+}
+
+section {
+	padding: 2em;
+	text-align: justify;
+	max-width: 800px;
+	margin: 0 auto;
+	clear: both;
+}
+
+section p {
+	font-size: 1.5em;
+	line-height: 1.75;
+}
+
+section > p:first-child {
+	text-align: center;
+}
+
+section.related {
+	text-align: center;
+}
+
+.related p {
+	font-weight: 700;
+}
+
+.related > a {
+	border: 2px solid #faf1e0;
+	color: #faf1e0;
+	display: inline-block;
+	text-align: center;
+	margin: 20px 10px;
+	padding: 20px;
+	-webkit-transition: color 0.3s, border-color 0.3s;
+	transition: color 0.3s, border-color 0.3s;
+}
+
+.related a:hover {
+	color: rgba(0,0,0,0.2);
+	border-color: rgba(0,0,0,0.2);
+}
+
+.related a img {
+	max-width: 100%;
+	opacity: 0.8;
+	-webkit-transition: opacity 0.3s;
+	transition: opacity 0.3s;
+}
+
+.related a:hover img,
+.related a:active img {
+	opacity: 1;
+}
+
+.related a h3 {
+	margin: 0;
+	padding: 0.5em 0 0.3em;
+	max-width: 300px;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-size: 1em;
+	text-align: left;
+	font-family: "Merriweather Sans", sans-serif;
+}
+
+/* Demo mockups */
+.mockup-content {
+	text-align: center;
+}
+
+.demo-4 .mockup-content {
+	padding: 1em 0 3em;
+}
+
+.demo-5 .mockup-content {
+	padding: 1em 0 6em;
+}
+
+.mockup-content > span {
+	display: block;
+	background: rgba(0,0,0,0.1);
+	height: 50px;
+	width: 100%;
+	margin: 0 0 10px;
+	clear: both;
+}
+
+.mockup-content > span:nth-child(2),
+.mockup-content > span:nth-child(3),
+.mockup-content > span:nth-last-child(2) {
+	width: calc(50% - 5px);
+	float: left;
+	clear: none;
+	height: 80px;
+}
+
+.mockup-content > span:nth-child(3),
+.mockup-content > span:nth-last-child(2) {
+	float: right;
+}
+
+.mockup-content > span:nth-last-child(2) {
+	width: calc(100% - 310px);
+}
+
+.no-js .mockup-content > span:nth-last-child(2) {
+	width: 100%;
+}
+
+.mockup-content h2 {
+	font-size: 2em;
+	margin: 0;
+}
+
+.mockup-content > p {
+	font-family: 'Blokk', sans-serif;
+	font-size: 0.85em;
+	text-align: center;
+	opacity: 0.5;
+	margin: 0;
+	overflow: hidden;
+}
+
+.no-js .joiner {
+	display: block;
+}
+
+.demo-5 .mockup-content > p {
+	font-size: 1.4em;
+	margin: 0;
+	padding: 0.5em 0;
+	text-align: justify;
+	font-family: 'Lato', Arial, sans-serif;
+}
+
+.js .fixed-block {
+	min-height: 300px;
+	position: relative;
+}
+
+.mockup-left {
+	float: left;
+	max-width: 100%;
+	overflow: hidden;
+	width: 300px;
+	margin: 0 40px 50px 0;
+	background: rgba(0,0,0,0.1);
+	height: 400px;
+	position: relative;
+}
+
+.mockup-left::after {
+	content:'\2234';
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: rgba(0,0,0,0.05);
+	font-size: 15em;
+}
+
+.mockup-right {
+	text-align: left;
+}
+
+html.demo-7, .demo-7 body {
+	overflow-x: hidden;
+	height: 100%;
+}
+
+.demo-7 .container {
+	width: 100%;
+	position: absolute;
+	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
+	transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
+}
+
+.no-js.demo-7 .container {
+	width: calc(100% - 300px);
+	right: 0;
+}
+
+.pushed.container {
+	-webkit-transition-duration: 0.5s;
+	transition-duration: 0.5s;
+	-webkit-transform: translateX(300px);
+	transform: translateX(300px);
+}
+
+@media screen and (max-width: 770px) {
+	.mockup-left {
+		float: none;
+		margin: 0 auto 20px;
+	}
+
+	.mockup-right {
+		text-align: center;
+	}
+
+	.joiner {
+		display: block;
+	}
+}
+
+@media screen and (max-width: 400px) {
+	.mockup-content > span:nth-last-child(2) {
+		width: calc(100% - 210px);
+	}
+}
+
+@media screen and (max-width: 25em) {
+
+	.codrops-icon span {
+		display: none;
+	}
+
+}
--- a/css/normalize1.css
+++ b/css/normalize1.css
@ -0,0 +1 @@
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}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:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}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;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
--- a/fonts/blokk/BLOKKRegular.eot
+++ b/fonts/blokk/BLOKKRegular.eot
--- a/fonts/blokk/BLOKKRegular.svg
+++ b/fonts/blokk/BLOKKRegular.svg
@ -0,0 +1,233 @@
+<?xml version="1.0" standalone="no"?>
+<!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" width="100%" height="100%">
+<metadata>
+Created by FontXChange 20110222 at Fri Feb  1 20:10:43 2013
+ By Bjørn Kvamme
+Copyright tomma 2013
+</metadata>
+<defs>
+<font id="BLOKK" horiz-adv-x="2688" >
+  <font-face 
+    font-family="BLOKK"
+    font-weight="400"
+    font-stretch="normal"
+    units-per-em="1024"
+    panose-1="0 0 4 0 0 0 0 0 0 0"
+    ascent="819"
+    descent="-205"
+    x-height="704"
+    cap-height="704"
+    bbox="-64 0 9344 704"
+    underline-thickness="51"
+    underline-position="127"
+    unicode-range="U+0020-201D"
+  />
+<missing-glyph horiz-adv-x="8640" 
+d="M352 99v112h-112v-112h112zM463 230v112h-223v-112h223zM352 361v112h-112v-112h112zM463 492v111h-111q-47 0 -79 -33q-33 -33 -33 -78h223zM0 0v704h704v-704h-704z" />
+    <glyph glyph-name=".notdef" horiz-adv-x="8640" 
+d="M352 99v112h-112v-112h112zM463 230v112h-223v-112h223zM352 361v112h-112v-112h112zM463 492v111h-111q-47 0 -79 -33q-33 -33 -33 -78h223zM0 0v704h704v-704h-704z" />
+    <glyph glyph-name="glyph1" horiz-adv-x="-64" 
+ />
+    <glyph glyph-name="glyph2" horiz-adv-x="1344" 
+ />
+    <glyph glyph-name="space" unicode=" " horiz-adv-x="1344" 
+ />
+    <glyph glyph-name="exclam" unicode="!" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="quotedbl" unicode="&#x22;" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="numbersign" unicode="#" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="dollar" unicode="$" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="percent" unicode="%" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="ampersand" unicode="&#x26;" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="quotesingle" unicode="'" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="parenleft" unicode="(" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="parenright" unicode=")" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="asterisk" unicode="*" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="plus" unicode="+" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="comma" unicode="," 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="hyphen" unicode="-" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="period" unicode="." 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="slash" unicode="/" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="zero" unicode="0" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="one" unicode="1" horiz-adv-x="1280" 
+d="M-64 0v704h1344v-704h-1344z" />
+    <glyph glyph-name="two" unicode="2" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="three" unicode="3" horiz-adv-x="3584" 
+d="M-64 0v704h3648v-704h-3648z" />
+    <glyph glyph-name="four" unicode="4" horiz-adv-x="4672" 
+d="M-64 0v704h4736v-704h-4736z" />
+    <glyph glyph-name="five" unicode="5" horiz-adv-x="6272" 
+d="M-64 0v704h6336v-704h-6336z" />
+    <glyph glyph-name="six" unicode="6" horiz-adv-x="6848" 
+d="M-64 0v704h6912v-704h-6912z" />
+    <glyph glyph-name="seven" unicode="7" horiz-adv-x="7232" 
+d="M-64 0v704h7296v-704h-7296z" />
+    <glyph glyph-name="eight" unicode="8" horiz-adv-x="8192" 
+d="M-64 0v704h8256v-704h-8256z" />
+    <glyph glyph-name="nine" unicode="9" horiz-adv-x="9344" 
+d="M-64 0v704h9408v-704h-9408z" />
+    <glyph glyph-name="colon" unicode=":" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="semicolon" unicode=";" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="less" unicode="&#x3c;" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="equal" unicode="=" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="greater" unicode="&#x3e;" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="question" unicode="?" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="at" unicode="@" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="A" unicode="A" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="B" unicode="B" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="C" unicode="C" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="D" unicode="D" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="E" unicode="E" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="F" unicode="F" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="G" unicode="G" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="H" unicode="H" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="I" unicode="I" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="J" unicode="J" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="K" unicode="K" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="L" unicode="L" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="M" unicode="M" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="N" unicode="N" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="O" unicode="O" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="P" unicode="P" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="Q" unicode="Q" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="R" unicode="R" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="S" unicode="S" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="T" unicode="T" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="U" unicode="U" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="V" unicode="V" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="W" unicode="W" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="X" unicode="X" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="Y" unicode="Y" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="Z" unicode="Z" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="bracketleft" unicode="[" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="backslash" unicode="\" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="bracketright" unicode="]" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="asciicircum" unicode="^" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="underscore" unicode="_" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="grave" unicode="`" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="a" unicode="a" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="b" unicode="b" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="c" unicode="c" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="d" unicode="d" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="e" unicode="e" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="f" unicode="f" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="g" unicode="g" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="h" unicode="h" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="i" unicode="i" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="j" unicode="j" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="k" unicode="k" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="l" unicode="l" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="m" unicode="m" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="n" unicode="n" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="o" unicode="o" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="p" unicode="p" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="q" unicode="q" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="r" unicode="r" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="s" unicode="s" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="t" unicode="t" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="u" unicode="u" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="v" unicode="v" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="w" unicode="w" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="x" unicode="x" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="y" unicode="y" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="z" unicode="z" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="braceleft" unicode="{" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="bar" unicode="|" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="braceright" unicode="}" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="asciitilde" unicode="~" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="quoteleft" unicode="&#x2018;" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="quoteright" unicode="&#x2019;" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="quotedblleft" unicode="&#x201c;" 
+d="M-64 0v704h2752v-704h-2752z" />
+    <glyph glyph-name="quotedblright" unicode="&#x201d;" 
+d="M-64 0v704h2752v-704h-2752z" />
+  </font>
+</defs></svg>
--- a/fonts/blokk/BLOKKRegular.ttf
+++ b/fonts/blokk/BLOKKRegular.ttf
--- a/fonts/blokk/BLOKKRegular.woff
+++ b/fonts/blokk/BLOKKRegular.woff
--- a/fonts/icomoon/icomoon.eot
+++ b/fonts/icomoon/icomoon.eot
--- a/fonts/icomoon/icomoon.svg
+++ b/fonts/icomoon/icomoon.svg
@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!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">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
+<glyph unicode="&#xe017;" d="M341.333 853.334h341.333l85.333-128h128q53 0 90.5-38.167t37.5-91.167v-468.667q0-53-37.5-90.167t-90.5-37.167h-768q-53 0-90.5 37.5t-37.5 90.5v468.667q0 53 37.5 90.833t90.5 37.833h128zM512 597.334q43.333 0 82.833-17t68-45.5 45.5-68 17-82.833-17-82.833-45.5-68-68-45.5-82.833-17-82.833 17-68 45.5-45.5 68-17 82.833 17 82.833 45.5 68 68 45.5 82.833 17zM512 512q-53 0-90.5-37.5t-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5-37.5 90.5-90.5 37.5zM722.333 640l-83.667 128h-251.667l-85.333-128h-173.667q-17.667 0-30.167-12.667t-12.5-30.667v-468.667q0-17.667 12.5-30.167t30.167-12.5h768q18 0 30.333 12.167t12.333 29.833v468.667q0 18-12.667 31t-30 13h-173.667z" />
+<glyph unicode="&#xe022;" d="M512 896q87.333 0 169-10.5t149.833-30.667 109.333-53.667 41.167-75.833v-597.333q0-42.333-41.167-75.833t-109.333-53.667-149.833-30.667-169-10.5-169 10.5-149.833 30.667-109.333 53.667-41.167 75.833v597.333q0 42.333 41.167 75.833t109.333 53.667 149.833 30.667 169 10.5zM896 128.667v194.333q-65.333-33-168.333-50t-215.667-17-215.667 17-168.333 50v-195q2-7.333 17.833-17.667t48.5-22.333 76-22 107-16.667 134.667-6.667 134.667 6.667 107 16.833 76 22.167 48.5 22.333 17.833 18zM896 427.334v194.333q-65.333-33-168.333-50t-215.667-17-215.667 17-168.333 50v-195q2-7.333 17.833-17.667t48.5-22.333 76-22 107-16.667 134.667-6.667 134.667 6.667 106.833 16.667 75.833 22 48.667 22.5 18 18.167zM512 810.667q-70.333 0-133.667-6.667t-106.333-16.5-75.833-21.667-49.167-22.333-19-18.167q2.667-7.667 19-18.167t49.167-22.333 75.833-21.667 106.333-16.5 133.667-6.667 133.667 6.667 106.333 16.5 75.833 21.667 49.167 22.333 19 18.167q-2.667 7.667-19 18.167t-49.167 22.333-75.833 21.667-106.333 16.5-133.667 6.667z" />
+<glyph unicode="&#xe024;" d="M753.333 853.334q69.667 0 128.5-34.333t93.167-93.167 34.333-128.5q0-50-19.167-97.167t-55.833-83.833l-422.333-422.333-422.333 422.333q-36.667 36.667-55.833 83.833t-19.167 97.167q0 69.667 34.333 128.5t93.167 93.167 128.5 34.333q50.333 0 97.167-19t83.833-56l60.333-60.333 60.333 60.333q36.667 36.667 83.833 55.833t97.167 19.167zM753.333 768q-33.333 0-64.667-12.667t-56-37.333l-120.667-120.667-120.667 120.667q-24.667 24.667-56 37.333t-64.667 12.667q-46.667 0-85.833-22.833t-62-62-22.833-85.833q0-33.333 12.667-64.667t37.333-56l362-362 362 362q24.667 24.667 37.333 56t12.667 64.667q0 46.667-22.833 85.833t-62 62-85.833 22.833z" />
+<glyph unicode="&#xe037;" d="M426.667 896q78 0 149.167-30.5t122.5-81.833 81.833-122.5 30.5-149.167q0-67-21.833-128.333t-62.167-111.333l242.333-242q12.333-12.333 12.333-30.333 0-18.333-12.167-30.5t-30.5-12.167q-18 0-30.333 12.333l-242 242.333q-50-40.333-111.333-62.167t-128.333-21.833q-78 0-149.167 30.5t-122.5 81.833-81.833 122.5-30.5 149.167 30.5 149.167 81.833 122.5 122.5 81.833 149.167 30.5zM426.667 810.667q-60.667 0-116-23.667t-95.333-63.667-63.667-95.333-23.667-116 23.667-116 63.667-95.333 95.333-63.667 116-23.667 116 23.667 95.333 63.667 63.667 95.333 23.667 116-23.667 116-63.667 95.333-95.333 63.667-116 23.667zM426.667 682.667q17.667 0 30.167-12.5t12.5-30.167v-85.333h85.333q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-85.333v-85.333q0-17.667-12.5-30.167t-30.167-12.5-30.167 12.5-12.5 30.167v85.333h-85.333q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h85.333v85.333q0 17.667 12.5 30.167t30.167 12.5z" />
+<glyph unicode="&#xe048;" d="M810.667 554.667q17.667 0 30.167-12.5t12.5-30.167v-85.333q0-64-23.167-123.167t-63-103.667-95-74.333-117.5-37.5v-88h128q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-341.333q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h128v88q-62.333 7.667-117.5 37.5t-95 74.333-63 103.667-23.167 123.167v85.333q0 17.667 12.5 30.167t30.167 12.5 30.167-12.5 12.5-30.167v-85.333q0-69.667 34.333-128.5t93.167-93.167 128.5-34.333 128.5 34.333 93.167 93.167 34.333 128.5v85.333q0 17.667 12.5 30.167t30.167 12.5zM512 938.667q70.667 0 120.667-50t50-120.667v-341.333q0-70.667-50-120.667t-120.667-50-120.667 50-50 120.667v341.333q0 70.667 50 120.667t120.667 50zM512 853.334q-35.333 0-60.333-25t-25-60.333v-341.333q0-35.333 25-60.333t60.333-25 60.333 25 25 60.333v341.333q0 35.333-25 60.333t-60.333 25z" />
+<glyph unicode="&#xe066;" d="M640 853.334q78 0 149.167-30.5t122.5-81.833 81.833-122.5 30.5-149.167q0-72.667-26.5-139.667t-72-117.333-108.667-83.5-134.167-41.167v86q71.667 10.333 130.167 51.833t92.167 105.667 33.667 138.167q0 60.667-23.667 116t-63.667 95.333-95.333 63.667-116 23.667q-55.333 0-106.5-19.833t-90-53.833-65-81.333-33.833-101h-88.667q-70.667 0-120.667-50t-50-120.667q0-38.667 15.167-71.667t39.833-54.167 54.833-33 60.833-11.833h170.667v-85.333h-170.667q-69.667 0-128.5 34.333t-93.167 93.167-34.333 128.5 34.333 128.5 93.167 93.167 128.5 34.333h22q26.333 74.333 79.333 132.167t126.833 90.833 155.833 33zM554.667 512q17.667 0 30.333-12.667l128-128q12.333-12.333 12.333-30 0-18.333-12.167-30.5t-30.5-12.167q-18 0-30.333 12.333l-55 55.333v-281q0-17.667-12.5-30.167t-30.167-12.5-30.167 12.5-12.5 30.167v281l-55-55.333q-12.333-12.333-30.333-12.333-17.667 0-30.167 12.5t-12.5 30.167q0 17 12.333 30l128 128q12.667 12.667 30.333 12.667z" />
+<glyph unicode="&#xe074;" d="M512 938.667q69.667 0 128.5-34.333t93.167-93.167 34.333-128.5v-128q0-53.333-20.667-101t-57.667-83q97.333-15.333 173-45.167t118.5-70.5 42.833-85.667v-84q0-53-37.5-90.5t-90.5-37.5h-768q-53 0-90.5 37.5t-37.5 90.5v84.333q0 45 42.833 85.667t118.333 70.5 172.833 44.833q-36.667 35.667-57.333 83.167t-20.667 100.833v128q0 69.667 34.333 128.5t93.167 93.167 128.5 34.333zM512 298.667q-92.667 0-178.833-14.833t-150.167-41.5q-25.667-10.667-45.833-22.667t-30.667-21.667-15.833-16.833-5.333-11.5v-84.333q0-17.667 12.5-30.167t30.167-12.5h768q17.667 0 30.167 12.5t12.5 30.167v84q0 4.333-5.333 11.5t-15.833 16.833-30.667 21.667-45.833 23q-64 26.667-150.167 41.5t-178.833 14.833zM512 853.334q-70.667 0-120.667-50t-50-120.667v-128q0-70.667 50-120.667t120.667-50 120.667 50 50 120.667v128q0 70.667-50 120.667t-120.667 50z" />
+<glyph unicode="&#xe075;" d="M426.667 853.334h170.667q53 0 90.5-37.5t37.5-90.5v-42.667h128q53 0 90.5-37.5t37.5-90.5v-426.667q0-53-37.5-90.5t-90.5-37.5h-682.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 53 37.5 90.5t90.5 37.5h128v42.667q0 53 37.5 90.5t90.5 37.5zM213.333 85.334v512h-42.667q-17.667 0-30.167-12.5t-12.5-30.167v-426.667q0-17.667 12.5-30.167t30.167-12.5h42.667zM725.333 85.334v512h-426.667v-512h426.667zM853.333 597.334h-42.667v-512h42.667q17.667 0 30.167 12.5t12.5 30.167v426.667q0 17.667-12.5 30.167t-30.167 12.5zM597.333 768h-170.667q-17.667 0-30.167-12.5t-12.5-30.167v-42.667h256v42.667q0 17.667-12.5 30.167t-30.167 12.5z" />
+<glyph unicode="&#xe078;" d="M512 896q12 0 18-0.333 62-2.333 120.5-20.5t108.167-48.833 91.167-73.833 70.333-93.833 45-110.167 16.167-121.833-16.167-121.833-45-110.167-70.333-93.833-91.167-73.833-108.167-48.833-120.5-20.5q-6-0.333-18-0.333t-18 0.333q-62 2.333-120.5 20.5t-108.167 48.833-91.167 73.833-70.333 93.833-45 110.167-16.167 121.833 16.167 121.833 45 110.167 70.333 93.833 91.167 73.833 108.167 48.833 120.5 20.5q6 0.333 18 0.333zM300.333 384h-170q13.333-119 91.667-209t192.667-120q-43.333 65.667-75.5 148.833t-38.833 180.167zM638.333 384h-252.667q3.333-42.667 13.833-85.333t23.5-75.5 30-64.833 30.667-52.667 28.333-39.667q14.667 19 28.333 39.833t30.667 52.833 30 64.833 23.5 75.333 13.833 85.167zM414.667 798.334q-114.333-30-192.667-120t-91.667-209h170q11.667 174 114.333 329zM893.667 384h-169.667q-12.333-174.333-114.667-329 114.333 30 192.667 120t91.667 209zM512 787.334q-14.667-19-28.167-39.833t-30.667-52.833-30.167-64.833-23.5-75.333-13.833-85.167h252.667q-3.333 42.667-13.833 85.333t-23.5 75.5-30 64.833-30.667 52.667-28.333 39.667zM609.333 798.334q102.333-154.667 114.667-329h169.667q-13.333 119-91.667 209t-192.667 120z" />
+<glyph unicode="&#xe600;" d="M363.722 237.948l41.298 57.816-45.254 45.256-57.818-41.296c-10.722 5.994-22.204 10.774-34.266 14.192l-11.682 70.084h-64l-11.68-70.086c-12.062-3.418-23.544-8.198-34.266-14.192l-57.818 41.298-45.256-45.256 41.298-57.816c-5.994-10.72-10.774-22.206-14.192-34.266l-70.086-11.682v-64l70.086-11.682c3.418-12.060 8.198-23.544 14.192-34.266l-41.298-57.816 45.254-45.256 57.818 41.296c10.722-5.994 22.204-10.774 34.266-14.192l11.682-70.084h64l11.68 70.086c12.062 3.418 23.544 8.198 34.266 14.192l57.818-41.296 45.254 45.256-41.298 57.816c5.994 10.72 10.774 22.206 14.192 34.266l70.088 11.68v64l-70.086 11.682c-3.418 12.060-8.198 23.544-14.192 34.266zM224 96c-35.348 0-64 28.654-64 64s28.652 64 64 64 64-28.654 64-64-28.652-64-64-64zM1024 576v64l-67.382 12.25c-1.242 8.046-2.832 15.978-4.724 23.79l57.558 37.1-24.492 59.128-66.944-14.468c-4.214 6.91-8.726 13.62-13.492 20.13l39.006 56.342-45.256 45.254-56.342-39.006c-6.512 4.766-13.22 9.276-20.13 13.494l14.468 66.944-59.128 24.494-37.1-57.558c-7.812 1.892-15.744 3.482-23.79 4.724l-12.252 67.382h-64l-12.252-67.382c-8.046-1.242-15.976-2.832-23.79-4.724l-37.098 57.558-59.128-24.492 14.468-66.944c-6.91-4.216-13.62-8.728-20.13-13.494l-56.342 39.006-45.254-45.254 39.006-56.342c-4.766-6.51-9.278-13.22-13.494-20.13l-66.944 14.468-24.492-59.128 57.558-37.1c-1.892-7.812-3.482-15.742-4.724-23.79l-67.384-12.252v-64l67.382-12.25c1.242-8.046 2.832-15.978 4.724-23.79l-57.558-37.1 24.492-59.128 66.944 14.468c4.216-6.91 8.728-13.618 13.494-20.13l-39.006-56.342 45.254-45.256 56.342 39.006c6.51-4.766 13.22-9.276 20.13-13.492l-14.468-66.944 59.128-24.492 37.102 57.558c7.81-1.892 15.742-3.482 23.788-4.724l12.252-67.384h64l12.252 67.382c8.044 1.242 15.976 2.832 23.79 4.724l37.1-57.558 59.128 24.492-14.468 66.944c6.91 4.216 13.62 8.726 20.13 13.492l56.342-39.006 45.256 45.256-39.006 56.342c4.766 6.512 9.276 13.22 13.492 20.13l66.944-14.468 24.492 59.13-57.558 37.1c1.892 7.812 3.482 15.742 4.724 23.79l67.382 12.25zM672 468.8c-76.878 0-139.2 62.322-139.2 139.2s62.32 139.2 139.2 139.2 139.2-62.322 139.2-139.2c0-76.878-62.32-139.2-139.2-139.2z" />
+<glyph unicode="&#xe601;" d="M1014.662 137.34c-0.004 0.004-0.008 0.008-0.012 0.010l-310.644 310.65 310.644 310.65c0.004 0.004 0.008 0.006 0.012 0.010 3.344 3.346 5.762 7.254 7.312 11.416 4.246 11.376 1.824 24.682-7.324 33.83l-146.746 146.746c-9.148 9.146-22.45 11.566-33.828 7.32-4.16-1.55-8.070-3.968-11.418-7.31 0-0.004-0.004-0.006-0.008-0.010l-310.648-310.652-310.648 310.65c-0.004 0.004-0.006 0.006-0.010 0.010-3.346 3.342-7.254 5.76-11.414 7.31-11.38 4.248-24.682 1.826-33.83-7.32l-146.748-146.748c-9.148-9.148-11.568-22.452-7.322-33.828 1.552-4.16 3.97-8.072 7.312-11.416 0.004-0.002 0.006-0.006 0.010-0.010l310.65-310.648-310.65-310.652c-0.002-0.004-0.006-0.006-0.008-0.010-3.342-3.346-5.76-7.254-7.314-11.414-4.248-11.376-1.826-24.682 7.322-33.83l146.748-146.746c9.15-9.148 22.452-11.568 33.83-7.322 4.16 1.552 8.070 3.97 11.416 7.312 0.002 0.004 0.006 0.006 0.010 0.010l310.648 310.65 310.648-310.65c0.004-0.002 0.008-0.006 0.012-0.008 3.348-3.344 7.254-5.762 11.414-7.314 11.378-4.246 24.684-1.826 33.828 7.322l146.746 146.748c9.148 9.148 11.57 22.454 7.324 33.83-1.552 4.16-3.97 8.068-7.314 11.414z" />
+<glyph unicode="&#xe602;" d="M192 832l640-384-640-384z" />
+<glyph unicode="&#xe603;" d="M128 832h320v-768h-320zM576 832h320v-768h-320z" />
+</font></defs></svg>
--- a/fonts/icomoon/icomoon.ttf
+++ b/fonts/icomoon/icomoon.ttf
--- a/fonts/icomoon/icomoon.woff
+++ b/fonts/icomoon/icomoon.woff
--- a/img/relatedposts/FLO-webwallet-360x162.png
+++ b/img/relatedposts/FLO-webwallet-360x162.png
--- a/img/relatedposts/FLO-webwallet.png
+++ b/img/relatedposts/FLO-webwallet.png
--- a/img/relatedposts/token-explorer-300x162.png
+++ b/img/relatedposts/token-explorer-300x162.png
--- a/img/relatedposts/token-explorer.png
+++ b/img/relatedposts/token-explorer.png
--- a/index.html
+++ b/index.html
@ -1,80 +1,239 @@
 <!DOCTYPE html>
 <html lang="en" class="no-js">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>FLOdata tester</title>
-		<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
-		<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
-		<meta name="author" content="Codrops" />
-		<link rel="shortcut icon" href="../favicon.ico">
-		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
-		<link rel="stylesheet" type="text/css" href="css/demo.css" />
-		<link rel="stylesheet" type="text/css" href="css/component.css" />
-		<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
-		<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
-		<script src="js/modernizr.custom.js"></script>
-	</head>
-	<body>
-		<div class="container">

-			<div class="fs-form-wrap" id="fs-form-wrap">
-				<div class="fs-title">
-					<h1>FLOdata tester</h1>
-					<div class="codrops-top">
-						<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/NotificationStyles/"><span>Previous Demo</span></a>
-						<a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19520"><span>Back to the Codrops Article</span></a>
-						<a class="codrops-icon codrops-icon-info" href="#"><span>This is a demo for a fullscreen form</span></a>
-					</div>
-				</div>
-				<form id="myform" class="fs-form fs-form-full" autocomplete="off">
-					<ol class="fs-fields">
-						<li>
-							<label class="fs-field-label fs-anim-upper" for="q1">Enter FLO data</label>
-							<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="Send 50 rmt# to address$" required/>
-						</li>
-					</ol><!-- /fs-fields -->
-					<button class="fs-submit" type="submit">Send answers</button>
-				</form><!-- /fs-form -->
-			</div><!-- /fs-form-wrap -->
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>FLOdata tester</title>
+    <meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
+    <meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
+    <meta name="author" content="Codrops" />
+    <link rel="shortcut icon" href="../favicon.ico">
+    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
+    <link rel="stylesheet" type="text/css" href="css/demo.css" />
+    <link rel="stylesheet" type="text/css" href="css/component.css" />
+    <link rel="stylesheet" type="text/css" href="css/cs-select.css" />
+    <link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
+    <script src="js/modernizr.custom.js"></script>
+    <!-- Imported from index3.html .. to be integrated later -->
+    <link rel="stylesheet" type="text/css" href="css/normalize1.css" />
+    <link rel="stylesheet" type="text/css" href="css/demo1.css" />
+    <link rel="stylesheet" type="text/css" href="css/component1.css" />
+    <link rel="stylesheet" type="text/css" href="css/content1.css" />
+    <style>
+        .btn {
+          background-color: DodgerBlue;
+          border: none;
+          color: white;
+          padding: 12px 16px;
+          font-size: 16px;
+          cursor: pointer;
+        }

-			<!-- Related demos -->
-			<div class="related">
-				<p>If you enjoyed this demo you might also like:</p>
-				<a href="http://tympanus.net/Development/MinimalForm/">
-					<img src="img/relatedposts/minimalform1-300x162.png" />
-					<h3>Minimal Form Interface</h3>
-				</a>
-				<a href="http://tympanus.net/Development/ButtonComponentMorph/">
-					<img src="img/relatedposts/MorphingButtons-300x162.png" />
-					<h3>Morphing Buttons Concept</h3>
-				</a>
-			</div>
+        /* Darker background on mouse-over */
+        .btn:hover {
+          background-color: RoyalBlue;
+        }
+    </style>
+    <script src="js/modernizr1.custom.js"></script>
+</head>

-		</div><!-- /container -->
-		<script src="js/classie.js"></script>
-		<script src="js/selectFx.js"></script>
-		<script src="js/fullscreenForm.js"></script>
-		<script>
-			(function() {
-				var formWrap = document.getElementById( 'fs-form-wrap' );
+<body>
+    <div class="container">
+        <!--This section is all imported from index3.html -->
+        <div class="morph-button morph-button-overlay morph-button-fixed">
+            <button type="button" class="codrops-icon" href="#">Help</button>
+            <div class="morph-content" style="left: 642.5px; top: 391.734px;">
+                <div>
+                    <div class="content-style-overlay">
+                        <span class="icon icon-close">Close the overlay</span>
+                        <h2>What is token tester?</h2>
+                        <p>FLO Token Tester is part of the Token creation and transfer system on the FLO blockchain. FLO blockchain allows for 1024 characters of plaintext to be put in the public ledger with a simple transaction. The characters, which are called FLO data, enable to extend the satoshi blockchain design to further use cases</p>
+                        <p>You can create tokens by simply writing the following as FLO data:<br><br>
+                            <b><i>Create 21 million tokens with name alphacoin#</i></b>
+                            <br>or<br> 
+                            <b><i>Start alphacoin# token system with 21 million tokens</i></b></p>
+                        <p>You can transfer tokens by simply writing the following as FLO data:<br><br>
+                            <b><i>Send 500 alphacoin# to FLOAddress$</i></b>
+                            <br>or<br> 
+                            <b><i>Transfer 500 alphacoin# to FLOAddress$</i></b></p>
+                        <p>In this system there is no need for technical code to be written. Everyone would be able to create and launch their own token systems, without knowing any kind of programming.</p>
+                        <p>You can test if the FLO data you will enter to create or transfer tokens is valid using the Token Tester. Go ahead!</p>
+                    </div>
+                </div>
+            </div>
+        </div><!-- morph-button -->
+        <div class="fs-form-wrap" id="fs-form-wrap">
+            <div class="fs-title">
+                <h1>FLO Data Tester</h1>
+                <div class="codrops-top">
+                </div>
+            </div>
+            <form id="myform" class="fs-form fs-form-full" autocomplete="off">
+                <ol class="fs-fields">
+                    <li>
+                        <label class="fs-field-label fs-anim-upper" for="q1">Enter FLO data</label>
+                        <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="Send 50 rmt# to address$" required />
+                    </li>
+                </ol><!-- /fs-fields -->
+                <button class="fs-submit" type="submit">Send answers</button>
+            </form><!-- /fs-form -->
+        </div><!-- /fs-form-wrap -->
+        <!-- Related demos -->
+        <div class="related">
+            <p>Yo! Its time to put this FLO Data to use</p>
+            <a href="http://ranchimall1.duckdns.org:8000/WebWallet/testnet.html">
+                <img src="img/relatedposts/FLO-webwallet-360x162.png" />
+                <h3>Go to FLO webwallet & Send/Create tokens</h3>
+            </a>
+            <a href="http://ranchimall1.duckdns.org:5000/">
+                <img src="img/relatedposts/token-explorer-300x162.png" />
+                <h3>Track your tokens at the Token Explorer</h3>
+            </a>
+        </div>
+    </div><!-- /container -->
+    <script src="js/classie.js"></script>
+    <script src="js/selectFx.js"></script>
+    <script src="js/fullscreenForm.js"></script>
+    <script>
+    (function() {
+        var formWrap = document.getElementById('fs-form-wrap');

-				[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
-					new SelectFx( el, {
-						stickyPlaceholder: false,
-						onChange: function(val){
-							document.querySelector('span.cs-placeholder').style.backgroundColor = val;
-						}
-					});
-				} );
+        [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {
+            new SelectFx(el, {
+                stickyPlaceholder: false,
+                onChange: function(val) {
+                    document.querySelector('span.cs-placeholder').style.backgroundColor = val;
+                }
+            });
+        });

-				new FForm( formWrap, {
-					onReview : function() {
-						classie.add( document.body, 'overview' ); // for demo purposes only
-					}
-				} );
-			})();
-		</script>
-	</body>
-</html>
+        new FForm(formWrap, {
+            onReview: function() {
+                classie.add(document.body, 'overview'); // for demo purposes only
+            }
+        });
+    })();
+    </script>
+    <script src="js/uiMorphingButton_fixed.js"></script>
+    <script>
+    (function() {
+        var docElem = window.document.documentElement,
+            didScroll, scrollPosition;
+
+        // trick to prevent scrolling when opening/closing button
+        function noScrollFn() {
+            window.scrollTo(scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0);
+        }
+
+        function noScroll() {
+            window.removeEventListener('scroll', scrollHandler);
+            window.addEventListener('scroll', noScrollFn);
+        }
+
+        function scrollFn() {
+            window.addEventListener('scroll', scrollHandler);
+        }
+
+        function canScroll() {
+            window.removeEventListener('scroll', noScrollFn);
+            scrollFn();
+        }
+
+        function scrollHandler() {
+            if (!didScroll) {
+                didScroll = true;
+                setTimeout(function() { scrollPage(); }, 60);
+            }
+        };
+
+        function scrollPage() {
+            scrollPosition = { x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop };
+            didScroll = false;
+        };
+
+        scrollFn();
+
+        var el = document.querySelector('.morph-button');
+
+        new UIMorphingButton(el, {
+            closeEl: '.icon-close',
+            onBeforeOpen: function() {
+                // don't allow to scroll
+                noScroll();
+            },
+            onAfterOpen: function() {
+                // can scroll again
+                canScroll();
+                // add class "noscroll" to body
+                classie.addClass(document.body, 'noscroll');
+                // add scroll class to main el
+                classie.addClass(el, 'scroll');
+            },
+            onBeforeClose: function() {
+                // remove class "noscroll" to body
+                classie.removeClass(document.body, 'noscroll');
+                // remove scroll class from main el
+                classie.removeClass(el, 'scroll');
+                // don't allow to scroll
+                noScroll();
+            },
+            onAfterClose: function() {
+                // can scroll again
+                canScroll();
+            }
+        });
+    })();
+    </script>
+    <script type="text/javascript">
+    (function(document, documentElement) {
+        // Enable strict mode
+        "use strict";
+
+        // Form the style on the fly to result in smaller minified file
+        var important = "!important;";
+        var style = "position:absolute" + important + "visibility:hidden" + important + "width:1em" + important + "font-size:1em" + important + "padding:0" + important;
+
+        window.getEmPixels = function(element) {
+
+            var extraBody;
+
+            if (!element) {
+                // Emulate the documentElement to get rem value (documentElement does not work in IE6-7)
+                element = extraBody = document.createElement("body");
+                extraBody.style.cssText = "font-size:1em" + important;
+                documentElement.insertBefore(extraBody, document.body);
+            }
+
+            // Create and style a test element
+            var testElement = document.createElement("i");
+            testElement.style.cssText = style;
+            element.appendChild(testElement);
+
+            // Get the client width of the test element
+            var value = testElement.clientWidth;
+
+            if (extraBody) {
+                // Remove the extra body element
+                documentElement.removeChild(extraBody);
+            } else {
+                // Remove the test element
+                element.removeChild(testElement);
+            }
+
+            // Return the em value in pixels
+            return value;
+        };
+    }(document, document.documentElement));
+
+    var emToPx = getEmPixels();
+
+    if (window.innerWidth < emToPx * 52.5) {
+        var x = document.getElementsByClassName("fs-continue");
+        x[0].innerHTML = '';
+    }
+    </script>
+</body>
+
+</html>
--- a/js/fullscreenForm.js
+++ b/js/fullscreenForm.js
--- a/js/modernizr1.custom.js
+++ b/js/modernizr1.custom.js
--- a/js/uiMorphingButton_fixed.js
+++ b/js/uiMorphingButton_fixed.js
@ -0,0 +1,150 @@
+/**
+ * uiMorphingButton_fixed.js v1.0.0
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Copyright 2014, Codrops
+ * http://www.codrops.com
+ */
+;( function( window ) {
+	
+	'use strict';
+
+	var transEndEventNames = {
+			'WebkitTransition': 'webkitTransitionEnd',
+			'MozTransition': 'transitionend',
+			'OTransition': 'oTransitionEnd',
+			'msTransition': 'MSTransitionEnd',
+			'transition': 'transitionend'
+		},
+		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
+		support = { transitions : Modernizr.csstransitions };
+
+	function extend( a, b ) {
+		for( var key in b ) { 
+			if( b.hasOwnProperty( key ) ) {
+				a[key] = b[key];
+			}
+		}
+		return a;
+	}
+
+	function UIMorphingButton( el, options ) {
+		this.el = el;
+		this.options = extend( {}, this.options );
+		extend( this.options, options );
+		this._init();
+	}
+
+	UIMorphingButton.prototype.options = {
+		closeEl : '',
+		onBeforeOpen : function() { return false; },
+		onAfterOpen : function() { return false; },
+		onBeforeClose : function() { return false; },
+		onAfterClose : function() { return false; }
+	}
+
+	UIMorphingButton.prototype._init = function() {
+		// the button
+		this.button = this.el.querySelector( 'button' );
+		// state
+		this.expanded = false;
+		// content el
+		this.contentEl = this.el.querySelector( '.morph-content' );
+		// init events
+		this._initEvents();
+	}
+
+	UIMorphingButton.prototype._initEvents = function() {
+		var self = this;
+		// open
+		this.button.addEventListener( 'click', function() { self.toggle(); } );
+		// close
+		if( this.options.closeEl !== '' ) {
+			var closeEl = this.el.querySelector( this.options.closeEl );
+			if( closeEl ) {
+				closeEl.addEventListener( 'click', function() { self.toggle(); } );
+			}
+		}
+	}
+
+	UIMorphingButton.prototype.toggle = function() {
+		if( this.isAnimating ) return false;
+
+		// callback
+		if( this.expanded ) {
+			this.options.onBeforeClose();
+		}
+		else {
+			// add class active (solves z-index problem when more than one button is in the page)
+			classie.addClass( this.el, 'active' );
+			this.options.onBeforeOpen();
+		}
+
+		this.isAnimating = true;
+
+		var self = this,
+			onEndTransitionFn = function( ev ) {
+				if( ev.target !== this ) return false;
+
+				if( support.transitions ) {
+					// open: first opacity then width/height/left/top
+					// close: first width/height/left/top then opacity
+					if( self.expanded && ev.propertyName !== 'opacity' || !self.expanded && ev.propertyName !== 'width' && ev.propertyName !== 'height' && ev.propertyName !== 'left' && ev.propertyName !== 'top' ) {
+						return false;
+					}
+					this.removeEventListener( transEndEventName, onEndTransitionFn );
+				}
+				self.isAnimating = false;
+				
+				// callback
+				if( self.expanded ) {
+					// remove class active (after closing)
+					classie.removeClass( self.el, 'active' );
+					self.options.onAfterClose();
+				}
+				else {
+					self.options.onAfterOpen();
+				}
+
+				self.expanded = !self.expanded;
+			};
+
+		if( support.transitions ) {
+			this.contentEl.addEventListener( transEndEventName, onEndTransitionFn );
+		}
+		else {
+			onEndTransitionFn();
+		}
+			
+		// set the left and top values of the contentEl (same like the button)
+		var buttonPos = this.button.getBoundingClientRect();
+		// need to reset
+		classie.addClass( this.contentEl, 'no-transition' );
+		this.contentEl.style.left = 'auto';
+		this.contentEl.style.top = 'auto';
+		
+		// add/remove class "open" to the button wraper
+		setTimeout( function() { 
+			self.contentEl.style.left = buttonPos.left + 'px';
+			self.contentEl.style.top = buttonPos.top + 'px';
+			
+			if( self.expanded ) {
+				classie.removeClass( self.contentEl, 'no-transition' );
+				classie.removeClass( self.el, 'open' );
+			}
+			else {
+				setTimeout( function() { 
+					classie.removeClass( self.contentEl, 'no-transition' );
+					classie.addClass( self.el, 'open' ); 
+				}, 25 );
+			}
+		}, 25 );
+	}
+
+	// add to global namespace
+	window.UIMorphingButton = UIMorphingButton;
+
+})( window );
--- a/js/uiMorphingButton_inflow.js
+++ b/js/uiMorphingButton_inflow.js
@ -0,0 +1,133 @@
+/**
+ * uiMorphingButton_inflow.js v1.0.0
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Copyright 2014, Codrops
+ * http://www.codrops.com
+ */
+;( function( window ) {
+	
+	'use strict';
+
+	var transEndEventNames = {
+			'WebkitTransition': 'webkitTransitionEnd',
+			'MozTransition': 'transitionend',
+			'OTransition': 'oTransitionEnd',
+			'msTransition': 'MSTransitionEnd',
+			'transition': 'transitionend'
+		},
+		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
+		support = { transitions : Modernizr.csstransitions };
+
+	function extend( a, b ) {
+		for( var key in b ) { 
+			if( b.hasOwnProperty( key ) ) {
+				a[key] = b[key];
+			}
+		}
+		return a;
+	}
+
+	function UIMorphingButton( el, options ) {
+		this.el = el;
+		this.options = extend( {}, this.options );
+		extend( this.options, options );
+		this._init();
+	}
+
+	UIMorphingButton.prototype.options = {
+		closeEl : '',
+		onBeforeOpen : function() { return false; },
+		onAfterOpen : function() { return false; },
+		onBeforeClose : function() { return false; },
+		onAfterClose : function() { return false; }
+	}
+
+	UIMorphingButton.prototype._init = function() {
+		// save element height
+		this.elH = this.el.offsetHeight;
+		// the button
+		this.button = this.el.querySelector( 'button' );
+		// state
+		this.expanded = false;
+		// content el
+		this.contentEl = this.el.querySelector( '.morph-content' );
+		// init events
+		this._initEvents();
+	}
+
+	UIMorphingButton.prototype._initEvents = function() {
+		var self = this;
+		// open
+		this.button.addEventListener( 'click', function() { self.toggle(); } );
+		// close
+		if( this.options.closeEl !== '' ) {
+			var closeEl = this.el.querySelector( this.options.closeEl );
+			if( closeEl ) {
+				closeEl.addEventListener( 'click', function() { self.toggle(); } );
+			}
+		}
+	}
+
+	UIMorphingButton.prototype.toggle = function() {
+		if( this.isAnimating ) return false;
+
+		// callback
+		if( this.expanded ) {
+			this.options.onBeforeClose();
+		}
+		else {
+			// add class active (solves z-index problem when more than one button is in the page)
+			classie.addClass( this.el, 'active' );
+			this.options.onBeforeOpen();
+		}
+
+		this.isAnimating = true;
+
+		var self = this,
+			onEndTransitionFn = function( ev ) {
+				if( ev.target !== this ) return false;
+
+				if( support.transitions ) {
+					this.removeEventListener( transEndEventName, onEndTransitionFn );
+				}
+				self.isAnimating = false;
+				
+				// callback
+				if( self.expanded ) {
+					// remove class active (after closing)
+					classie.removeClass( self.el, 'active' );
+					self.options.onAfterClose();
+				}
+				else {
+					self.options.onAfterOpen();
+				}
+
+				self.expanded = !self.expanded;
+			};
+
+		if( support.transitions ) {
+			this.el.addEventListener( transEndEventName, onEndTransitionFn );
+		}
+		else {
+			onEndTransitionFn();
+		}
+		
+		// add/remove class "open" to the button wraper
+		this.el.style.height = this.expanded ? this.elH + 'px' : this.contentEl.offsetHeight + 'px';
+		
+		if( this.expanded ) {
+			classie.removeClass( this.el, 'open' );
+		}
+		else {
+			classie.addClass( this.el, 'open' );
+		}
+	}
+
+	// add to global namespace
+	window.UIMorphingButton = UIMorphingButton;
+
+})( window );
--- a/test-css-priority.html
+++ b/test-css-priority.html
@ -1,11 +0,0 @@
-<html>
-    <head>
-        <title> Testing css priority </title>
-        <link rel="stylesheet" type="text/css" href="css/testcss.css" />
-    </head>
-    <body>
-        <p class="firstcss secondcss">
-            From now on I am not going to be in denial of my feelings.
-        </p>        
-    </body>
-</html>
--- a/test-js.html
+++ b/test-js.html
@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="no-js">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>Fullscreen Form Interface</title>
-		<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
-		<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
-		<meta name="author" content="Codrops" />
-		<link rel="shortcut icon" href="../favicon.ico">
-		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
-		<link rel="stylesheet" type="text/css" href="css/demo.css" />
-		<link rel="stylesheet" type="text/css" href="css/component.css" />
-		<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
-		<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
-		<script src="js/modernizr.custom.js"></script>
-	</head>
-	<body>
-
-        <script src="js/createResult.js"></script>
-        <script src="js/classie.js"></script>
-        <script src="js/classie.js"></script>
-		<script src="js/selectFx.js"></script>
-		<script src="js/fullscreenForm.js"></script>
-		<script>
-			(function() {
-				var formWrap = document.getElementById( 'fs-form-wrap' );
-
-				[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
-					new SelectFx( el, {
-						stickyPlaceholder: false,
-						onChange: function(val){
-							document.querySelector('span.cs-placeholder').style.backgroundColor = val;
-						}
-					});
-				} );
-
-				new FForm( formWrap, {
-					onReview : function() {
-						classie.add( document.body, 'overview' ); // for demo purposes only
-					}
-				} );
-			})();
-		</script>
-	</body>
-</html>
--- a/test.html
+++ b/test.html
@ -1,107 +1,206 @@
 <!DOCTYPE html>
 <html lang="en" class="no-js">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>Fullscreen Form Interface</title>
-		<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
-		<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
-		<meta name="author" content="Codrops" />
-		<link rel="shortcut icon" href="../favicon.ico">
-		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
-		<link rel="stylesheet" type="text/css" href="css/demo.css" />
-		<link rel="stylesheet" type="text/css" href="css/component.css" />
-		<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
-		<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
-		<script src="js/modernizr.custom.js"></script>
-	</head>
-	<body>
-		<div class="container">

-		<!--	<div class="fs-form-wrap" id="fs-form-wrap">
-				<form id="myform" class="fs-form fs-form-full" autocomplete="off">
-					<ol class="fs-fields">
-						<li>
-							<label class="fs-field-label fs-anim-upper" for="q1">Enter FLO data</label>
-							<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="Send 50 rmt#" required/>
-						</li>
-					</ol>
-					<button class="fs-submit" type="submit">Send answers</button>
-				</form>
-			</div>-->
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>FLOdata tester</title>
+    <meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
+    <meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
+    <meta name="author" content="Codrops" />
+    <link rel="shortcut icon" href="../favicon.ico">
+    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
+    <link rel="stylesheet" type="text/css" href="css/demo.css" />
+    <link rel="stylesheet" type="text/css" href="css/component.css" />
+    <link rel="stylesheet" type="text/css" href="css/cs-select.css" />
+    <link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
+    <script src="js/modernizr.custom.js"></script>
+    <!-- Imported from index3.html .. to be integrated later -->
+    <link rel="stylesheet" type="text/css" href="css/normalize1.css" />
+    <link rel="stylesheet" type="text/css" href="css/demo1.css" />
+    <link rel="stylesheet" type="text/css" href="css/component1.css" />
+    <link rel="stylesheet" type="text/css" href="css/content1.css" />
+    <style>
+        .btn {
+          background-color: DodgerBlue;
+          border: none;
+          color: white;
+          padding: 12px 16px;
+          font-size: 16px;
+          cursor: pointer;
+        }

-			<!-- Related demos -->
-		<!--	<div class="related">
-				<p>If you enjoyed this demo you might also like:</p>
-				<a href="http://tympanus.net/Development/MinimalForm/">
-					<img src="img/relatedposts/minimalform1-300x162.png" />
-					<h3>Minimal Form Interface</h3>
-				</a>
-				<a href="http://tympanus.net/Development/ButtonComponentMorph/">
-					<img src="img/relatedposts/MorphingButtons-300x162.png" />
-					<h3>Morphing Buttons Concept</h3>
-				</a>
-			</div>-->
+        /* Darker background on mouse-over */
+        .btn:hover {
+          background-color: RoyalBlue;
+        }
+    </style>
+    <script src="js/modernizr1.custom.js"></script>
+</head>

-			<div id="myform" class="fs-form fs-form-overview fs-show">
-				<ol class="fs-fields">
-					<li>
-						<label class="fs-field-label fs-anim-upper" for="q1">FLO data</label>
-						<input class="fs-anim-lower" id="q1" name="q1" type="text" value="Send 50 rmt# to address$" required/>
-					</li>
-					<li>
-						<label class="fs-field-label fs-anim-upper" for="q2">Type</label>
-						<input class="fs-anim-lower" id="q2" name="q2" type="text" value="Transfer" required/>
-					</li>
-					<li>
-						<label class="fs-field-label fs-anim-upper" for="q3">Identification</label>
-						<input class="fs-anim-lower" id="q3" name="q3" type="text" value="rmt#" required/>
-					</li>
-					<li>
-						<label class="fs-field-label fs-anim-upper" for="q4">Amount</label>
-						<input class="fs-anim-lower" id="q4" name="q4" type="text" value="50000" required/>
-					</li>
-				</ol>
-				<button class="fs-submit" type="submit">Go Back</button>
-			</div>
+<body>
+    <div class="container">
+        <!--This section is all imported from index3.html -->
+        <div class="morph-button morph-button-overlay morph-button-fixed">
+                        <button type="button" class="codrops-icon" href="#"><i class="codrops-icon codrops-icon-info"></i><span>This is a demo for a fullscreen form</span></button>
+                        <div class="morph-content" style="left: 642.5px; top: 391.734px;">
+                            <div>
+                                <div class="content-style-overlay">
+                                    <span class="icon icon-close">Close the overlay</span>
+                                    <h2>What is token tester</h2>
+                                    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
+                                    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
+                                    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
+                                    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
+                                    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
+                                    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div><!-- morph-button -->
+    </div><!-- /container -->
+    <script src="js/classie.js"></script>
+    <script src="js/selectFx.js"></script>
+    <script src="js/fullscreenForm.js"></script>
+    <script>
+    (function() {
+        var formWrap = document.getElementById('fs-form-wrap');

-			<!-- Related demos -->
-		<!--	<div class="related">
-				<p>If you enjoyed this demo you might also like:</p>
-				<a href="http://tympanus.net/Development/MinimalForm/">
-					<img src="img/relatedposts/minimalform1-300x162.png" />
-					<h3>Minimal Form Interface</h3>
-				</a>
-				<a href="http://tympanus.net/Development/ButtonComponentMorph/">
-					<img src="img/relatedposts/MorphingButtons-300x162.png" />
-					<h3>Morphing Buttons Concept</h3>
-				</a>
-			</div>-->
+        [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {
+            new SelectFx(el, {
+                stickyPlaceholder: false,
+                onChange: function(val) {
+                    document.querySelector('span.cs-placeholder').style.backgroundColor = val;
+                }
+            });
+        });

-		</div><!-- /container -->
-		<script src="js/classie.js"></script>
-		<script src="js/selectFx.js"></script>
-		<script src="js/fullscreenForm.js"></script>
-		<script>
-			(function() {
-				var formWrap = document.getElementById( 'fs-form-wrap' );
+        new FForm(formWrap, {
+            onReview: function() {
+                classie.add(document.body, 'overview'); // for demo purposes only
+            }
+        });
+    })();
+    </script>
+    <script src="js/uiMorphingButton_fixed.js"></script>
+    <script>
+    (function() {
+        var docElem = window.document.documentElement,
+            didScroll, scrollPosition;

-				[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
-					new SelectFx( el, {
-						stickyPlaceholder: false,
-						onChange: function(val){
-							document.querySelector('span.cs-placeholder').style.backgroundColor = val;
-						}
-					});
-				} );
+        // trick to prevent scrolling when opening/closing button
+        function noScrollFn() {
+            window.scrollTo(scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0);
+        }

-				new FForm( formWrap, {
-					onReview : function() {
-						classie.add( document.body, 'overview' ); // for demo purposes only
-					}
-				} );
-			})();
-		</script>
-	</body>
-</html>
+        function noScroll() {
+            window.removeEventListener('scroll', scrollHandler);
+            window.addEventListener('scroll', noScrollFn);
+        }
+
+        function scrollFn() {
+            window.addEventListener('scroll', scrollHandler);
+        }
+
+        function canScroll() {
+            window.removeEventListener('scroll', noScrollFn);
+            scrollFn();
+        }
+
+        function scrollHandler() {
+            if (!didScroll) {
+                didScroll = true;
+                setTimeout(function() { scrollPage(); }, 60);
+            }
+        };
+
+        function scrollPage() {
+            scrollPosition = { x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop };
+            didScroll = false;
+        };
+
+        scrollFn();
+
+        var el = document.querySelector('.morph-button');
+
+        new UIMorphingButton(el, {
+            closeEl: '.icon-close',
+            onBeforeOpen: function() {
+                // don't allow to scroll
+                noScroll();
+            },
+            onAfterOpen: function() {
+                // can scroll again
+                canScroll();
+                // add class "noscroll" to body
+                classie.addClass(document.body, 'noscroll');
+                // add scroll class to main el
+                classie.addClass(el, 'scroll');
+            },
+            onBeforeClose: function() {
+                // remove class "noscroll" to body
+                classie.removeClass(document.body, 'noscroll');
+                // remove scroll class from main el
+                classie.removeClass(el, 'scroll');
+                // don't allow to scroll
+                noScroll();
+            },
+            onAfterClose: function() {
+                // can scroll again
+                canScroll();
+            }
+        });
+    })();
+    </script>
+    <script type="text/javascript">
+    (function(document, documentElement) {
+        // Enable strict mode
+        "use strict";
+
+        // Form the style on the fly to result in smaller minified file
+        var important = "!important;";
+        var style = "position:absolute" + important + "visibility:hidden" + important + "width:1em" + important + "font-size:1em" + important + "padding:0" + important;
+
+        window.getEmPixels = function(element) {
+
+            var extraBody;
+
+            if (!element) {
+                // Emulate the documentElement to get rem value (documentElement does not work in IE6-7)
+                element = extraBody = document.createElement("body");
+                extraBody.style.cssText = "font-size:1em" + important;
+                documentElement.insertBefore(extraBody, document.body);
+            }
+
+            // Create and style a test element
+            var testElement = document.createElement("i");
+            testElement.style.cssText = style;
+            element.appendChild(testElement);
+
+            // Get the client width of the test element
+            var value = testElement.clientWidth;
+
+            if (extraBody) {
+                // Remove the extra body element
+                documentElement.removeChild(extraBody);
+            } else {
+                // Remove the test element
+                element.removeChild(testElement);
+            }
+
+            // Return the em value in pixels
+            return value;
+        };
+    }(document, document.documentElement));
+
+    var emToPx = getEmPixels();
+
+    if (window.innerWidth < emToPx * 52.5) {
+        var x = document.getElementsByClassName("fs-continue");
+        x[0].innerHTML = '';
+    }
+    </script>
+</body>
+
+</html>
				`@ -0,0 +1 @@`
				article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}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:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}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;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}