#search-icon {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  #searchicon {
    display: inline-block;
    background: @sbg;
    border: solid 2px @accent;
    color: lighten(@content,20%);
    width: 50px;
    height: 50px;
    padding-top: 11px;
    text-align: center;
    border-radius: 50%;
    font-size: 18px;
  }
}
#social-icons {
  text-align: center;
  margin-top: 10px;
  .none {
    display: inline-block;
    background: fade(white, 10%);
    color: @accent;
    width: 45px;
    height: 45px;
    margin-bottom: 4px;
    padding-top: 9px;
    text-align: center;
    font-size: 18px;
    .transition(0.4s all ease);
    &:hover {
      background: fade(white, 20%);
      color: white;
    }
  }
  .style1 {
    position: relative;
    display: inline-block;
    background: fade(@onaccent,80%);
    color: darken(@background,15%);
    padding: 10px;
    width: 45px;
    height: 45px;
    margin-bottom: 4px;
    padding-top: 9px;
    text-align: center;
    border-radius: 5px;
    transition: all 500ms ease;
    font-size: 18px;
    @media screen and (max-width: 767px) {
      font-size: 14px;
    }
    position: relative;
    &:hover {
      border: none;
      background: darken(@onaccent,30%);
      color: @onaccent;
      transform-origin: 20% 40%;
      border-radius: 5px;
      position: relative;
      box-sizing: border-box;
      transition: all 500ms ease;

    }
  }
  @media screen and (max-width: 767px) {
    .style1 {
      font-size: 14px;
      padding: 10px;
    }
  }

  @media screen and (max-width: 500px) {
    .style1 {
      font-size: 14px;
      padding: 10px;
    }
  }
  @media screen and (max-width: 400px) {
    .style1 {
      background: @background;
      padding: 10px;
      font-size: 14px;
    }
  }
  //style 2
  .style2{
    background: fade(@accent, 50%);
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
    color: @onaccent !important;
    font-size: 18px;
    border-radius: 10%;
    //transition: all, margin-left 4s, color 1s;
    transition: all 1s ease;
    &:hover {
      transition: all 1s ease;
      -webkit-transform: rotate(360deg) scale(2.0);
      background: lighten(@content, 30%);
      color: @onaccent;
    }
  }
  @media screen and (max-width: 767px) {
    .style2 {
      font-size: 14px;
      padding: 10px;
    }
  }

  @media screen and (max-width: 500px) {
    .style2 {
      font-size: 14px;
      padding: 3px;
    }
  }
  @media screen and (max-width: 400px) {
    .style2 {
      i{
        background: @background;
        padding: 20px;
      }
    }
  }

  //style 3
  .hvr-shutter-out-horizontal {
    background: fade(@accent, 50%) !important;
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
    color: @onaccent !important;
    font-size: 18px;
    @media screen and (max-width: 767px) {
      font-size: 14px;
    }
    border-radius: 10%;
    //transition: all, margin-left 4s, color 1s;
    transition: all 1s ease;
    &:before {
        background: fade(@onaccent,80%);
      color: @background !important;
      border-radius: 10%;

    }
    &:hover {
      box-shadow: inset 0 0 0 25px @content;
      background: none;
      color: @background !important;

    }
  }

}