/* AUDIO BUTTON */

@charset "utf-8";

audio {
  display: none;
}

button {
    font-size: 22px;
    color: #eee;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
	height: 40px;
    padding: 5px;
    border: none;
    border-radius: 2px;
    outline: none;
    background: black;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.4s ease-out;
    
}

button.fade:hover {
  opacity: 0.8;
}

.fade {
  opacity: 0.2;
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

/* FONT AWESOME CSS */

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot');
    src: url('fonts/fontawesome-webfont.eot') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff') format('woff'),url('fonts/fontawesome-webfont.ttf') format('truetype'),url('fonts/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.fa-volume-off:before {
    content: "\f026"
}

.fa-volume-up:before {
    content: "\f028"
}