/* 
body {
   font-family: 'Roboto Condensed';
   font-weight: 400;
   margin: 0;
   padding: 0;
}

small {
   font-size: 12px;
   color: rgba(0, 0, 0, 0.4);
}

h1 {
   font-size: 40px;
   font-weight: 800;
   margin: 0;
   padding: 50px 0;
   text-align: center;
   letter-spacing: -1px;
   color: inherit;
}

h2 {
   font-size: 30px;
   font-weight: 300;
   margin: 0;
   padding: 50px;
   text-align: center;
   color: inherit;
}

.center {
   text-align: center;
}

section {
   height: 100vh;
} */

/* NAVIGATION */
.footer nav {
   margin: 0 auto;
   padding:1px 0;
}

/* nav ul {
   list-style: none;
   text-align: center;
} */

nav ul li {
   display: inline-block;
}

nav ul li a {
   font-weight: 800;
   display: block;
   /* margin: 0 10px; */
   padding: 3px;
   text-decoration: none;
   text-transform: uppercase;
   color: #aaa;
}

nav ul li a,
nav ul li a:after,
nav ul li a:before {
   transition: all .5s;
}

nav ul li a:hover {
   color: #555;
}

/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
   position: relative;
}

nav.stroke ul li a:after,
nav.fill ul li a:after {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   width: 0;
   height: 1px;
   margin: auto;
   content: '.';
   color: transparent;
   background: #aaa;
}

nav.stroke ul li a:hover:after {
   width: 100%;
}

nav.fill ul li a {
   transition: all 2s;
}

nav.fill ul li a:after {
   margin: 0;
   content: '.';
   text-align: left;
   opacity: 0;
}

nav.fill ul li a:hover {
   z-index: 1;
   color: #fff;
}

nav.fill ul li a:hover:after {
   z-index: -10;
   -webkit-animation: fill 1s forwards;
   -moz-animation: fill 1s forwards;
   animation: fill 1s forwards;
   opacity: 1;
}

/* Circle */
nav.circle ul li a {
   position: relative;
   z-index: 1;
   overflow: hidden;
}

nav.circle ul li a:after {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: block;
   width: 1px;
   height: 1px;
   margin: 0;
   content: '.';
   color: transparent;
   border-radius: 50%;
   background: transparent;
}

nav.circle ul li a:hover:after {
   -webkit-animation: circle 1.5s ease-in forwards;
   animation: circle 1.5s ease-in forwards;
}

/* SHIFT */
nav.shift ul li a {
   position:relative;
   z-index: 1;
}

nav.shift ul li a:hover {
   color: #91640F;
}

nav.shift ul li a:after {
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: block;
   visibility: none;
   width: 100%;
   height: 1px;
   margin: auto;
   content: '.';
   opacity: 0;
   color: transparent;
   background: #F1C40F;
}

nav.shift ul li a:hover:after {
   visibility: visible;
   height: 100%;
   opacity: 1;
}

/* Keyframes */
@keyframes fill {
   0% {
      width: 0;
      height: 1px;
   }

   50% {
      width: 100%;
      height: 1px;
   }

   100% {
      width: 100%;
      height: 100%;
      background: #333;
   }
}

/* Keyframes */
@keyframes circle {
   0% {
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 1px;
      height: 1px;
      margin: auto;
      border-radius: 100%;
      background: #eee;
   }

   100% {
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 5000%;
      height: 5000%;
      margin: auto;
      border-radius: 0;
      background: #aaa;
   }
}