html,body {
	padding:0;
	margin:0;
	color:#292929;
	background-color:#eaeaea;
}
.container {
	text-align:center;
	color:#2c3e50;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
form {
	transition:all 0.5s;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
.finder {
	border:1px solid #fff;
	background-color:#f6f5f0;
	border-radius:15px;
	padding:8px;
	box-shadow:9px 9px 16px rgba(189,189,189,0.6),-9px -9px 16px rgba(255,255,255,0.5);
}
.finder__outer {
	display:flex;
	width:600px;
	padding:1.5rem 2rem;
	border-radius:10px;
	box-shadow:inset 10px 10px 15px -10px #c3c3c3,inset -10px -10px 15px -10px #ffffff;
}
.finder__inner {
	display:flex;
	align-items:center;
	position:relative;
	flex:1;
}
.finder__form {
	flex:1;
	height:calc(100% + 3rem);
}
.finder__input {
	height:calc(100% + 3rem);
	border:none;
	background-color:transparent;
	outline:none;
	font-size:1.5rem;
	letter-spacing:0.75px;
}
.finder__icon {
	width:40px;
	height:40px;
	margin-right:1rem;
	transition:all 0.2s;
	box-shadow:inset 0 0 0 20px #292929;
	border-radius:50%;
	position:relative;
}
.finder__icon:after,.finder__icon:before {
	display:block;
	content:"";
	position:absolute;
	transition:all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.finder__icon:after {
	width:10px;
	height:10px;
	background-color:#292929;
	border:3px solid #f6f5f0;
	top:50%;
	position:absolute;
	transform:translateY(-50%);
	left:0px;
	right:0;
	margin:auto;
	border-radius:50%;
}
.active .finder__icon:after {
	border-width:10px;
	background-color:#f6f5f0;
}
.finder__icon:before {
	width:4px;
	height:13px;
	background-color:#f6f5f0;
	top:50%;
	left:20px;
	transform:rotateZ(45deg) translate(-50%,0);
	transform-origin:0 0;
	border-radius:4px;
}
.processing .finder__icon {
	transform-origin:50%;
	animation:spinner 0.3s linear infinite;
	animation-delay:0.5s;
}
.active .finder__icon {
	transform:translateY(-5px);
}
@keyframes spinner {
	0% {
	transform:rotateZ(45deg);
}
100% {
	transform:rotateZ(405deg);
}
}