/* Slanted Search Button */


.search-slant {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  font-size: 20px;
  font-family: inherit;
  padding: 15px 12px;
  z-index: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff !important;
  -webkit-transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.search-slant:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #08add5;
  content: '';
  -webkit-transition: box-shadow 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: box-shadow 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: skewX(-13deg);
          transform: skewX(-13deg);
}
.search-slant:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background: rgba(250,250,250,0.3);
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), width 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), width 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: skewX(-13deg);
          transform: skewX(-13deg);
}