<div style='display: flex; align-items: center;	justify-content: center; height: 100vh; font-size: 3rem; text-align: center;'>
  <a href="#" id="search-btn"></a>
</div>
<div class="container ">
  <div id="morphsearch" class="morphsearch">
    <form class="morphsearch-form" role="search" method="GET" action="{{ route('search') }}">
      <input class="morphsearch-input" type="text" class="form-control" placeholder="Search" name="q" id="srch-term" />
      <button class="morphsearch-submit" type="submit">Search</button>
    </form>
    <span class="morphsearch-close"></span>
  </div>
  <div class="overlay"></div>
</div>
body {
  background: url(http://thepatternlibrary.com/img/ax.jpg);
  overflow: hidden;
}
.morphsearch {
	width: 200px;
	min-height: 40px;
	background: #000;
	position: absolute;
	z-index: 10000;
	top: 0;
	right: 0;
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
	-webkit-transition-property: min-height, width, center, center;
	transition-property: min-height, width, center, center;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	opacity: 0;
}

.morphsearch.open {
	width: 100%;
	min-height: 100%;
	top: 0px;
	right: 0px;
	opacity: .93;
}

.morphsearch-form {
	width: 100%;
	height: 40px;
	margin: 0 auto;
	position: relative;
	-webkit-transition-property: width, height, -webkit-transform;
	transition-property: width, height, transform;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open .morphsearch-form {
	width: 80%;
	height: 160px;
	-webkit-transform: translate3d(0,3em,0);
	transform: translate3d(0,3em,0);
}

.morphsearch-input {
	width: 100%;
	height: 100%;
	padding: 0 10% 0 10px;
	font-weight: 700;
	border: none;
	background: transparent;
	font-size: 0.8em;
	color: #FFF;
	-webkit-transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morphsearch-input::-ms-clear { /* remove cross in IE */
    display: none;
}

.morphsearch.hideInput .morphsearch-input {
	color: transparent;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.morphsearch.open .morphsearch-input {
	font-size: 7em;
}

/* placeholder */
.morphsearch-input::-webkit-input-placeholder {
	color: #FFF;
}

.morphsearch-input:-moz-placeholder {
	color: #FFF;
}

.morphsearch-input::-moz-placeholder {
	color: #FFF;
}

.morphsearch-input:-ms-input-placeholder {
	color: #FFF;
}

/* hide placeholder when active in Chrome */
.gn-search:focus::-webkit-input-placeholder {
	color: transparent;
}

input[type="search"] { /* reset normalize */
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;	
}

.morphsearch-input:focus,
.morphsearch-submit:focus {
	outline: none;
}

.morphsearch-submit {
	position: absolute;
	width: 80px;
	height: 80px;
	text-indent: 100px;
	overflow: hidden;
	right: 0;
	top: 50%;
	background: transparent url(../img/magnifier.svg) no-repeat center center;
	background-size: 100%;
	border: none;
	pointer-events: none;
	transform-origin: 50% 50%;
	opacity: 0;
	-webkit-transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
	transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
}

.morphsearch.open .morphsearch-submit {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
	transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.morphsearch-close {
	width: 36px;
	height: 36px;
	position: absolute;
	right: 1em;
	top: 1em;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	pointer-events: none;
	opacity: 0;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
}

.morphsearch.open .morphsearch-close {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.morphsearch-close::before,
.morphsearch-close::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	top: 0;
	left: 50%;
	border-radius: 3px;
	opacity: 0.5;
	background: #FFF;
}

.morphsearch-close:hover.morphsearch-close::before,
.morphsearch-close:hover.morphsearch-close::after {
	opacity: .8;
}

.morphsearch-close::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.morphsearch-close::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.morphsearch-content {
	color: #FFF;
	margin-top: 4.5em;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding: 0 10.5%;
	background: #f1f1f1;
	position: absolute;
	pointer-events: none;
	opacity: 0;
}

.morphsearch.open .morphsearch-content {
	opacity: 1;
	height: auto;
	overflow: visible; /* this breaks the transition of the children in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=625289 */
	pointer-events: auto;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.dummy-column {
	width: 30%;
	padding: 0 0 6em;
	float: left;
	opacity: 0;
	-webkit-transform: translate3d(0,100px,0);
	transform: translateY(100px);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.morphsearch.open .dummy-column:first-child {
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.morphsearch.open .dummy-column:nth-child(2) {
	-webkit-transition-delay: 0.45s;
	transition-delay: 0.45s;
}

.morphsearch.open .dummy-column:nth-child(3) {
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.morphsearch.open .dummy-column {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.dummy-column:nth-child(2) {
	margin: 0 5%;
}

.dummy-column h2 {
	font-size: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 800;
	color: #c2c2c2;
	padding: 0.5em 0;
}

.round {
	border-radius: 50%;
}

.dummy-media-object {
	padding: 0.75em;
	display: block;
	margin: 0.3em 0;
	cursor: pointer;
	border-radius: 5px;
	background: rgba(118,117,128,0.05);
}

.dummy-media-object:hover,
.dummy-media-object:focus {
	background: rgba(118,117,128,0.1);
}

.dummy-media-object img {
	display: inline-block;
	width: 50px;	
	margin: 0 10px 0 0;
	vertical-align: middle;
}

.dummy-media-object h3 {
	vertical-align: middle;
	font-size: 0.85em;
	display: inline-block;
	font-weight: 700;
	margin: 0 0 0 0;
	width: calc(100% - 70px);
	color: rgba(145,145,145,0.7);
}

.dummy-media-object:hover h3 {
	color: rgba(236,90,98,1);
}

/* Overlay */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open ~ .overlay {
	opacity: 0;
}

@media screen and (max-width: 53.125em) {
	.morphsearch-input {
		padding: 0 25% 0 10px;
	}
	.morphsearch.open .morphsearch-input {
		font-size: 2em;
	}
	.dummy-column {
		float: none;
		width: auto;
		padding: 0 0 2em;
	}
	.dummy-column:nth-child(2) {
		margin: 0;
	}
	.morphsearch.open .morphsearch-submit {
		-webkit-transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
		transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
	}
}

@media screen and (max-width: 60.625em) {
	.morphsearch {
		width: 80%;
		top: 10%;
		right: 10%;
	}
}
#search-btn {
  background: white url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIGlua3NjYXBlOnZlcnNpb249IjAuOTEgcjEzNzI1IiBzb2RpcG9kaTpkb2NuYW1lPSIzMi5zdmciPgogIDxkZWZzIGlkPSJkZWZzNCI+PC9kZWZzPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcgaWQ9ImJhc2UiIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgYm9yZGVyY29sb3I9IiM2NjY2NjYiIGJvcmRlcm9wYWNpdHk9IjEuMCIgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgaW5rc2NhcGU6em9vbT0iMTEuMzEzNzA5IiBpbmtzY2FwZTpjeD0iLTIuNDk2NTU2OCIgaW5rc2NhcGU6Y3k9IjE4Ljk0OTg0OCIgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9InB4IiBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiIHNob3dncmlkPSJ0cnVlIiB1bml0cz0icHgiIGlua3NjYXBlOnNuYXAtYmJveD0idHJ1ZSIgaW5rc2NhcGU6YmJveC1ub2Rlcz0idHJ1ZSIgaW5rc2NhcGU6YmJveC1wYXRocz0idHJ1ZSIgaW5rc2NhcGU6c25hcC1iYm94LWVkZ2UtbWlkcG9pbnRzPSJ0cnVlIiBpbmtzY2FwZTpzbmFwLWJib3gtbWlkcG9pbnRzPSJ0cnVlIiBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEzNjYiIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjcxNSIgaW5rc2NhcGU6d2luZG93LXg9Ii04IiBpbmtzY2FwZTp3aW5kb3cteT0iLTgiIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiPgogICAgPGlua3NjYXBlOmdyaWQgdHlwZT0ieHlncmlkIiBpZD0iZ3JpZDMzNjYiPjwvaW5rc2NhcGU6Z3JpZD4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICAKICA8ZyBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTAyMC4zNjIyKSIgc3R5bGU9ImZpbGw6IHJnYig3MywgNzMsIDczKTsiPgogICAgPHBhdGggc3R5bGU9ImNvbG9yOiByZ2IoMCwgMCwgMCk7IGZvbnQtc3R5bGU6IG5vcm1hbDsgZm9udC12YXJpYW50LWxpZ2F0dXJlczogbm9ybWFsOyBmb250LXZhcmlhbnQtY2Fwczogbm9ybWFsOyBmb250LXdlaWdodDogbm9ybWFsOyBmb250LXN0cmV0Y2g6IG5vcm1hbDsgZm9udC1zaXplOiBtZWRpdW07IGxpbmUtaGVpZ2h0OiBub3JtYWw7IGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmOyB0ZXh0LWluZGVudDogMHB4OyB0ZXh0LWFsaWduOiBzdGFydDsgdGV4dC1kZWNvcmF0aW9uOiBub25lIHNvbGlkIHJnYigwLCAwLCAwKTsgbGV0dGVyLXNwYWNpbmc6IG5vcm1hbDsgd29yZC1zcGFjaW5nOiBub3JtYWw7IHRleHQtdHJhbnNmb3JtOiBub25lOyBkaXJlY3Rpb246IGx0cjsgd3JpdGluZy1tb2RlOiBsci10YjsgYmFzZWxpbmUtc2hpZnQ6IGJhc2VsaW5lOyB0ZXh0LWFuY2hvcjogc3RhcnQ7IHdoaXRlLXNwYWNlOiBub3JtYWw7IGNsaXAtcnVsZTogbm9uemVybzsgZGlzcGxheTogaW5saW5lOyBvdmVyZmxvdzogdmlzaWJsZTsgdmlzaWJpbGl0eTogdmlzaWJsZTsgb3BhY2l0eTogMTsgaXNvbGF0aW9uOiBhdXRvOyBtaXgtYmxlbmQtbW9kZTogbm9ybWFsOyBjb2xvci1pbnRlcnBvbGF0aW9uOiBzUkdCOyBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6IGxpbmVhclJHQjsgZmlsbDogcmdiKDczLCA3MywgNzMpOyBmaWxsLW9wYWNpdHk6IDE7IGZpbGwtcnVsZTogbm9uemVybzsgc3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogNDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IHN0cm9rZS1vcGFjaXR5OiAxOyBjb2xvci1yZW5kZXJpbmc6IGF1dG87IGltYWdlLXJlbmRlcmluZzogYXV0bzsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyB0ZXh0LXJlbmRlcmluZzogYXV0bzsiIGQ9Ik0gOCAyIEMgNi45MDA2NDI1IDIgNiAyLjkwMDcgNiA0IEwgNiAyOS4wMTU2MjUgQyA2IDMwLjExNTAyNSA2LjkwMDY0MjUgMzEuMDE1NjI1IDggMzEuMDE1NjI1IEwgMjIgMzEuMDE1NjI1IEMgMjMuMDk5MzU3IDMxLjAxNTYyNSAyNCAzMC4xMTUwMjUgMjQgMjkuMDE1NjI1IEwgMjQgMjIuODI4MTI1IEMgMjQuNDQxNzU4IDIyLjc1NTg5MyAyNC44Nzk4MSAyMi42NDQ3ODQgMjUuMzEwNTQ3IDIyLjQ5MDIzNCBMIDI5LjIxMjg5MSAyOS4yNSBDIDI5LjYyNDA0NSAyOS45NjIyIDMwLjU0OTUyNyAzMC4yMDk5MjggMzEuMjYxNzE5IDI5Ljc5ODgyOCBDIDMxLjk3MzkxMSAyOS4zODc2MjggMzIuMjIxNzMxIDI4LjQ2MjIgMzEuODEwNTQ3IDI3Ljc1IEwgMjcuODkwNjI1IDIwLjk1ODk4NCBBIDAuNTAwMDUgMC41MDAwNSAwIDAgMCAyNy44NzUgMjAuOTMzNTk0IEMgMzAuMzg1MDQ4IDE4LjYwNzM3OCAzMS4wNTkwMzcgMTQuNzczNTQ4IDI5LjI3NzM0NCAxMS42ODc1IEMgMjguMTExMDgxIDkuNjY3NTMzIDI2LjEzODc0MSA4LjQwNzMxNTMgMjQgOC4wNTI3MzQ0IEwgMjQgNCBDIDI0IDIuOTAwNyAyMy4wOTkzNTcgMiAyMiAyIEwgOCAyIHogTSA4IDMgTCAyMiAzIEMgMjIuNTYyNjYxIDMgMjMgMy40Mzc0IDIzIDQgTCAyMyA3Ljk1NTA3ODEgQyAyMi44NTk5ODIgNy45NTA4MzQ1IDIyLjcyMDUxMiA3LjkzNTgwNSAyMi41ODAwNzggNy45Mzk0NTMxIEMgMjIuMDUyMTE5IDcuOTUyOTg1OCAyMS41MjI3ODMgOC4wMzE5NDM5IDIxIDguMTYwMTU2MiBMIDIxIDUuNSBBIDAuNTAwMDUgMC41MDAwNSAwIDAgMCAyMC41IDUgTCA5LjUgNSBBIDAuNTAwMDUgMC41MDAwNSAwIDAgMCA5IDUuNSBMIDkgMjMuNSBBIDAuNTAwMDUgMC41MDAwNSAwIDAgMCA5LjUgMjQgTCAyMC41IDI0IEEgMC41MDAwNSAwLjUwMDA1IDAgMCAwIDIxIDIzLjUgTCAyMSAyMi43MTI4OTEgQyAyMS42NTE3MDEgMjIuODcyNTU5IDIyLjMyNDA3MyAyMi45NTAxODggMjMgMjIuOTMxNjQxIEwgMjMgMjkuMDE1NjI1IEMgMjMgMjkuNTc4MzI1IDIyLjU2MjY2MSAzMC4wMTU2MjUgMjIgMzAuMDE1NjI1IEwgOCAzMC4wMTU2MjUgQyA3LjQzNzMzOTUgMzAuMDE1NjI1IDcgMjkuNTc4MzI1IDcgMjkuMDE1NjI1IEwgNyA0IEMgNyAzLjQzNzQgNy40MzczMzk1IDMgOCAzIHogTSAxMCA2IEwgMjAgNiBMIDIwIDguNDc4NTE1NiBDIDE5LjY3MTM4NyA4LjYxMDMyNzYgMTkuMzQ2MzE2IDguNzYxNDI4NSAxOS4wMzEyNSA4Ljk0MzM1OTQgQyAxNS40NDk2NTIgMTEuMDExMjU5IDE0LjIxNzMwNCAxNS42MDU5IDE2LjI4NTE1NiAxOS4xODc1IEMgMTcuMTU5NzIxIDIwLjcwMjI5IDE4LjQ4ODg1NyAyMS43OTAxNyAyMCAyMi4zOTI1NzggTCAyMCAyMyBMIDEwIDIzIEwgMTAgNiB6IE0gMTEgOCBMIDExIDkgTCAxOCA5IEwgMTggOCBMIDExIDggeiBNIDIyLjYwNzQyMiA4LjkzNzUgQyAyNC45MTE0NjIgOC44Nzc1IDI3LjE3NDMyMyAxMC4wNDcgMjguNDEwMTU2IDEyLjE4NzUgQyAzMC4yMDc2NTIgMTUuMzAwOSAyOS4xNDQ2MzIgMTkuMjcwODU5IDI2LjAzMTI1IDIxLjA2ODM1OSBDIDIyLjkxNzg5OCAyMi44NjU4NTkgMTguOTQ5ODUzIDIxLjgwMDkgMTcuMTUyMzQ0IDE4LjY4NzUgQyAxNS4zNTQ4NDggMTUuNTc0MiAxNi40MTc4NjggMTEuNjA2MTk0IDE5LjUzMTI1IDkuODA4NTkzOCBDIDIwLjUwNDM0NyA5LjI0Njc5MzggMjEuNTYwNDc5IDguOTY0NCAyMi42MDc0MjIgOC45Mzc1IHogTSAxMSAxMC4wMzEyNSBMIDExIDExLjAzMTI1IEwgMTYgMTEuMDMxMjUgTCAxNiAxMC4wMzEyNSBMIDExIDEwLjAzMTI1IHogTSAyMi44ODQ3NjYgMTAuNDM1NTQ3IEMgMjIuNjQzMDUxIDEwLjQyOTk4NyAyMi40MDAwNTUgMTAuNDQyNzMxIDIyLjE1ODIwMyAxMC40NzI2NTYgTCAyMi4xNTYyNSAxMC40NzI2NTYgQyAyMS40OTc5MyAxMC41NTQ2NTYgMjAuODY2MDIzIDEwLjc5MzI1OSAyMC4yODEyNSAxMS4xMzA4NTkgQyAxNy44OTc5MzkgMTIuNTA2ODU5IDE3LjA2NDAyOSAxNS41NTE4IDE4LjQ0MTQwNiAxNy45Mzc1IEMgMTkuODE5MjIyIDIwLjMyNCAyMi44OTM3NDEgMjEuMTU1NzQ0IDI1LjI4MTI1IDE5Ljc3NzM0NCBDIDI3LjY2NzY4MiAxOC4zOTk0NDQgMjguNDk5NTE3IDE1LjMyNTEgMjcuMTIxMDk0IDEyLjkzNzUgQyAyNi4yMTYzOTEgMTEuMzcwNDYzIDI0LjU3Njc2NiAxMC40NzQ0NjQgMjIuODg0NzY2IDEwLjQzNTU0NyB6IE0gMjIuODYxMzI4IDExLjQzNzUgQyAyMi45MDc3ODcgMTEuNDM4NTM2IDIyLjk1MzY1MiAxMS40NDY1NzYgMjMgMTEuNDQ5MjE5IEwgMjMgMTkuNDIzODI4IEMgMjIuMzA3NTIyIDE5LjQ2MDU2IDIxLjYxNzgyNSAxOS4zMzAzMzEgMjEgMTkuMDIzNDM4IEwgMjEgMTEuODk0NTMxIEMgMjEuNDIyMzE5IDExLjY3ODAwNCAyMS44NTE2NzIgMTEuNTE5Nzk5IDIyLjI3OTI5NyAxMS40NjY3OTcgQSAwLjUwMDA0OTk3IDAuNTAwMDQ5OTcgMCAwIDAgMjIuMjgxMjUgMTEuNDY2Nzk3IEMgMjIuNDc0MzI0IDExLjQ0MjgzNCAyMi42NjgxNzEgMTEuNDMzMTkyIDIyLjg2MTMyOCAxMS40Mzc1IHogTSAyNCAxMS42MjY5NTMgQyAyNC45MTc2NiAxMS45MTkzMDEgMjUuNzM1ODg1IDEyLjU0MDI1MiAyNi4yNTM5MDYgMTMuNDM3NSBDIDI3LjM2MDM0OSAxNS4zNTQgMjYuNjk4NzMyIDE3LjgwNTAwOSAyNC43ODEyNSAxOC45MTIxMDkgQyAyNC41Mjg4NjcgMTkuMDU3ODE4IDI0LjI2NjU4MiAxOS4xNjg0MTMgMjQgMTkuMjUzOTA2IEwgMjQgMTEuNjI2OTUzIHogTSAxMSAxMi4wMTU2MjUgTCAxMSAxMy4wMTU2MjUgTCAxNSAxMy4wMTU2MjUgTCAxNSAxMi4wMTU2MjUgTCAxMSAxMi4wMTU2MjUgeiBNIDIwIDEyLjU5OTYwOSBMIDIwIDE4LjI5Njg3NSBDIDE5LjczOTg1IDE4LjA0Mzk2IDE5LjQ5ODkyNiAxNy43NjcxNzEgMTkuMzA4NTk0IDE3LjQzNzUgQyAxOC4zNzA5ODUgMTUuODEzNTM4IDE4LjcxMTYxMyAxMy44NDE1NzMgMjAgMTIuNTk5NjA5IHogTSAxMSAxNC4wNDY4NzUgTCAxMSAxNS4wNDY4NzUgTCAxMyAxNS4wNDY4NzUgTCAxMyAxNC4wNDY4NzUgTCAxMSAxNC4wNDY4NzUgeiBNIDExIDE2LjAxNTYyNSBMIDExIDE3LjAxNTYyNSBMIDE0IDE3LjAxNTYyNSBMIDE0IDE2LjAxNTYyNSBMIDExIDE2LjAxNTYyNSB6IE0gMjcuMDg3ODkxIDIxLjU3MjI2NiBMIDMwLjk0NTMxMiAyOC4yNSBDIDMxLjA4ODEzNCAyOC40OTc0IDMxLjAwOTA4MiAyOC43OTA3OTQgMzAuNzYxNzE5IDI4LjkzMzU5NCBDIDMwLjUxNDM1NSAyOS4wNzYzOTQgMzAuMjIyOTI4IDI4Ljk5NzYgMzAuMDgwMDc4IDI4Ljc1IEwgMjYuMjMyNDIyIDIyLjA4NTkzOCBDIDI2LjMzMTk5OSAyMi4wMzQyMTggMjYuNDMzMTIzIDIxLjk5MDI0OCAyNi41MzEyNSAyMS45MzM1OTQgQyAyNi43MjQ2MzEgMjEuODIxOTQ3IDI2LjkwODM1NiAyMS42OTgwOTkgMjcuMDg3ODkxIDIxLjU3MjI2NiB6IE0gMTUgMjUgQyAxMy45MDEzNTMgMjUgMTMgMjUuOTAxNCAxMyAyNyBDIDEzIDI4LjA5ODcgMTMuOTAxMzUzIDI5IDE1IDI5IEMgMTYuMDk4NjQ3IDI5IDE3IDI4LjA5ODcgMTcgMjcgQyAxNyAyNS45MDE0IDE2LjA5ODY0NyAyNSAxNSAyNSB6IE0gMTUgMjYgQyAxNS41NTgyMDcgMjYgMTYgMjYuNDQxOCAxNiAyNyBDIDE2IDI3LjU1ODIgMTUuNTU4MjA3IDI4IDE1IDI4IEMgMTQuNDQxNzkzIDI4IDE0IDI3LjU1ODIgMTQgMjcgQyAxNCAyNi40NDE4IDE0LjQ0MTc5MyAyNiAxNSAyNiB6ICIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwxMDIwLjM2MjIpIiBpZD0icmVjdDQ0MjkiPjwvcGF0aD4KICA8L2c+CgoJCgkKCTxtZXRhZGF0YT4KCQk8cmRmOnJkZiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnJkZnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvMDEvcmRmLXNjaGVtYSMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CgkJCTxyZGY6ZGVzY3JpcHRpb24gYWJvdXQ9Imh0dHBzOi8vaWNvbnNjb3V0LmNvbS9sZWdhbCNsaWNlbnNlcyIgZGM6dGl0bGU9Ik1vYmlsZSwgUGhvbmUsIERldmljZSwgU2VvLCBUb29sLCBPcHRpbWl6YXRpb24sIFNlYXJjaCIgZGM6ZGVzY3JpcHRpb249Ik1vYmlsZSwgUGhvbmUsIERldmljZSwgU2VvLCBUb29sLCBPcHRpbWl6YXRpb24sIFNlYXJjaCIgZGM6cHVibGlzaGVyPSJJY29uc2NvdXQiIGRjOmRhdGU9IjIwMTYtMTItMTQiIGRjOmZvcm1hdD0iaW1hZ2Uvc3ZnK3htbCIgZGM6bGFuZ3VhZ2U9ImVuIj4KCQkJCTxkYzpjcmVhdG9yPgoJCQkJCTxyZGY6YmFnPgoJCQkJCQk8cmRmOmxpPkplbWlzIE1hbGk8L3JkZjpsaT4KCQkJCQk8L3JkZjpiYWc+CgkJCQk8L2RjOmNyZWF0b3I+CgkJCTwvcmRmOmRlc2NyaXB0aW9uPgoJCTwvcmRmOnJkZj4KICAgIDwvbWV0YWRhdGE+PC9zdmc+) no-repeat center;
  width: 50px;
  height: 50px;
  padding: 50px;
  border-radius:100px;
  box-shadow: 0 10px 150px rgba(0,0,0,.5);
}
/*!
 * classie - class helper functions
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

(function() {
          var morphSearch = document.getElementById( 'morphsearch' ),
          input = morphSearch.querySelector( 'input.morphsearch-input' ),
          ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' ),
          searchBtn = document.getElementById( 'search-btn' ),
          isOpen = isAnimating = false,
          // show/hide search area
          toggleSearch = function(evt) {
            // return if open and the input gets focused
            if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;

            var offsets = morphsearch.getBoundingClientRect();
            if( isOpen ) {
              classie.remove( morphSearch, 'open' );

              // trick to hide input text once the search overlay closes 
              // todo: hardcoded times, should be done after transition ends
              if( input.value !== '' ) {
                setTimeout(function() {
                  classie.add( morphSearch, 'hideInput' );
                  setTimeout(function() {
                    classie.remove( morphSearch, 'hideInput' );
                    input.value = '';
                  }, 300 );
                }, 500);
              }
              
              input.blur();
            }
            else {
              classie.add( morphSearch, 'open' );
              history.pushState("", document.title, window.location.pathname);
            }
            isOpen = !isOpen;
          };

        // events
        input.addEventListener( 'focus', toggleSearch );
        ctrlClose.addEventListener( 'click', toggleSearch );
        searchBtn.addEventListener( 'focus', function(){ input.focus(); return false; } );

        // esc key closes search overlay, keyboard navigation events
        document.addEventListener( 'keydown', function( ev ) {
          var keyCode = ev.keyCode || ev.which;
          if( keyCode === 27 && isOpen ) {
            toggleSearch(ev);
          }
        } );
        /*for demo purposes only: don't allow to submit the form*/
        //morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
      })();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js