body, html {
  background-color: #1c2020;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-family: 'Raleway', sans-serif; }

/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform; }

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
  transform: scale(1.3); }

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0); }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0); } }
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0); }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0); } }
.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale; }

.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1; }

/*normal code*/
h1 {
  color: #efefef;
  padding-left: 60px; }

.profile-link {
  color: #efefef;
  position: absolute;
  left: 15px;
  bottom: 14px;
  height: 100px;
  padding-left: 55px;
  background-size: 50px 50px;
  z-index: 100; }
  .profile-link img {
    display: inline; }
  .profile-link p {
    display: inline; }
  .profile-link a {
    color: #efefef;
    text-decoration: none; }

#github {
  position: absolute;
  right: 15px;
  bottom: 8px;
  height: 45px;
  padding-right: 55px;
  background-size: 50px 50px;
  z-index: 100; }

a {
  color: #efefef;
  text-decoration: none; }

.navigation-arrow {
  color: #efefef;
  font-size: 50px;
  position: absolute;
  top: 0;
  bottom: 70px;
  width: 28px;
  height: 42px;
  margin: auto 0;
  z-index: 1000;
  cursor: pointer;
  padding: 20px 10px;
  -webkit-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s; }
  .navigation-arrow a {
    color: #efefef;
    text-decoration: none; }

#prev {
  left: 10px; }

#next {
  right: 10px; }

/*music bar animation*/
.loader {
  margin: 0 auto;
  width: 110px;
  height: 70px;
  text-align: center;
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%); }
  .loader div {
    height: 100%;
    width: 15px;
    display: inline-block;
    float: left;
    margin-left: 2px;
    -webkit-animation: delay 1.5s infinite ease-in-out;
    animation: delay 1.5s infinite ease-in-out; }
  .loader .bar1 {
    background-color: #EF597B;
    border-radius: 5px; }
  .loader .bar2 {
    background-color: #FF6D31;
    border-radius: 5px;
    -webkit-animation-delay: -1.3s;
    animation-delay: -1.3s; }
  .loader .bar3 {
    background-color: #73B66B;
    border-radius: 5px;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s; }
  .loader .bar4 {
    background-color: #FFCB18;
    border-radius: 5px;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s; }
  .loader .bar5 {
    background-color: #93648D;
    border-radius: 5px;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s; }
  .loader .bar6 {
    background-color: #29A2C6;
    border-radius: 5px;
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s; }

@-webkit-keyframes delay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.05); }
  20% {
    -webkit-transform: scaleY(1); } }
@keyframes delay {
  0%, 40%, 100% {
    transform: scaleY(0.05);
    -webkit-transform: scaleY(0.05); }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1); } }
/*box spin animation*/
.loader2:before, .loader2:after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 20%;
  border-style: solid;
  border-top-color: #754fa0;
  border-right-color: #09b7bf;
  border-bottom-color: #90d36b;
  border-left-color: #f2d40d;
  content: '';
  transform: translate(-50%, -50%);
  animation: rotate 1.7s  infinite ease-in-out; }
.loader2:before {
  border-width: 80px; }
.loader2:after {
  width: 100px;
  height: 100px;
  border-width: 10px;
  animation-direction: reverse; }

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0); }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); } }
/*simple animation*/
.loader3 {
  width: 160px;
  height: 160px;
  border-radius: 150px;
  border: 15px solid #fff;
  border-top-color: rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  animation: loading 1.2s linear infinite;
  -webkit-animation: loading 1.2s linear infinite; }

@keyframes loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg); } }
/*box fade*/
.a-cube-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-top: -70px;
  margin-left: -70px; }

.a-cube {
  width: 33%;
  height: 33%;
  background-color: #fff;
  float: left;
  -webkit-animation: a-cubeGridScaleDelay 1.8s infinite ease-in-out;
  animation: a-cubeGridScaleDelay 1.8s infinite ease-in-out; }

.a-cube-grid .a-cube1 {
  -webkit-animation-delay: 0.0s;
  animation-delay: 0.0s;
  background-color: #00a8de; }

.a-cube-grid .a-cube2 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  background-color: #91bd49; }

.a-cube-grid .a-cube3 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  background-color: #fce92b; }

.a-cube-grid .a-cube4 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  background-color: #333290; }

.a-cube-grid .a-cube5 {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  background-color: #00a054; }

.a-cube-grid .a-cube6 {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
  background-color: #ef7f31; }

.a-cube-grid .a-cube7 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  background-color: #9c298c; }

.a-cube-grid .a-cube8 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  background-color: #e9177d; }

.a-cube-grid .a-cube9 {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  background-color: #ea2b3b; }

@-webkit-keyframes a-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1); }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1); } }
@keyframes a-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1); }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1); } }

/*# sourceMappingURL=style.css.map */