/* .search-form{
   display: flex;
   flex-wrap: wrap;
}
.field {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.search-form input {
  width: 300px;
  height: 34px;
  font-size: 16px;
  border: 1px solid#3eb5f1;
  background: #e7e7e7;
  border-radius: 3px;
}

button.search {
  background-color: #e7e7e7;
  color: black;
  border: 1px solid #3eb5f1;
  border-radius: 3px;
  padding: 5px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: AdobeCleanLight;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
}

button.search:hover {
  background-color: #3eb5f1;
  color: white;
} */

//альтернативный поиск
.search-holder {
  position: relative;
  min-height: 40px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .search-holder .circle {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 32px;
  background-color: #2badd8;
  clip-path: circle(15px at 50% 50%);
  transition: clip-path 0.4s ease-in;
  -webkit-transition: clip-path 0.4s ease-in;
  z-index: 2;
} */

.search-holder.active .circle {
  clip-path: circle(100% at 50% 50%);
  transition: clip-path 0.4s ease-in;
  -webkit-transition: clip-path 0.4s ease-in;
}

.search-button {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.28);
  width: 30px;
  height: 30px;
  background-color: #2badd8;
  border-radius: 50%;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2Ljk2NiA1Ni45NjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU2Ljk2NiA1Ni45NjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTI4cHgiIGhlaWdodD0iMTI4cHgiPgo8cGF0aCBkPSJNNTUuMTQ2LDUxLjg4N0w0MS41ODgsMzcuNzg2YzMuNDg2LTQuMTQ0LDUuMzk2LTkuMzU4LDUuMzk2LTE0Ljc4NmMwLTEyLjY4Mi0xMC4zMTgtMjMtMjMtMjNzLTIzLDEwLjMxOC0yMywyMyAgczEwLjMxOCwyMywyMywyM2M0Ljc2MSwwLDkuMjk4LTEuNDM2LDEzLjE3Ny00LjE2MmwxMy42NjEsMTQuMjA4YzAuNTcxLDAuNTkzLDEuMzM5LDAuOTIsMi4xNjIsMC45MiAgYzAuNzc5LDAsMS41MTgtMC4yOTcsMi4wNzktMC44MzdDNTYuMjU1LDU0Ljk4Miw1Ni4yOTMsNTMuMDgsNTUuMTQ2LDUxLjg4N3ogTTIzLjk4NCw2YzkuMzc0LDAsMTcsNy42MjYsMTcsMTdzLTcuNjI2LDE3LTE3LDE3ICBzLTE3LTcuNjI2LTE3LTE3UzE0LjYxLDYsMjMuOTg0LDZ6IiBmaWxsPSIjRkZGRkZGIi8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

.search-holder.active .search-button {
  box-shadow: none;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2Ljk2NiA1Ni45NjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU2Ljk2NiA1Ni45NjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTI4cHgiIGhlaWdodD0iMTI4cHgiPgo8cGF0aCBkPSJNNTUuMTQ2LDUxLjg4N0w0MS41ODgsMzcuNzg2YzMuNDg2LTQuMTQ0LDUuMzk2LTkuMzU4LDUuMzk2LTE0Ljc4NmMwLTEyLjY4Mi0xMC4zMTgtMjMtMjMtMjNzLTIzLDEwLjMxOC0yMywyMyAgczEwLjMxOCwyMywyMywyM2M0Ljc2MSwwLDkuMjk4LTEuNDM2LDEzLjE3Ny00LjE2MmwxMy42NjEsMTQuMjA4YzAuNTcxLDAuNTkzLDEuMzM5LDAuOTIsMi4xNjIsMC45MiAgYzAuNzc5LDAsMS41MTgtMC4yOTcsMi4wNzktMC44MzdDNTYuMjU1LDU0Ljk4Miw1Ni4yOTMsNTMuMDgsNTUuMTQ2LDUxLjg4N3ogTTIzLjk4NCw2YzkuMzc0LDAsMTcsNy42MjYsMTcsMTdzLTcuNjI2LDE3LTE3LDE3ICBzLTE3LTcuNjI2LTE3LTE3UzE0LjYxLDYsMjMuOTg0LDZ6IiBmaWxsPSIjMmJhZGQ4Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
  background-color: #fff;
  transition: background-color 0.2s ease;
  -webkit-transition: background-color 0.2s ease;
  transition-delay: 0.1s;
}

.search-holder .search-input {
  background-color: transparent;
  height: 30px;
  color: #2badd8;
  text-align: left;
  border: 0;
  box-shadow: none;
  outline: none;
  transform: translate(0, 55px);
  transition: transform 0.4s ease;
  font-size: 1em;
  padding: 0 20px;
  opacity: 0;
  visibility: hidden;
}

.search-input::-webkit-input-placeholder {
  color: #2badd8;
}

.search-holder.active .search-input {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
  transition: transform 0.4s ease, opacity 0.2s ease;
  -webkit-transition: transform 0.4s ease, opacity 0.2s ease;
  transition-delay: 0.3s;
}

.form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  z-index: 10;
  background-color: #2badd8;
  transition: width 0.4s ease, background-color 0.4s ease;
  -webkit-transition: width 0.4s ease, background-color 0.4s ease;
}

.search-holder.active .form {
  background-color: #fff;
  width: 330px;
  transition: width 0.4s ease, background-color 0.4s ease;
  -webkit-transition: width 0.4s ease, background-color 0.4s ease;
}