.searchToggle {
  float: right;
}
.searchToggle >input{
  opacity: 0;
  width: 40px;
  height: 40px;
  position: absolute;
  cursor: pointer;
}
.searchInput
{
  width: calc(100% - 70px);
  height: 40px;
  position: absolute;
  background: #efefef;
  padding: 0px;
  margin-left: 20px;
  margin-top: 5px;
}
.searchIcon{
  float: right;
  /*! margin-top: 5px; */
}

.searchToggle span
{
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}

.searchToggle span:first-child
{
  transform-origin: 0% 0%;
}

.searchToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

.menu
{
  position: absolute;
  width: 100%;
  height: 50px;
  top: 60px;
  left: 0px;
  background-color: #EFEFEF;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(0%, -240%);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.menu li
{
  padding: 0px 0;
  transition-delay: 2s;
}

.searchToggle input:checked ~ ul
{
  transform: none;
  border-bottom: 1px solid #d9d9d9;
}