@import url(http://weloveiconfonts.com/api/?family=fontawesome);
* {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    margin: 0;
    padding: 0;
}

[class*="fontawesome-"] {
    text-align: center;
    position: relative;
    z-index: 3;
}
[class*="fontawesome-"]:before {
    position: relative;
    font-family: 'FontAwesome', sans-serif;
    font-size: 38px;
    line-height: 80px;
    display: inline;
    z-index: 3;
    color: #fff;
}

nav {
    margin: 0 auto;
    padding: 20px 0 125px 0;
    position: relative;
}
nav ul {
    position: relative;
    list-style: none;
    z-index: 2;
}
nav > ul {
    position: absolute;
    left: 50%;
    margin-left: -44.5px;
}
nav li {
    position: static;
    width: 80px;
    height: 80px;
    background: #333333;
    -moz-border-radius: 43px;
    -webkit-border-radius: 43px;
    border-radius: 43px;
    border: 3px solid white;
    z-index: 3;
}
nav li:before, nav li:after {
    position: absolute;
    content: "";
    width: 46px;
    height: 92px;
    top: -3px;
    left: -3px;
    -moz-border-radius: 46px 0 0 46px;
    -webkit-border-radius: 46px;
    border-radius: 46px 0 0 46px;
    -webkit-transform-origin: 46px 50%;
    -webkit-transform-origin: 46px 50%;
    -moz-transform-origin: 46px 50%;
    -o-transform-origin: 46px 50%;
}
nav li:before {
    -webkit-animation: rotate 5s linear infinite;
    animation: rotate 5s linear infinite;
    -moz-animation: rotate 5s linear infinite;
    -o-animation: rotate 5s linear infinite;
    background: #333333;
    z-index: -2;
}
nav li:after {
    -webkit-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-animation: oscilate 5s linear infinite;
    animation: oscilate 5s linear infinite;
    -moz-animation: oscilate 5s linear infinite;
    -o-animation: oscilate 5s linear infinite;
    -webkit-animation-timing-function: steps(1);
    animation-timing-function: steps(1);
    -moz-animation-timing-function: steps(1);
    -o-animation-timing-function: steps(1);
    z-index: -1;
    background: #888;
}
nav li li {
    display: none;
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    width: 46px;
    -moz-border-radius: 46px 0 0 46px;
    -webkit-border-radius: 46px;
    border-radius: 46px 0 0 46px;
    opacity: 0;
  }

  15% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    opacity: 1;
  }

  20% {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    opacity: 1;
  }

  23% {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
  }

  30% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
  }

  35% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
  }

  43% {
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -o-transform: rotate(110deg);
  }

  46% {
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -o-transform: rotate(110deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
  }

  55% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
  }

  66% {
    -webkit-transform: rotate(220deg);
    -moz-transform: rotate(220deg);
    -o-transform: rotate(220deg);
  }

  70% {
    -webkit-transform: rotate(220deg);
    -moz-transform: rotate(220deg);
    -o-transform: rotate(220deg);
  }

  76% {
    -webkit-transform: rotate(220deg);
    -moz-transform: rotate(220deg);
    -o-transform: rotate(220deg);
  }

  80% {
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -o-transform: rotate(300deg);
  }

  85% {
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -o-transform: rotate(300deg);
  }

  89.9% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    width: 46px;
    -moz-border-radius: 46px 0 0 46px;
    -webkit-border-radius: 46px;
    border-radius: 46px 0 0 46px;
  }

  90% {
    width: 92px;
    -moz-border-radius: 46px;
    -webkit-border-radius: 46px;
    border-radius: 46px;
    opacity: 1;
  }

  97% {
    opacity: 0;
  }

  100% {
    width: 92px;
    -moz-border-radius: 46px;
    -webkit-border-radius: 46px;
    border-radius: 46px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    opacity: 0;
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    width: 46px;
    -moz-border-radius: 46px 0 0 46px;
    -webkit-border-radius: 46px;
    border-radius: 46px 0 0 46px;
    opacity: 0;
  }

  15% {
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }

  20% {
    -webkit-transform: rotate(30deg);
    opacity: 1;
  }

  23% {
    -webkit-transform: rotate(30deg);
  }

  30% {
    -webkit-transform: rotate(90deg);
  }

  35% {
    -webkit-transform: rotate(90deg);
  }

  43% {
    -webkit-transform: rotate(110deg);
  }

  46% {
    -webkit-transform: rotate(110deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  55% {
    -webkit-transform: rotate(180deg);
  }

  66% {
    -webkit-transform: rotate(220deg);
  }

  70% {
    -webkit-transform: rotate(220deg);
  }

  76% {
    -webkit-transform: rotate(220deg);
  }

  80% {
    -webkit-transform: rotate(300deg);
  }

  85% {
    -webkit-transform: rotate(300deg);
  }

  89.9% {
    -webkit-transform: rotate(360deg);
    width: 46px;
    -moz-border-radius: 46px 0 0 46px;
    -webkit-border-radius: 46px;
    border-radius: 46px 0 0 46px;
  }

  90% {
    width: 92px;
    -moz-border-radius: 46px;
    -webkit-border-radius: 46px;
    border-radius: 46px;
    opacity: 1;
  }

  97% {
    opacity: 0;
  }

  100% {
    width: 92px;
    -moz-border-radius: 46px;
    -webkit-border-radius: 46px;
    border-radius: 46px;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
}
@keyframes oscilate {
  0% {
    -webkit-transform: rotate(0deg) scale(1.1);
    -moz-transform: rotate(0deg) scale(1.1);
    -o-transform: rotate(0deg) scale(1.1);
    background: #eeeeee;
    opacity: 1;
  }

  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    background: #333333;
    opacity: 1;
  }

  90% {
    opacity: 0;
  }
}
@-webkit-keyframes oscilate {
  0% {
    -webkit-transform: rotate(0deg) scale(1.1);
    background: #eeeeee;
    opacity: 1;
  }

  50% {
    -webkit-transform: rotate(180deg);
    background: #333333;
    opacity: 1;
  }

  90% {
    opacity: 0;
  }
}