#sf-social {
   background-color: var(--sf-theme-primary);
}

#sf-social h2 > span {
  font-size: 130%;
  color: var(--sf-theme-accent);
}

#sf-social a {
    width: 220px;
    height: 220px;
    position: relative;
    overflow: hidden;
    -webkit-animation: hover 2s ease infinite;
       -moz-animation: hover 2s ease infinite;
         -o-animation: hover 2s ease infinite;
            animation: hover 2s ease infinite;
}

#sf-social a svg {
    width: 95%;
}

#sf-social p > a {
    color: #000;
    position: relative;
}

#sf-social p > a:after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    background: var(--sf-theme-accent);
    height: 3px;
    -webkit-transform: scaleX(0);
       -moz-transform: scaleX(0);
        -ms-transform: scaleX(0);
         -o-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: transform .3s cubic-bezier(1,0,0,1);
       -moz-transition: transform .3s cubic-bezier(1,0,0,1);
        -ms-transition: transform .3s cubic-bezier(1,0,0,1);
         -o-transition: transform .3s cubic-bezier(1,0,0,1);
            transition: transform .3s cubic-bezier(1,0,0,1);
    -webkit-transform-origin: right;
       -moz-transform-origin: right;
        -ms-transform-origin: right;
         -o-transform-origin: right;
            transform-origin: right;
}

#sf-social p > a:hover:after {
  -webkit-transform: scaleX(1);
     -moz-transform: scaleX(1);
      -ms-transform: scaleX(1);
       -o-transform: scaleX(1);
          transform: scaleX(1);
           -webkit-transform-origin: left;
       -moz-transform-origin: left;
        -ms-transform-origin: left;
         -o-transform-origin: left;
            transform-origin: left;
}

@keyframes hover {
  0% {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
      
  }

  50% {
    -webkit-transform: translateY(-10px);
       -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
         -o-transform: translateY(-10px);
            transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}