/* Background: #222222 */
/* Foreground: #ffffff */
/* Accent: #e34c00 */

/* Fonts */

/* .woff: Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
/* woff2: Chrome 26+, Opera 23+, Firefox 39+ */

/* noto-sans-regular - latin */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('../fonts/noto-sans-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/noto-sans-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-700 - latin */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('../fonts/noto-sans-v11-latin-700.woff2') format('woff2'),
    url('../fonts/noto-sans-v11-latin-700.woff') format('woff');
}

/* Reset */

* {
    border-radius: 0 !important;
}

html, body {
    color: #ffffff;
    overflow-x: hidden;
    font-family: 'Noto Sans', sans-serif;!important;
}

/* Global */

ul {
    list-style-type: none;
    padding-left: 0;
}

.modal {
    color: #000000 !important;
}

.bg-alpha {
    background: rgba(0, 0, 0, 0.3) !important;
}

.fg-accent {
    color: #e34c00;
}

/* Links */

a {
    text-decoration: none;
    color: #e34c00;
    background: none;
}

a:hover {
    color: #e34c00;
    cursor: pointer;
}

/* Headlines */

h2, h3, h4, h5 {
    font-variant: small-caps;
    width: 100%;
}

.section h2, .section h3, .section h4, .section h5 {
    text-align: center;
    border-bottom: .5rem #333333 dotted;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* Sections */

.section {
    margin: 2rem auto;
    padding: 2rem;
    line-height: 3rem;
}

/* Background image */

#backgroundImage {
    background-image: url('../media/images/background.static.jpg');
    filter: brightness(50%);
    background-position-x: center;
    background-size: cover;
    bottom: 0;
    min-height: 100%;
    min-width: 100%;
    position: fixed;
    right: 0;
    z-index: -2;
}

/* Heading */

#heading {
    font-variant: small-caps;
    padding: 0.7rem;
}

#heading #signature {
    letter-spacing: .4rem;
    line-height: 0.6rem;
    margin-top: 1.5rem;
    padding: 0.7rem;
}

#heading #title {
    display: block;
    max-width: 100px;
}

#heading #subtitle {
    display: block;
    font-size: 0.5rem;
    position: relative;
    top: 1rem;
}

/* Intro Video */

#introVideo {
    padding: 3rem 0;
}

#introVideo video {
    border: none;
}

/* Contact Bar */

#contactBar svg {
    margin: 3rem 0;
    font-size: 5rem;
}

/* Featured */

#featured a.social {
    color: #e34c00;
    line-height: 4rem;
}

#featured a.social:hover {
    font-size: 1.25rem;
}

#featured .artist {
    font-variant: small-caps;
    font-size: 1.5rem;
}

/* Footer */

#footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#footer a.footer-item {
    color: #ffffff;
    text-decoration: none;
    line-height: 3rem;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    border: 1px transparent solid;
}

#footer a.footer-item:hover {
    color: #000000;
    background: #ffffff;
    border: #ffffff 1px solid;
}

#footer li {
    font-size: 1rem;
}

/* Copyright */

#copyright {
    font-size: 0.8rem;
    font-variant: small-caps;
    padding: 2rem;
    color: #777777;
}

/* Back To Top */

#backToTop {
    width: 100%;
    cursor: pointer;
    padding: .05rem;
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, .8);
    border-top: 1px inset #ffffff;
    z-index: 2;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#backToTop:hover {
    background: rgba(255, 255, 255, .8);
    color: #000000
}