.serach-h{position: relative; transform:translate(20%, -12%);}
.search-form input::placeholder {color:#CBCBCB; font-size:14px;}
.header-search-wrapper{background:#fff;  padding:6px; border:2px solid #EF0049; border-radius:5px;}
.sticky .header-search-wrapper{margin-right:1px;}
.serach-h ::placeholder {color:#666666; font-size:14px;}
.search-icon {
  width:24px;
  height:24px;
  position: relative;
  cursor: pointer;
  margin:auto;
}
.header-search-wrapper .search-form-main::before {content: "";position: absolute;width: 184%;top: 0px;left: -40%;background: #EF0049;height: 77px;border-top: 2px solid #e7e7e7;}
.search-line {
  width:12px;
  height: 2px;
  background:#EF0049;
  display: inline-block;
  transform: rotate(45deg);
  position: absolute;
  top:18px;
  left:14px;
  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 #EF0049;
  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: #EF0049;
}

.active .second-line {
  transform: rotate(135deg);
}

.active .search-circle.third {
  width:25px;
  height: 2px;
  top:12px;
  left: 0;
  transform: rotate(135deg);
  background-color:#EF0049;
  border-radius: 0;
}
.search-main {
	display: block;
	cursor: pointer;color:#fff;
}
.header-search-wrapper .search-form-main {
	position: absolute;
    background: #ffffff;
    /*box-shadow: 1px 1px 7px rgba(0,0,0,.15);*/  
    padding:14px 10px;border-radius:5px;
    font-size:15px; 
    margin-left: auto;
    margin-right: auto;
    width:1150px;
    z-index:666;
	top:165%;
    opacity: 0;
    visibility: hidden;
	justify-content: center;
	right:-273px;
}
.search-form:before{
position: absolute;
  content: "";
  width:25px;
  height:25px;
  background: url(search-icon.png) no-repeat;
  background-size:80%;
  background-position: bottom left;
  z-index:1;
  bottom:-34px;
  left:10px;
}

@media (min-width: 64rem){.header-search-wrapper .search-form-main {width:1200px !important; }
.sticky .header-search-wrapper .search-form-main {right:-290px !important;}
}

@media (min-width:90rem){.header-search-wrapper .search-form-main {width:1380px !important;}

.sticky .header-search-wrapper .search-form-main {right:-280px !important;}
}


.sticky .header-search-wrapper .search-form-main {top:170%;}

.search-form-main.active-search {
    opacity: 1;
    visibility: visible; 
}

.search-form{position:relative;}
.search-submit-now{
position:absolute;
right:4px;
top:4px;
  background: #EF0049;
  color: #ffffff;
  border: 2px solid #EF0049;
  margin:0px;
  font-size:16px;
  border-radius: 6px;
  padding:6px 10px;
  width:120px;
}

/*.header-search-wrapper .search-form-main {
    border-top-color: #EF0049;
}*/


.header-search-wrapper .search-form-main .search-field {
    border-radius:6px;
    padding:12px 10px 12px 45px;
    width:100%; border:1px solid #EF0049;
    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: #ef0049;
}

@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;}
}