.hero {
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center;
    background-size: contain, cover;
    background-color: transparent !important;
}

body {
    background-image: url("/external_voodoo/img/artwork.png"), url("/external_voodoo/img/bg_portrait.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, bottom;
    background-size: contain, cover;
}

.navbar-item>.title {
    font-size: 1.5em;
}

.accent-color {
    color: #99242d !important;
}

.hero.is-success .navbar-link.is-active,
.hero.is-success .navbar-link:hover,
.hero.is-success a.navbar-item.is-active,
.hero.is-success a.navbar-item:hover {
    background-color: transparent !important;
}

.accent-font {
    font-family: 'DIN Condensed Bold';
    font-weight: normal;
}

.brand-font {
    font-family: 'Lemon/Milk Regular';
    font-weight: normal;
}

.navbar-menu {
    display: block;
    background-color: transparent !important;
    box-shadow: none;
    text-align: center;
}

.navbar-item {
    display: block !important;
    text-align: center;
}

.navbar-brand {
    display: table;
    margin: 0 auto;
    margin-top: 10px;
}

#headline {
    font-size: 2em;
    text-align: center;
}

.navitem-spacer {
    display: none !important;
}

.navbar-item,
.navbar-link {
    padding: 0 !important;
}

#bottomline1 {
    text-align: center;
    color: white;
    font-size: 1.5em;
    margin-bottom: 0;
}

#bottomline2 {
    font-size: 3em;
    text-align: center;
    color: white;
}

.desktop-headline {
    display: none !important;
    margin-top: 18px;
}

.mobile-headline {
    display: block !important;
}


/* regular desktop */

@media screen and (min-width: 1024px) and (max-width: 1920px) {
    .navbar-brand {
        display: flex;
    }
    .navbar-item {
        display: flex;
    }
    .hero {
        background-image: url("/external_voodoo/img/bg_wide.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }
    #headline {
        text-align: left;
    }
    .hero-foot {
        margin-bottom: 80px;
        margin-right: 3%;
    }
    #bottomline1 {
        font-size: 3.8em;
        text-align: right;
        color: white;
    }
    #bottomline2 {
        font-size: 5.8em;
        text-align: right;
        color: white;
        margin-top: -20px;
    }
    .mobile-headline {
        display: none !important;
    }
    .desktop-headline {
        display: block !important;
    }
    .navitem-spacer {
        display: block !important;
    }
    .navbar-item,
    .navbar-link {
        padding: 0.5rem 0.75rem !important;
    }
}


/* ultrawide desktop */

@media screen and (min-width: 1921px) {
    .navbar-brand {
        display: flex;
    }
    .navbar-item {
        display: flex;
    }
    .navbar-item>.title {
        font-size: 0.8em !important;
    }
    .navbar-social .subtitle {
        font-size: 0.8em !important;
    }
    .navbar-social>a {
        margin-left: 40px !important;
    }
    .hero {
        background-image: url("/external_voodoo/img/bg_wide.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }
    #headline {
        text-align: left;
        font-size: 2em;
    }
    .hero-foot {
        margin-bottom: 80px;
        margin-right: 3%;
    }
    #bottomline1 {
        font-size: 7.8em;
        text-align: right;
        color: white;
    }
    #bottomline2 {
        font-size: 11.8em;
        text-align: right;
        color: white;
        margin-top: -20px;
    }
    .mobile-headline {
        display: none !important;
    }
    .desktop-headline {
        display: block !important;
    }
    .main-header-container {
        max-width: 2440px;
        font-size: 4em;
    }
    .navitem-spacer {
        display: block !important;
    }
    .navbar-item,
    .navbar-link {
        padding: 0.5rem 0.75rem !important;
    }
}

.navbar-social {
    margin-top: 8px;
}

.navbar-social>a {
    margin-left: 16px;
}

@font-face {
    font-family: 'DIN Condensed Bold';
    font-style: normal;
    font-weight: normal;
    src: local('DIN Condensed Bold'), url('/external_voodoo/fonts/DINCondensed-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Lemon/Milk Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Lemon/Milk Regular'), url('/external_voodoo/fonts/LemonMilk.woff') format('woff');
}