#site-search {
  display: block;
  float: right;
  margin-top: 5px;
  border: none;
}
@media (min-width:  1200px ), (min-width:  960px ) and (max-width:  1199px ) {
  #site-search .main-search {
    width: 230px;
    background: #f0f0f0;
    border-radius: 8px;
    border: none;
    margin-top: -20px;
  }
  #site-search .main-search-submit {
    height: 13px;
    width: 14px;
    display: block;
    position: relative;
    margin-left: 210px;
    top: -23px;
  }
}
#site-search input:focus {
  outline: 2px dotted;
}
#site-search input[type='text'] {
  height: auto;
  padding: 5px 0;
  font-size: 14px;
  font-size: 1.4rem;
  width: 180px;
  background: none;
  border: none;
  -webkit-transition: width 0.4s ease-out;
  transition: width 0.4s ease-out;
  display: inline-block;
  text-align: left;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#site-search input[type='text']:hover {
  cursor: pointer;
}
#site-search input:focus::-webkit-input-placeholder {
  color: transparent;
}
#site-search input:focus:-moz-placeholder {
  color: transparent;
}
#site-search ::-webkit-input-placeholder {
  text-align: left;
}
#site-search :-moz-placeholder {
  /* Firefox 18- */
  text-align: left;
}
#site-search ::-moz-placeholder {
  /* Firefox 19+ */
  text-align: left;
}
#site-search :-ms-input-placeholder {
  text-align: left;
}
@media (min-width:  768px ) and (max-width:  959px ), (max-width:  767px ) {
  #site-search {
    display: block;
    width: 100%;
    float: left;
    margin-top: 5px;
    border: none;
  }
  #site-search .main-search {
    width: 100%;
    background: #fff;
    border: none;
  }
  #site-search .main-search input[type='text'] {
    width: 82%;
  }
  #site-search .main-search-submit {
    height: auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    vertical-align: text-bottom;
    left: 92%;
    top: -26px;
  }
}