#search3 { }

#search3 .search-box {
	 transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
	 width: 40px;
	 height: 40px;
	 border-radius: 20px;
	 border: none;
	 cursor: pointer;
	 background: #ebebeb;
	margin-right:-5rem; 
}
#search3 label { width:1px; }

#search3 .search-box + label .search-icon {
	 color: black; font-size:110%;
}
#search3 .search-box:hover {
	 color: white;
	 background: #c8c8c8;
	 box-shadow: 0 0 0 5px #3d4752;
}
#search3 .search-box:hover + label .search-icon {
	 color: white; 
}
#search3 .search-box:focus {
	 transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
	 border: none;
	 outline: none;
	 box-shadow: none;
	 padding-left: 15px;
	 cursor: text;
	 width: 300px;
	 border-radius: auto;
	 background: #ebebeb;
	 color: black;
}
#search3 .search-box:focus + label .search-icon {
	 color: black;
}
#search3 .search-box:not(:focus) {
	 text-indent: -5000px; margin-right:-4.9rem;
}
#search3 #search-submit {
	 position: relative;
	 left: -5000px;
}
#search3 .search-icon {
	 position: relative;
	 left: 2.8rem;
	 color: white;
	 cursor: pointer;
}