/* HEADER
--------------------------------------------------*/
#header-image {
  width: 100%;
  position: fixed;
  min-height: 400px;
  z-index: 1;
  img {
    filter: blur(@blur);
    -webkit-filter: blur(@blur);
    -moz-filter: blur(@blur);
    -o-filter: blur(@blur);
    -ms-filter: blur(@blur);
  }
}
#header-image:after {
  content: "";
  background: url('../../images/overlay.png') repeat;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
  border-bottom: solid 9px @border-bottom;
}
header {
  text-align: center;
  /* padding: 20px; */
  .site-title a {
    text-decoration: none;
    font-size: 48px;
    font-family: Roboto, Helvetica, sans-serif;
    font-weight: lighter;
    text-shadow: 0px 0px 10px #888;
  }
  .site-description {
    font-size: 18px;
    font-weight: lighter;
  }
  //social icons
  #social-icons {
    .common{
      width: 40px;
      margin-top: 30px;
      padding-right: 5px;
    }
    .default {
      transition: all 0.4s ease;
      -webkit-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transform-origin: center;
      &:hover {
        transform: translateY(-5px) scale(1.3);
        -webkit-transform: translateY(-5px) scale(1.3);
        -moz-transform: translateY(-5px) scale(1.3);
      }
    }

    .style1 {
      transition: all 0.4s ease;
      -webkit-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transform-origin: center;
      display: inline-block;
      vertical-align: middle;
      box-shadow: 0 0 1px transparent;
      transform: translateZ(0px);
      -webkit-transform: translateZ(0px);
      -moz-transform: translateZ(0px);
      &:hover {
        -webkit-animation-name: buzz;
        animation-name: buzz;
        -webkit-animation-duration: 0.15s;
        animation-duration: 0.15s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
      }
      @-webkit-keyframes buzz {
        50% {
          -webkit-transform: translateX(3px) rotate(2deg);
          transform: translateX(3px) rotate(2deg);
        }
        100% {
          -webkit-transform: translateX(-3px) rotate(-2deg);
          transform: translateX(-3px) rotate(-2deg);
        }
      }
      @keyframes buzz {
        50% {
          -webkit-transform: translateX(3px) rotate(2deg);
          transform: translateX(3px) rotate(2deg);
        }
        100% {
          -webkit-transform: translateX(-3px) rotate(-2deg);
          transform: translateX(-3px) rotate(-2deg);
        }
      }
    }

    .style2 {
      transition: all 0.4s ease;
      -webkit-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transform-origin: center;
      filter:opacity(0.8);
      &:hover {
        transform: translateZ(0px) scale(1.5) rotate(15deg);
        -webkit-transform: translateZ(0px) scale(1.5) rotate(15deg);
        -moz-transform: translateZ(0px) scale(1.5) rotate(15deg);
        filter:opacity(1);
      }
    }

    .style3 {
      transition: all 0.4s ease;
      -webkit-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transform-origin: center;
      @-webkit-keyframes flash {
        0% {
          opacity: 0.8;
        }
        50%{
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes flash {
        0% {
          opacity: 0.8;
        }
        50%{
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      &:hover {
        transform: translateZ(0px) scale(1.4);
        -webkit-transform: translateZ(0px) scale(1.4);
        -moz-transform: translateZ(0px) scale(1.4);
        opacity: 1;
        -webkit-animation: flash 1.5s;
        animation: flash 1.5s;
      }
    }
  }
}