.serach-h{position: relative; transform:translate(20%, -12%);}
.header-search-wrapper{background:#ffffff;  padding:6px;}
.sticky .header-search-wrapper{margin-right:14px;}
.serach-h ::placeholder {color:#666666; font-size:14px;}
.search-icon {
  width:24px;
  height:24px;
  position: relative;
  cursor: pointer;
  margin:auto;
}

.search-line {
  width: 10px;
  height: 2px;
  background:#2278b5;
  display: inline-block;
  transform: rotate(45deg);
  position: absolute;
  top:19px;
  left:16px;
  transition: all 0.3s ease-in 0s;
}

.active .search-line {
  width:25px;
  left: 0;
  top:12px;
  transition: all 0.3s ease-out 0s;
}

.search-circle {
  width:20px;
  height:20px;
  border: 2px solid #2278b5;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transition: top 0.3s ease-in 0s, left 0.3s ease-in 0s, border-radius 0.3s ease-in 0s, border-width 0.3s ease-in 0s, width 0.3s ease-in 0s, height 0.3s ease-in 0s, background-color 0.1s ease-in 0s;
}

.active .search-circle {
  width: 0;
  height: 0;
  border-width: 0;
  top: 12px;
  left: 12px;
  transition: top 0.3s ease-in 0s, left 0.3s ease-in 0s, border-radius 0s ease-in 0.3s, border-width 0.3s ease-in 0s, width 0.3s ease-in 0s, height 0.3s ease-in 0s, background-color 0s ease-in 0.3s;
}

.active .search-circle.second {
  width:25px;
  height: 2px;
  top:12px;
  left: 0;
  transform: rotate(45deg);
  background-color: #2278b5;
}

.active .second-line {
  transform: rotate(135deg);
}

.active .search-circle.third {
  width:25px;
  height: 2px;
  top:12px;
  left: 0;
  transform: rotate(135deg);
  background-color: #2278b5;
  border-radius: 0;
}



.search-main {
	display: block;
	cursor: pointer;color:#2278b5;
}
.header-search-wrapper .search-form-main {
    background: #fff none repeat scroll 0 0;
    -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,.15);
    box-shadow: 1px 1px 7px rgba(0,0,0,.15);
    border-top: 2px solid #408c40;
    padding:10px;
    position: absolute;
    right:-5px;
    top: 144%;
    width:450px;
    z-index:999;
    opacity: 0;
    visibility: hidden;
}
.search-form-main.active-search {
    opacity: 1;
    visibility: visible;
}
.header-search-wrapper .search-form-main {
    border-top-color: #253b80;
}
.header-search-wrapper .search-form-main:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #408c40;
    content: "";
    position: absolute;
    right:14px;
    top: -10px;
}
.header-search-wrapper .search-form-main:before {
    border-bottom-color: #253b80;
}
.header-search-wrapper .search-form-main .search-field {
    border-radius: 0;
    padding: 4px 10px;
    width:100%;border: 1px solid #9ac3e0;
    float: left;
}
.header-search-wrapper .search-form-main .search-submit {
    border: medium none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    float:right;
    padding: 10px 0 10px;
    width: 25%;
    height: 36px;
    background: #253b80;
}

@media screen and (max-width:880px) {
.sticky .header-search-wrapper{margin-right:0px;}
.header-search-wrapper .search-form-main {right:-95px;}
.header-search-wrapper .search-form-main::before {right: 98px;}
.header-search-wrapper .search-form-main {width: 350px;}
}