/* Animations */

#home .logo,
#home header[role="banner"] li,

.animated{
  opacity: 0;
  -webkit-transform: translateY(-20px);
     -moz-transform: translateY(-20px);
          transform: translateY(-20px);
  -webkit-animation: fadein .4s .3s 1 forwards ease-in-out;
     -moz-animation: fadein .4s .3s 1 forwards ease-in-out;
          animation: fadein .4s .3s 1 forwards ease-in-out;
}
  #home .logo{
    -webkit-animation-delay: 0s;
       -moz-animation-delay: 0s;
            animation-delay: 0s;
  }
  #home header[role="banner"] li.blog{
    -webkit-animation-delay: 0.2s;
       -moz-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  #home header[role="banner"] li.portfolio{
    -webkit-animation-delay: 0.3s;
       -moz-animation-delay: 0.3s;
            animation-delay: 0.3s;
  }
  #home header[role="banner"] li.links{
    -webkit-animation-delay: 0.4s;
       -moz-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
  #home header[role="banner"] li.resume{
    -webkit-animation-delay: 0.5s;
       -moz-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
  #home header[role="banner"] li.about{
    -webkit-animation-delay: 0.6s;
       -moz-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }
  #home header[role="banner"] li.icons{
    -webkit-animation-delay: 0.7s;
       -moz-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }

#mams-brand{
  -webkit-animation: bgslide 500s 2 forwards linear;
     -moz-animation: bgslide 500s 2 forwards linear;
          animation: bgslide 500s 2 forwards linear;
}

/* Keyframes */

@-webkit-keyframes fadein{
  0%{
    -webkit-transform: translateY(-20px);
    opacity: 0;
  }
  100%{
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}
@-moz-keyframes fadein{
  0%{
    -moz-transform: translateY(-20px);
    opacity: 0;
  }
  100%{
    -moz-transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadein{
  0%{
    transform: translateY(-20px);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes bgslide{
  0%{
    background-position: left bottom;
  }
  50%{
    background-position: -2000px -2000px;
  }
  100%{
    background-position: left bottom;
  }
}
@-moz-keyframes bgslide{
  0%{
    background-position: left bottom;
  }
  50%{
    background-position: -2000px -2000px;
  }
  100%{
    background-position: left bottom;
  }
}
@keyframes bgslide{
  0%{
    background-position: left bottom;
  }
  50%{
    background-position: -2000px -2000px;
  }
  100%{
    background-position: left bottom;
  }
}