@import "//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css";

.search{
position: relative;
    display: inline-block;
    left: 252px;
    top: -34px;
}
[class^="icon-"]{

  color:#696969;
  border-radius:5px;
  display:inline-block;
  padding:6px 7px 7px;
  font-size:16px;
  
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  cursor: pointer;
  z-index:10;
  position:relative;
}
[class^="icon-"]:hover{
  background: #1197D6 ;
  text-shadow:0px 0px 0px #21638F;
  box-shadow: inset 0px 0px 8px #21638F;
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
}
.search_form{
  background: #5dade2;
  position:absolute;
  z-index:0;
  padding:0px 5px;
  left:0;
  top:15px;
  overflow: hidden;

  width: 20px;
  height:0px;
  transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
  -webkit-transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
}
.search_form form{
  opacity:0;
   transition:all 0.3s ease-out;
  -webkit-transition:all 0.3s ease-out;
}
.search_form input{
  background:#fff;
  border:none;
}
.search_form input[type='text']{
     width: 340px;
    margin: 0px 1px 0px 0;
    padding: 13px 6px 13px;
    min-height: 28px;
    font-size: 16px;
    color: #000;;
}
.search_form input[type='submit']{
border-radius: 0 3px 3px 0;
    font-size: 13px;
    padding: 0px 7px;
    min-height: 28px;
    margin: 0px 0px 0px 0;
    cursor: pointer;
}
.search_box{
  visibility: hidden;
}
.search_box:checked~.search_form{
  width: 350px;
  height:55px;
  padding:5px;
  top:35px;
  transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
  -webkit-transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
}
.search_box:checked~.search_form form{
  opacity:1;
  transition:0.3s all ease-out 0.5s;
  -webkit-transition:0.3s all ease-out 0.5s;
}