
  .search-container {
    position: relative;
    /* margin: calc(75px + 2vh + 2vw) auto 0 auto; */
    padding: 0;
    width: 100%;
    max-width: 840px;
  }
  .search-box {
    position: relative;
    width: 100%;
    max-width: 270px;/*360 original*/
    height: 40px;/*60 original*/
    border-radius: 120px;
    margin: 0 auto;
  }

  @media (max-width: 991px) {
    .search-box {
      position: relative;
      width: 100%;
      max-width: 360px;/*360 original*/
      height: 40px;/*60 original*/
      border-radius: 120px;
      margin: 0 auto;
    }
    .search-border {
      display: block;
      width: 100%;
      max-width: 360px;/*360 original*/
      height: 40px;/*60 original*/
    }
  }
  .search-icon, .go-icon {
    position: absolute;
    top: 0;
    height: 40px;/*60 original*/
    width: 66px;/*86 original*/
    line-height: 41px;/*61 original*/
    text-align: center;
    color:lightgreen
  }
  .search-icon {
    left: 0;
    pointer-events: none;
    font-size: 1.02em;/* 122em*/
    will-change: transform;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform-origin: center center;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -webkit-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -o-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  }
  .si-rotate {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  .go-icon {
    right: 0;
    pointer-events: none;
    font-size: 1.08em;/*1.38em*/
    will-change: opacity;
    cursor: default;
    opacity: 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -webkit-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -o-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  }
  .go-in {
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -webkit-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -o-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  }
  .search-border {
    display: block;
    width: 100%;
    max-width: 270px;/*360 original*/
    height: 40px;/*60 original*/
  }
  .border {
    fill: none;
    stroke: lightgreen;
    stroke-width: 2;/*3 original*/
    stroke-miterlimit: 3;/*5 orignal*/
  }
  .border {
    stroke-dasharray: 740;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
    -webkit-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
    -moz-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
    -o-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
  }
  .border-searching .border {
    stroke-dasharray: 740;
    stroke-dashoffset: 459;
    transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
    -webkit-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
    -moz-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
    -o-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
  }
  #search {
    font-family: 'Montserrat Alternates', sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 120px;
    border: none;
    background: rgba(255,255,255,0);
    padding: 0 48px 0 30px; /*0 68px 0 68px*/
    color: lightgreen;
    font-size: 1.02em;/*1.3em*/
    font-weight: 400;
    letter-spacing: -0.015em;
    outline: none;
  }
  #search::-webkit-input-placeholder {color: lightgreen;}
  #search::-moz-placeholder {color: lightgreen;}
  #search:-ms-input-placeholder {color: lightgreen;}
  #search:-moz-placeholder {color: lightgreen;}
  #search::-moz-selection {color: lightgreen;; background: rgba(0,0,0,0.25);}
  #search::selection {color: lightgreen;; background: rgba(0,0,0,0.25);}