@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/* div styles for presentation */
div
{
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
}
body
{
  margin-top: 4em;
  background-color: #ecf0f1;
}

/* General rule */
.button-big
{
  font-size: 2.5em;
  width: 4em;
  text-align:center;
  padding: 0.2em 0em 0.2em 0em;
}

/* Twitter class and animation */
.twitter
{
  color: #0096ff;
  border: 1px solid #0096ff;
}

.twitter:hover
{
  animation: twitterAnim 0.4s normal forwards linear;
  -webkit-animation: twitterAnim 0.4s normal forwards linear;
}
@keyframes twitterAnim {
  50% {
    background-color: #0096ff;
  }
  100% {
    background-color: #0096ff;
    border: 1px solid #0096ff;
    color: #fff;
  }
}

@-webkit-keyframes twitterAnim {
  50% {
    background-color: #0096ff;
  }
  100% {
    background-color: #0096ff;
    border: 1px solid #0096ff;
    color: #fff;
  }
}

/* Facebook class and animation */
.facebook
{
  color: #3B5998;
  border: 1px solid #3B5998;
}

.facebook:hover
{
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}

@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}

@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}

/* Google class and animation */
.gplus
{
  color: #dd4b39;
  border: 1px solid #dd4b39;
}

.gplus:hover
{
  animation: gplusAnim 0.4s normal forwards linear;
  -webkit-animation: gplusAnim 0.4s normal forwards linear;
}

@keyframes gplusAnim {
  50% {
    background-color: #dd4b39;
  }
  100% {
    background-color: #dd4b39;
    border: 1px solid #dd4b39;
    color: #fff;
  }
 }
  
@-webkit-keyframes gplusAnim {
  50% {
    background-color: #dd4b39;
  }
  100% {
    background-color: #dd4b39;
    border: 1px solid #dd4b39;
    color: #fff;
  }
}

/* Dribble class and animation */
.dribbble
{
  color: #ea4c89;
  border: 1px solid #ea4c89;
}

.dribbble:hover
{
  animation: dribbbleAnim 0.4s normal forwards linear;
  -webkit-animation: dribbbleAnim 0.4s normal forwards linear;
}

@-webkit-keyframes dribbbleAnim {
  50% {
    background-color: #ea4c89;
  }
  100% {
    background-color: #ea4c89;
    border: 1px solid #ea4c89;
    color: #fff;
  }
}
  
@keyframes dribbbleAnim {
  50% {
    background-color: #ea4c89;
  }
  100% {
    background-color: #ea4c89;
    border: 1px solid #ea4c89;
    color: #fff;
  }
}
/* Yahoo class and animation */
.yahooo
{
  color: #720e9e;
  border: 1px solid #720e9e;
}

.yahooo:hover
{
  animation: yahoooAnim 0.4s normal forwards linear;
  -webkit-animation: yahoooAnim 0.4s normal forwards linear;
}

@-webkit-keyframes yahoooAnim {
  50% {
    background-color: #720e9e;
  }
  100% {
    background-color: #720e9e;
    border: 1px solid #720e9e;
    color: #fff;
  }
}
@keyframes yahoooAnim {
  50% {
    background-color: #720e9e;
  }
  100% {
    background-color: #720e9e;
    border: 1px solid #720e9e;
    color: #fff;
  }
}

/* Links */
a
{
  color: #9b59b6;
  text-decoration: none;
}