/*------------------------- TYPOGRAPHY -------------------------*/

@font-face {
    font-family: 'metropolis';
    src: url('fonts/metropolis/metropolis-webfont.woff2') format('woff2'),
         url('fonts/metropolis/metropolis-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'metropolis';
    src: url('fonts/metropolis/metropolis-bold-webfont.woff2') format('woff2'),
         url('fonts/metropolis/metropolis-bold-webfont.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: 'metropolis';
    src: url('fonts/metropolis/metropolis-italic-webfont.woff2') format('woff2'),
         url('fonts/metropolis/metropolis-italic-webfont.woff') format('woff');
    font-style: italic;
}

@font-face {
    font-family: 'metropolis';
    src: url('fonts/metropolis/metropolis-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/metropolis/metropolis-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

/*------------------------- BASIC STYLES -------------------------*/

body {
    font-family: "metropolis";
      }

a:link {
    color: #169bc1;
    text-decoration: none;
    font-weight: 700;
}

a:visited {
    color: #169bc1;
    text-decoration: none;
}

a:hover {
    color: #169bc1;
    text-decoration: underline;
}

a:active {
    color: #166ec1;
    text-decoration: underline;
}

hr {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: solid 2px #000;
    color: #000;
    text-align: center;
    width: 50%;
        }

hr:after {
    content: "\25A0";
    display: inline-block;
    position: relative;
    top: -13px;
    font-size: 16px;
    padding: 0 0.25em;
    background: white;
        }

/*------------------------- FOOTER -------------------------*/

.footer {
    font-size: 11px;
    color: #808080;
        }

/*------------------------- PROJECT PAGE STYLES -------------------------*/

.project-item {
    display: block;
    overflow: auto;
}

.project-image-right {
    float: right;
}

.project-image-left {
    float: left;
}

.project-description-right {
    position: relative;
    margin-right: 52%;
}

.project-description-left {
    position: relative;
    margin-left: 52%;
}

/*------------------------- AUDIO PAGE STYLES -------------------------*/

.audio-item {
    display: block;
    overflow: auto;
}

.audio-image-right {
    float: right;
}

.audio-image-left {
    float: left;
}

.audio-description-right {
    position: relative;
    margin-right: 27%%;
}

.audio-description-left {
    position: relative;
    margin-left: 27%;
}

/*------------------------- ANIMATION -------------------------*/

@keyframes fade {
            0% { opacity: 0 }
            100% { opacity: 1 }
        }

@keyframes tvfade {
    0% { opacity: 0 }
    90% {opacity: 0}
    100% { opacity: 1 }
        }

@keyframes return-menu-fade {
    0% { opacity: 0 }
    50% {opacity: 0}
    100% { opacity: 1 }
        }

/*------------------------- HAMBURGER MENU -------------------------*/

#hamburger-menu {
    position: absolute;
    top: 10px;
    left: 10px;
}

#home-button {
          background: url('images/hamburger-menu/home.jpg');
          position: relative;
          width: 106px;
          height: 58px;
      }

#home-button:hover {
          background-position: -106px 0px;
      }

#bio-button {
          background: url('images/hamburger-menu/bio.jpg');
          position: relative;
          width: 78px;
          height: 58px;
      }

#bio-button:hover {
          background-position: -78px 0px;
      }

#events-button {
          background: url('images/hamburger-menu/events.jpg');
          position: relative;
          width: 144px;
          height: 58px;
      }

#events-button:hover {
          background-position: -144px 0px;
      }

#projects-button {
          background: url('images/hamburger-menu/projects.jpg');
          position: relative;
          width: 155px;
          height: 58px;
      }

#projects-button:hover {
          background-position: -155px 0px;
      }

#contact-button {
          background: url('images/hamburger-menu/contact.jpg');
          position: relative;
          width: 168px;
          height: 58px;
      }

#contact-button:hover {
          background-position: -168px 0px;
      }

#videos-button {
          background: url('images/hamburger-menu/videos.jpg');
          position: relative;
          width: 119px;
          height: 58px;
      }

#videos-button:hover {
          background-position: -119px 0px;
      }

#audio-button {
          background: url('images/hamburger-menu/audio.jpg');
          position: relative;
          width: 117px;
          height: 58px;
      }

#audio-button:hover {
          background-position: -117px 0px;
      }