$linkedin-color = #4099ff
$facebook-color = #3b5998

html,
body
  height 100%
  min-height 100%
  margin 0
  padding 0

.wrp
  text-align center
  height 100%
  width 100%
  &::before
    content ''
    display inline-block
    height 100%
    vertical-align middle
.icon
  display inline-block
  font-size 50px
  line-height 90px
  height 90px
  width 90px
  margin-right 20px
  color #4099ff
  border-radius 100%
  position relative
  &::before
    content ''
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    border-radius 100%
    background rgba(0,0,0,0.1)
    z-index -1
  &::after
    content ''
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    margin auto
    vertical-align middle
    width 100%
    height 100%
    transform scale(0)
    background #4099ff
    border-radius 100%
    z-index -1
  &:hover
    animation-name bubble2
    animation-duration .5s
    animation-delay .1s
    animation-fill-mode forwards
    &::after
      animation-name bubble
      animation-duration .5s
      animation-fill-mode forwards

   
.icon-twitter
  color $twitter-color
  &::after
    background $twitter-color
    
.icon-facebook
  color $facebook-color
  &::after
    background $facebook-color
    
.icon-instagram
  color $instagram-color
  &::after
    background $instagram-color
    
.icon-gplus
  color $gplus-color
  &::after
    background $gplus-color

      
@keyframes bubble
  0% {}
  100%
    transform scale(1)

@keyframes bubble2
  0% {}
  100%
    color #fff