.search { 
  position: relative; 
  margin: 0 auto ;
  text-align: center;
}
.search input { 
  text-indent: 30px;
   font-family:  FontAwesome, sans-serif;
}
.search .fa-search { 
  position: absolute;
  top: 28px;
  left: 65%;
  font-size: 15px;
}

input {
    width: 450px;
    padding: 5px;
    margin: 15px;
    height: 25px;
  outline:none
}

.wrapper{
   position: relative;
  left: 32%;
}
.search-circle { 
  border: 4px inside #080;
  border-color:#439bc6;
  width: 50px;
  height: 50px;
  border-radius:50%; 
  background: #ddd;
  box-shadow:3px 2px 2px  rgba(21, 153, 219, .5);
  transition: all 1s ease;
	float:left
}

.search-circle:hover,
.search-circle:focus {
  width: 33%;
  border-radius:3%;
}
.search-bar {
  position: relative;
  float:left;
  border-left:3px solid #000;
	border-right:2px solid #ddd;
  height:35px;
  background:#ddd;
  left: -.5%;
  top: 70px;
  transform: rotate(-45deg);
	box-shadow: 0 1px 2px 1px rgba(239, 33, 85, .5);
}
placeholder{
    color: red;
}