.morphsearch {
	width: 100%;	  
	position: absolute;
	z-index: 11;
	top: 0; 
	left: 0; 
	opacity: 0;
	visibility: hidden;
}

.morphsearch:before{
	content: "";
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	background-color: #fafafa;
}

.morphsearch.open {
	opacity: 1;
	visibility: visible;	
}

.morphsearch-content{
	position: relative;
	z-index: 2;
	padding: 100px 0;
} 

.morphsearch-content .container{ 
	opacity: 0;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
} 

.morphsearch.open .morphsearch-content .container{
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

form.morphsearch-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.morphsearch form{
	margin-bottom: 50px;
}

.morphsearch input[type="search"]{ 
	border: 0;
	padding: 0;
	font-size: 3em;
	background-color: transparent;
	font-weight: 500;
}

.home .morphsearch input[type="search"]{
	border: 0;
}


.morphsearch-submit[type="submit"] {	  
	border: none; 
	border: 0;
	padding: 0;
	background-color: transparent;
	width: initial;
	font-size: 70px;
}
 
.morphsearch-close {
	width: 50px;
	height: 50px;
	position: absolute;
	right: 25px;
	top: -50px;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	pointer-events: none; 
	opacity: 0;
	-webkit-transform: translate3d(0,-50px,0);
	transform: translate3d(0,-50px,0);
}

.morphsearch.open .morphsearch-close {
	opacity: 1;
	pointer-events: auto; 
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
	transition: opacity 0.4s, transform 0.4s;
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

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

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

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

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