SP.CSS

$dark: #101010;
#popup-container {
  width: 470px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.popup {
  width: 470px;
  height: 60px;
  background: #fff;
  display: none;

  .left {
    position: relative;
    height: 60px;
    width: 60px;
    float: left;

    span:before {
      font-size: 40px;
      line-height: 60px;
      width: 60px;
      height: 60px;
      content: "";
      display: block;
      text-align: center;
      color: #FFF;
    }

    .twitter:before {
      background: #4b9bd8 url('http://nerdordie.com/wp-content/uploads/2015/11/twitter.png') no-repeat 10px 10px;
    }

    .facebook:before {
      background: #3a5795 url('http://nerdordie.com/wp-content/uploads/2015/11/facebook.png') no-repeat 10px 10px;
    }

    .instagram:before {
      background: #44749c url('http://nerdordie.com/wp-content/uploads/2015/11/instagram.png') no-repeat 10px 10px;
    }

    .youtube:before {
      background: #ec2727 url('http://nerdordie.com/wp-content/uploads/2015/11/youtube.png') no-repeat 10px 10px;
    }

    .paypal:before {
      background: #005082 url('http://nerdordie.com/wp-content/uploads/2015/11/paypal.png') no-repeat 10px 10px;
    }

    .twitch:before {
      background: #6542a6 url('http://nerdordie.com/wp-content/uploads/2015/11/twitch.png') no-repeat 10px 10px;
    }

    .tumblr:before {
      background: #324f6d url('http://nerdordie.com/wp-content/uploads/2015/11/tumblr.png') no-repeat 10px 10px;
    }

    .patreon:before {
      background: #e6461a url('http://nerdordie.com/wp-content/uploads/2015/11/patreon.png') no-repeat 10px 10px;
    }

    .snapchat:before {
      background: #fffc00 url('http://nerdordie.com/wp-content/uploads/2015/11/snapchat.png') no-repeat 10px 10px;
    }

    .steam:before {
      background: #000 url('http://nerdordie.com/wp-content/uploads/2015/11/steam.png') no-repeat 10px 10px;
    }

    .xbox:before {
      background: #117d10 url('http://nerdordie.com/wp-content/uploads/2015/11/xbox.png') no-repeat 10px 10px;
    }

    .psn:before {
      background: #0b266b url('http://nerdordie.com/wp-content/uploads/2015/11/psn.png') no-repeat 10px 10px;
    }

    .origin:before {
      background: #f05a22 url('http://nerdordie.com/wp-content/uploads/2015/11/origin.png') no-repeat 10px 10px;
    }

    .uplay:before {
      background: #4891cb url('http://nerdordie.com/wp-content/uploads/2015/11/uplay.png') no-repeat 10px 10px;
    }

    .nintendo:before {
      background: #f68b33 url('http://nerdordie.com/wp-content/uploads/2016/03/nintendo.png') no-repeat 10px 10px;
    }

    .battlenet:before {
      background: #000001 url('http://nerdordie.com/wp-content/uploads/2016/03/battlenet.png') no-repeat 10px 10px;
    }

    .deviantart:before {
      background: #05cc47 url('http://nerdordie.com/wp-content/uploads/2016/03/deviantart.png') no-repeat 10px 10px;
    }

    .reddit:before {
      background: #ffffff url('http://nerdordie.com/wp-content/uploads/2016/03/reddit.png') no-repeat 10px 10px;
    }

    .gamewisp:before {
      background: #f8a853 url('http://nerdordie.com/wp-content/uploads/2016/03/gamewisp.png') no-repeat 10px 10px;
    }

    .playstv:before {
      background: #35373b url('http://nerdordie.com/wp-content/uploads/2016/03/playstv.png') no-repeat 10px 10px;
    }

  }

  .right {
    position: relative;
    height: 60px;
    width: 400px;
    float: left;
    color: $dark;
    padding-left: 10px;
    font-size: 30px;
    line-height: 60px;
    white-space: nowrap;
    font-family: 'Montserrat';
    animation: popup-text 2s 1 ease-out;
    -webkit-animation: popup-text 2s 1 ease-out;

    span {
      white-space: nowrap;
    }

    @keyframes popup-text { //change to popup
      0% {color: rgba(16,16,16,0); text-indent: -10px}
      40% {color: rgba(16,16,16,0); text-indent: -10px}
      50% {color: rgba(16,16,16,1); text-indent: 0px;}
      100% {color: rgba(16,16,16,1); text-indent: 0px;}
    }
    @-webkit-keyframes popup-text { //change to popup
      0% {color: rgba(16,16,16,0); text-indent: -10px}
      40% {color: rgba(16,16,16,0); text-indent: -10px}
      50% {color: rgba(22,16,16,1); text-indent: 0px;}
      100% {color: rgba(16,16,16,1); text-indent: 0px;}
    }

  }
}

.show-popup {
  display: block;
  animation: popup 1s 1 ease-out;
  -webkit-animation: popup 1s 1 ease-out;
}

@keyframes popup { //change to popup
  0% {width: 60px; margin-top: -10px;opacity: 0;}
  20% {width: 60px; margin-top: 0px;opacity: 1;}
  45% {width: 470px;}
  100% {width: 470px;}
}
@-webkit-keyframes popup { //change to popup
  0% {width: 60px; margin-top: -10px;opacity: 0;}
  20% {width: 60px; margin-top: 0px;opacity: 1;}
  45% {width: 470px;}
  100% {width: 470px;}
}

.no-popup {
  display:none !important;
}