body {
	background: #7BB7FA; 
}
form{
	padding: 50px; 
}
/* Expandable search box */
/* --------------------- */
input.search-text {
	color: #222;
	position:relative;
	z-index:5;
	-webkit-transition: z-index 0 linear 0.5s, width 0.5s, background 0.3s ease, border 0.3s;
	transition: z-index 0 linear 0.5s, width 0.5s, background 0.3s ease, border 0.3s;
	height: 45px;
	width: 0;
	margin: 0;
	padding: 5px 0 5px 40px;
	box-sizing: border-box;
	font-size: 16px;
	font-size: 1rem;
	cursor: pointer;
	border-radius: 30px;
	border: 2px solid transparent;
	/*background: url(search.png) no-repeat left 9px center transparent;*/
	background: url(http://newtab.ir/upload/codepen/expanding-search-box/search.png) no-repeat left 9px center transparent;
}
input.search-text:focus {
	z-index:3; 
	width: 270px;
	border: 2px solid #376200;  
	background-color: #E4FFCE;
	outline: none;
	cursor:auto;
	padding-right: 10px;
}

input.search-text::-webkit-search-cancel-button {
	cursor:pointer;
}

input.search-submit {
	position: relative;
	z-index: 4;
	top:17px;
	left: 49px;
	width: 45px;
	height: 45px;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	border-radius: 30px;
	cursor: pointer; 
	background: none;
}