@charset "utf-8";

*{
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
}

html, body {
        font-size: 16px tahoma, verdana, arial, sans-serif;
        background-color: #000;
        color: #efd292;
}


/** FONTS USED ON THIS SITE **/

/* Navigation */
@font-face {
    font-family: 'basic_sans_light_sfregular';
    src: url('../fonts/nav/basicsanslightsf-webfont.eot');
    src: url('../fonts/nav/basicsanslightsf-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nav/basicsanslightsf-webfont.woff2') format('woff2'),
         url('../fonts/nav/basicsanslightsf-webfont.woff') format('woff'),
         url('../fonts/nav/basicsanslightsf-webfont.ttf') format('truetype'),
         url('../fonts/nav/basicsanslightsf-webfont.svg#basic_sans_light_sfregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* h1 */
@font-face {
    font-family: 'romana_btroman';
    src: url('../fonts/h1/romanabt-webfont.eot');
    src: url('../fonts/h1/romanabt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/h1/romanabt-webfont.woff2') format('woff2'),
         url('../fonts/h1/romanabt-webfont.woff') format('woff'),
         url('../fonts/h1/romanabt-webfont.ttf') format('truetype'),
         url('../fonts/h1/romanabt-webfont.svg#romana_btroman') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* h2 */
@font-face {
    font-family: 'great_vibesregular';
    src: url('../fonts/h2/greatvibes-regular-webfont.eot');
    src: url('../fonts/h2/greatvibes-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/h2/greatvibes-regular-webfont.woff2') format('woff2'),
         url('../fonts/h2/greatvibes-regular-webfont.woff') format('woff'),
         url('../fonts/h2/greatvibes-regular-webfont.ttf') format('truetype'),
         url('../fonts/h2/greatvibes-regular-webfont.svg#great_vibesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* p + h3 */
@font-face {
    font-family: 'avenir_45_bookregular';
    src: url('../fonts/p/avenir45book-webfont.eot');
    src: url('../fonts/p/avenir45book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/p/avenir45book-webfont.woff2') format('woff2'),
         url('../fonts/p/avenir45book-webfont.woff') format('woff'),
         url('../fonts/p/avenir45book-webfont.ttf') format('truetype'),
         url('../fonts/p/avenir45book-webfont.svg#avenir_45_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* TOP button */
@font-face {
    font-family: 'basic_sans_heavy_sfbold';
    src: url('../fonts/topBtn/basicsansheavysf-webfont.eot');
    src: url('../fonts/topBtn/basicsansheavysf-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/topBtn/basicsansheavysf-webfont.woff2') format('woff2'),
         url('../fonts/topBtn/basicsansheavysf-webfont.woff') format('woff'),
         url('../fonts/topBtn/basicsansheavysf-webfont.ttf') format('truetype'),
         url('../fonts/topBtn/basicsansheavysf-webfont.svg#basic_sans_heavy_sfbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Contact Form */
@font-face {
    font-family: 'avenir_85_heavyregular';
    src: url('../fonts/contact-form/avenir85heavy-webfont.eot');
    src: url('../fonts/contact-form/avenir85heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/contact-form/avenir85heavy-webfont.woff2') format('woff2'),
         url('../fonts/contact-form/avenir85heavy-webfont.woff') format('woff'),
         url('../fonts/contact-form/avenir85heavy-webfont.ttf') format('truetype'),
         url('../fonts/contact-form/avenir85heavy-webfont.svg#avenir_85_heavyregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p {
        font-family: 'avenir_45_bookregular';
        font-size: 0.875em;
        line-height: 1.5em;
        margin-bottom: 3%;
}

ul {
        font-family: 'avenir_45_bookregular';
        font-size: 0.875em;
        margin-bottom: 2%;
}

h1 {
        font-family: 'romana_btroman';
        font-size: 1.875em;
        color: #8d7952;

        background-image: url(../images/paint-splat.png);
        background-repeat: no-repeat;
        background-position: 0px -8px;
        height: 64px;
        padding-left: 45px;
        margin-left: -45px;
}

h2 {
        font-family: 'great_vibesregular';
        font-size: 3em;
        color: #8d7952;
        margin-bottom: 1%;
}

h3 {
        font-family: 'avenir_45_bookregular';
        font-size: 1.25em;
        font-weight: normal !important;
        margin-bottom: 0 !important;
}


.top-btn {
        display: none;
        position: fixed;
        left: 92%;
        top: 90.125%;

        width: 54px;
        height: 54px;
        background: #695141;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;

        font-family: 'basic_sans_heavy_sfbold';
        font-size: 1.6875em;
        line-height: 54px;
        text-align: center;

        z-index: 999;
}

a.top-link {
        color: #8d7952;
        text-decoration: none;
}

a.top-link:hover {
        color: #4F3D31;
}

div.paint-splat {
        margin-left: -5.5%;
        margin-top: -9.75%;
        position: relative;
        z-index: 0;
}



/* NAVIGATION */
nav {
        display: table;        /* evenly distributed li */
}

nav ul {
        font-family: 'basic_sans_light_sfregular';
        font-size: 1.875em;
        color: #8d7952;

        display: table-row; /* evenly distributed li */
        width: 100%; /* evenly distributed li */
}

nav ul li {
        list-style-type: none;
        display: table-cell; /* evenly distributed li */
        text-align: center; /* evenly distributed li */
}

nav ul li:first-child {
        text-align: left;        /* evenly distributed li */
}

nav ul li:last-child {
        text-align: right; /* evenly distributed li */
}

a#nav-news, a#nav-bio, a#nav-disco, a#nav-contact {
        color: #8d7952;
        text-decoration: none;
}

a#nav-news:hover, a#nav-bio:hover, a#nav-disco:hover, a#nav-contact:hover {
        color: #B35C20;
}


/* NEWS */
.video-wrapper {
        position: relative;
        padding-bottom: 56.25% !important; /* to display 16:9 aspect ratio videos */
        height: 0;

        margin-bottom: 3%;
}

.video-wrapper iframe {
        position: absolute;
        width: 100%;
        height: 100%;
}

.dates {
        font-size: 1.25em;
}

a.content-link {
        color: #efd292;
        text-decoration: none;
        border-bottom: #efd292 thin dashed;
}

a.content-link:hover {
        color: #B35C20;
        border-bottom: #B35C20 thin dashed;
}

/* BIOGRAPHY */
#bio img {
        margin-bottom: 3%;
}

p#author {
        text-align: right;
}

ul#line-up li {
        list-style-type: none;
}

/* DISCOGRAPHY */
#disco p {
        margin-left: 3.42%;
}

ul#first-row li, ul#second-row li {
        display: inline-block;
        text-align: center;
        margin-left: 3.42%;
}

ul#first-row, ul#second-row {
        margin-bottom: 5%;
}

a.album {
        color: #efd292;
        text-decoration: none;
}

a.album:hover {
        color: #648f00;
}

/* CONTACT */
table {
        max-width: 100;
}

.form-labels {
        font-family: 'avenir_85_heavyregular';
        text-transform: uppercase;
        font-size: 0.75em;
}

.form-fields {
        width: 90%;
        height: 3.125em;
        padding: 0 5% 0 5%;
        margin-bottom: 1.25em;
        border: 1px solid #efd292;
        background-color: #000;
        font-family: 'avenir_45_bookregular';
        font-size: 0.875em;
        color: #efd292;
        -webkit-appearance: none;
}

.form-message {
        width: 90%;
        border: 1px solid #efd292;
        background-color: #000;
        margin-bottom: 1.25em;
        padding: 5%;
        font-family: 'avenir_45_bookregular';
        font-size: 0.875em;
        color: #efd292;
        -webkit-appearance: none;
}

.submit {
        width: 25%;
        float: right;
        background-color: #000;
        border: 1px solid #efd292;
        color: #efd292;
        font-family: 'avenir_45_bookregular';
        font-size: 0.875em;
        padding-top: 2%;
        padding-bottom: 2%;
        text-transform: uppercase;
        -webkit-appearance: none;
}

.submit:hover {
        color: #6F6244;
        cursor: pointer;
}

#contact-photo {
        float: left;
        padding-left: 3.42%;
        padding-bottom: 6%;        /* important to create gap at bottom of image after form submission */
}

#contact-container {
        float: left;
        padding-left: 3.42%;
        padding-bottom: 5%;
}

footer {
        clear: both; /* to clear footer from floating over Contact section */
}

/* SOCIAL MEDIA */
#social ul {
        text-align: center;
}

#social ul li {
        list-style-type: none;
        display: inline;
}

#youtube {
        margin: 0 10% 0 10%;
}


/* COPYRIGHT & CREDITS */
#copyright p  {
        font-family: tahoma, verdana, sans-serif;
        font-size: 0.625em;
        text-align: center;
        margin-bottom: 2%;
}

a#forgottenglory {
        color: #efd292;
        text-decoration: none;
        border-bottom: #efd292 thin dashed;
}

a#forgottenglory:hover {
        color: #B35C20;
        border-bottom: #B35C20 thin dashed;
}

/* impressum */
#impressum p  {
        font-family: tahoma, verdana, sans-serif;
        font-size: 0.975em;
        text-align: center;
        margin-bottom: 2%;
}

a#impressum {
        color: #efd292;
        text-decoration: none;
        border-bottom: #efd292 thin dashed;
}

a#impressum:hover {
        color: #B35C20;
        border-bottom: #B35C20 thin dashed;
}




