@charset "UTF-8";
/*

1rem  = 16px
30rem = 480px
56rem = 896px

*/
/*

██████╗ ███████╗███████╗███████╗████████╗       ██╗
██╔══██╗██╔════╝██╔════╝██╔════╝╚══██╔══╝       ██║
██████╔╝█████╗  ███████╗█████╗     ██║       ████████╗
██╔══██╗██╔══╝  ╚════██║██╔══╝     ██║       ██╔═██╔═╝
██║  ██║███████╗███████║███████╗   ██║       ██████║
╚═╝  ╚═╝╚══════╝╚══════╝╚══════╝   ╚═╝       ╚═════╝

███╗   ██╗ ██████╗ ██████╗ ███╗   ███╗ █████╗ ██╗     ██╗███████╗ █████╗ ████████╗██╗ ██████╗ ███╗   ██╗
████╗  ██║██╔═══██╗██╔══██╗████╗ ████║██╔══██╗██║     ██║╚══███╔╝██╔══██╗╚══██╔══╝██║██╔═══██╗████╗  ██║
██╔██╗ ██║██║   ██║██████╔╝██╔████╔██║███████║██║     ██║  ███╔╝ ███████║   ██║   ██║██║   ██║██╔██╗ ██║
██║╚██╗██║██║   ██║██╔══██╗██║╚██╔╝██║██╔══██║██║     ██║ ███╔╝  ██╔══██║   ██║   ██║██║   ██║██║╚██╗██║
██║ ╚████║╚██████╔╝██║  ██║██║ ╚═╝ ██║██║  ██║███████╗██║███████╗██║  ██║   ██║   ██║╚██████╔╝██║ ╚████║
╚═╝  ╚═══╝ ╚═════╝ ╚═╝  ╚═╝╚═╝     ╚═╝╚═╝  ╚═╝╚══════╝╚═╝╚══════╝╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝

*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    list-style: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    /* Add correct display for IE 9- and some newer browsers */
    display: block;
}
::-moz-selection {
    background: #1fff21;
    color: #263578;
}
::selection {
    background: #1fff21;
    color: #263578;
}
/*

████████╗██╗   ██╗██████╗  ██████╗  ██████╗ ██████╗  █████╗ ██████╗ ██╗  ██╗██╗   ██╗
╚══██╔══╝╚██╗ ██╔╝██╔══██╗██╔═══██╗██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║  ██║╚██╗ ██╔╝
   ██║    ╚████╔╝ ██████╔╝██║   ██║██║  ███╗██████╔╝███████║██████╔╝███████║ ╚████╔╝
   ██║     ╚██╔╝  ██╔═══╝ ██║   ██║██║   ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║  ╚██╔╝
   ██║      ██║   ██║     ╚██████╔╝╚██████╔╝██║  ██║██║  ██║██║     ██║  ██║   ██║
   ╚═╝      ╚═╝   ╚═╝      ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝   ╚═╝


*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
pre {
    /* Reset font-sizes and normalize margins */
    font-size: inherit;
    line-height: 1.25rem;
}
/* Headings */
h1,
h2,
h3 {
    font-family: Courier, monospace;
    font-weight: 400;
}
h1 {
    text-align: left;
    margin-bottom: 1rem;
}
h2 {
    font-size: 1.75rem;
    line-height: 2.2rem;
    text-align: left;
}
h3 {
    font-size: 1.25em;
    line-height: 1.2;
}
h4 {
    font-size: 1em;
}
/* Links */
a {
    color: inherit;
    text-decoration: none;
    border-bottom: 3px solid #156d17;
}
a:hover {
    color: inherit;
}
@media all and (min-width: 1200px) {
    a:hover {
        color: #ff0000;
    }
}
a:active {
    color: #1fff21;
}
a2 {
    color: inherit;
    text-decoration: none;
    border-bottom: 0px;
}
a:hover {
    color: inherit;
}
@media all and (min-width: 1200px) {
    a:hover {
        color: #ff0000;
    }
}
a:active {
    color: #1fff21;
}
/*

███╗   ███╗██╗███████╗ ██████╗
████╗ ████║██║██╔════╝██╔════╝
██╔████╔██║██║███████╗██║
██║╚██╔╝██║██║╚════██║██║
██║ ╚═╝ ██║██║███████║╚██████╗
╚═╝     ╚═╝╚═╝╚══════╝ ╚═════╝


*/
b,
strong {
    font-weight: 700;
}
/*

██╗███╗   ███╗ █████╗  ██████╗ ███████╗███████╗
██║████╗ ████║██╔══██╗██╔════╝ ██╔════╝██╔════╝
██║██╔████╔██║███████║██║  ███╗█████╗  ███████╗
██║██║╚██╔╝██║██╔══██║██║   ██║██╔══╝  ╚════██║
██║██║ ╚═╝ ██║██║  ██║╚██████╔╝███████╗███████║
╚═╝╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚══════╝


*/
img {
    border-style: none;
    width: 100%;
    height: auto;
}
/*

██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗   ██╗
██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║
██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║
██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║
██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║
╚═════╝  ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝


*/
.btn {
    display: inline-block;
    border: 2px solid;
    padding: .6em .75em;
    white-space: nowrap;
    font-size: .75em;
    font-family: Courier, monospace;
    line-height: 1;
    font-weight: 400;
}
.btn:hover,
.btn:focus {
    background: #263578;
    border-color: #263578;
    color: #1fff21;
}
.btn:active {
    background: #26ff28;
    border-color: #26ff28;
}
/*

 ██████╗ ██████╗ ██╗██████╗        ██╗       ██╗      █████╗ ██╗   ██╗ ██████╗ ██╗   ██╗████████╗
██╔════╝ ██╔══██╗██║██╔══██╗       ██║       ██║     ██╔══██╗╚██╗ ██╔╝██╔═══██╗██║   ██║╚══██╔══╝
██║  ███╗██████╔╝██║██║  ██║    ████████╗    ██║     ███████║ ╚████╔╝ ██║   ██║██║   ██║   ██║
██║   ██║██╔══██╗██║██║  ██║    ██╔═██╔═╝    ██║     ██╔══██║  ╚██╔╝  ██║   ██║██║   ██║   ██║
╚██████╔╝██║  ██║██║██████╔╝    ██████║      ███████╗██║  ██║   ██║   ╚██████╔╝╚██████╔╝   ██║
 ╚═════╝ ╚═╝  ╚═╝╚═╝╚═════╝     ╚═════╝      ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚═════╝  ╚═════╝    ╚═╝

*/
.grid {
    font-size: 0;
}
.column {
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 1rem;
    vertical-align: top;
}

.column-flyers {
    position: relative;
    display: inline-block;
    width: 60px;
    font-size: 1rem;
    height: 60px;
}
.wrap {
    box-sizing: content-box;
}
/* The Clearfix™: A classic … */
.cf::after {
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}
/*

███████╗██╗████████╗███████╗    ██╗      █████╗ ██╗   ██╗ ██████╗ ██╗   ██╗████████╗
██╔════╝██║╚══██╔══╝██╔════╝    ██║     ██╔══██╗╚██╗ ██╔╝██╔═══██╗██║   ██║╚══██╔══╝
███████╗██║   ██║   █████╗      ██║     ███████║ ╚████╔╝ ██║   ██║██║   ██║   ██║
╚════██║██║   ██║   ██╔══╝      ██║     ██╔══██║  ╚██╔╝  ██║   ██║██║   ██║   ██║
███████║██║   ██║   ███████╗    ███████╗██║  ██║   ██║   ╚██████╔╝╚██████╔╝   ██║
╚══════╝╚═╝   ╚═╝   ╚══════╝    ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚═════╝  ╚═════╝    ╚═╝

*/
html {
    background: blue;
    color: #1fff21;
    font: normal 400 1.2em/1.4 "Courier", monospace;
    /* Always show the vertical scrollbar to prevent `jumps`
       of page content after navigating from a very short page
       that does not scroll to a long pager */
    overflow-y: scroll;
    /* Setting this to `default` prevents the cursors from
       changing when hovering blocks of text or whitespace,
       which is less distracting */
    cursor: default;
    /* Neccessary for sticks footer. */
    position: relative;
    min-height: 100%;
    /* Prevent adjustments of font size after orientation
       changes in IE and iOS. */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* Highlight color for WebKit-bases touch devices. */
    -webkit-tap-highlight-color: rgba(113, 239, 172, 0.5);
}
@media all and (max-width: 30em) {
    html {
        /* We decrease the font-size a little-bit for tiny
           screens. Because this stylesheet uses relative units
           everywhere, everything scales nicely. */
        font-size: 1.25em;
    }
}
body {
    overflow: hidden;
}
/*

Flyers  ██╗  ██╗███████╗ █████╗ ██████╗ ███████╗██████╗
Flyers  ██║  ██║██╔════╝██╔══██╗██╔══██╗██╔════╝██╔══██╗
Flyers  ███████║█████╗  ███████║██║  ██║█████╗  ██████╔╝
Flyers  ██╔══██║██╔══╝  ██╔══██║██║  ██║██╔══╝  ██╔══██╗
Flyers  ██║  ██║███████╗██║  ██║██████╔╝███████╗██║  ██║
Flyers  ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═════╝ ╚══════╝╚═╝  ╚═╝

*/
.header-flyers {
    padding-bottom: 0rem;
    margin-left: 60px;
    margin-top: 20px;
}

.header-font{
    width: 600px;
}
.flyerhead img {
    width: auto;
    height: 110px;
}
/*

██╗  ██╗███████╗ █████╗ ██████╗ ███████╗██████╗
██║  ██║██╔════╝██╔══██╗██╔══██╗██╔════╝██╔══██╗
███████║█████╗  ███████║██║  ██║█████╗  ██████╔╝
██╔══██║██╔══╝  ██╔══██║██║  ██║██╔══╝  ██╔══██╗
██║  ██║███████╗██║  ██║██████╔╝███████╗██║  ██║
╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═════╝ ╚══════╝╚═╝  ╚═╝

*/
.header {
    padding-bottom: 1.5rem;
}
.dankhead a {
    border-bottom: 0;
}
@media all and (min-width: 896px) {
    .dankhead {
        line-height: 3rem;
        white-space: nowrap;
        text-align: left;
    }
    .dankhead,
    .navigation {
        vertical-align: baseline;
    }
}
#header-desktop {
    display: none;
}
@media all and (min-width: 1200px) {
    #header-desktop {
        display: block;
        margin-bottom: 28px;
    }
}
#header-mobile {
    display: block;
    margin-bottom: 40px;
}
@media all and (min-width: 1200px) {
    #header-mobile {
        display: none;
    }
}
/*

███╗   ███╗███████╗███╗   ██╗██╗   ██╗
████╗ ████║██╔════╝████╗  ██║██║   ██║
██╔████╔██║█████╗  ██╔██╗ ██║██║   ██║
██║╚██╔╝██║██╔══╝  ██║╚██╗██║██║   ██║
██║ ╚═╝ ██║███████╗██║ ╚████║╚██████╔╝
╚═╝     ╚═╝╚══════╝╚═╝  ╚═══╝ ╚═════╝


*/
.menu {
    text-align: left;
}
.menu-item {
    display: inline-block;
}
.menu-item a {
    border-bottom: 0;
}
.menu-item.is-active a {
    border-bottom: 2px solid #1fff21;
}
@media all and (min-width: 896px) {
    .menu {
        text-align: left;
    }
}
/*

███╗   ███╗ █████╗ ██╗███╗   ██╗     ██████╗ ██████╗ ███╗   ██╗████████╗███████╗███╗   ██╗████████╗
████╗ ████║██╔══██╗██║████╗  ██║    ██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝████╗  ██║╚══██╔══╝
██╔████╔██║███████║██║██╔██╗ ██║    ██║     ██║   ██║██╔██╗ ██║   ██║   █████╗  ██╔██╗ ██║   ██║
██║╚██╔╝██║██╔══██║██║██║╚██╗██║    ██║     ██║   ██║██║╚██╗██║   ██║   ██╔══╝  ██║╚██╗██║   ██║
██║ ╚═╝ ██║██║  ██║██║██║ ╚████║    ╚██████╗╚██████╔╝██║ ╚████║   ██║   ███████╗██║ ╚████║   ██║
╚═╝     ╚═╝╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝     ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝╚═╝  ╚═══╝   ╚═╝


*/
.main {
    width: 100%;
}
/*

██████╗  █████╗ ███╗   ██╗██╗  ██╗ ██████╗  █████╗ ████████╗███████╗
██╔══██╗██╔══██╗████╗  ██║██║ ██╔╝██╔════╝ ██╔══██╗╚══██╔══╝██╔════╝
██║  ██║███████║██╔██╗ ██║█████╔╝ ██║  ███╗███████║   ██║   █████╗
██║  ██║██╔══██║██║╚██╗██║██╔═██╗ ██║   ██║██╔══██║   ██║   ██╔══╝
██████╔╝██║  ██║██║ ╚████║██║  ██╗╚██████╔╝██║  ██║   ██║   ███████╗
╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝   ╚══════╝

*/
.checkbox_class {
    display: inline-block;
    padding-bottom: 8px;
}
.checkbox_class a {
    outline: 0;
}
@media all and (min-width: 896px) {
    .checkbox_class {
        padding-bottom: 0;
    }
}
.checkbox_class input {
    margin-right: 8px;
}
.checkbox_group {
    padding-bottom: 10px;
}
#log {
    height: 100px;
    width: 100px;
    background: blue;
}
.underlineDank {
    display: inline-block;
    border-bottom: 1px solid #156d17;
}
#releaseInfo {
    margin-top: 30px;
}
#youtubeVideo {
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}
#youtubeVideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#soundcloud {
    margin-bottom: 20px;
    position: relative;
    /* 16:9 */
    padding-top: 25px;
}
#soundcloud iframe {
    width: 100%;
}
.allTracks {
    position: relative;
    line-height: 1.2em;
    padding-bottom: 15px;
}
.allTracks a {
    outline: 0;
}
@media all and (min-width: 1200px) {
    .allTracks a:focus,
    .allTracks a:active {
        background-color: black;
    }
}
.allTracks span {
    font-size: 16px;
    color: grey;
}

#albumCompilations {
    margin-bottom: 30px;
    padding: inherit !important;
}

#albumCompilations ol {
    padding: 0 0 0 38px !important;
}

#albumCompilations ol li {
    list-style: hangul-consonant;
}
.flexbox-container {
    display: flex;
}
.flexbox-filterzone {
    flex-basis: 33%;
}
#flexbox-contentzone {
    flex-basis: 100%;
}
@media all and (min-width: 1200px) {
    #flexbox-contentzone {
        flex-basis: 67%;
        overflow-y: auto;
        height: 100vh;
    }
}
#flexbox-contentzone-container {
    margin-top: 0;
}
@media all and (min-width: 1200px) {
    #flexbox-contentzone-container {
        flex-basis: 100%;
        margin-top: 137px;
    }
}
.flexbox-filterzone,
#flexbox-contentzone {
    padding: 20px;
}
@media all and (min-width: 1200px) {
    .flexbox-filterzone,
    #flexbox-contentzone {
        overflow-y: auto;
        max-height: 100vh;
    }
}
#trackFilter,
#trackContent {
    display: none;
}
@media all and (min-width: 1200px) {
    #trackFilter,
    #trackContent {
        display: block;
    }
}
#trackContent {
    flex-basis: 100%;
}
@media all and (min-width: 1200px) {
    #trackContent {
        flex-basis: 50%;
    }
}
@media all and (min-width: 1200px) {
    #trackFilter {
        overflow-y: auto;
        max-height: 100vh;
    }
}
#trackFilter > #filterReset {
    display: none;
}
@media all and (min-width: 1200px) {
    #trackFilter > #filterReset {
        display: block;
    }
}
#trackListe {
    flex-basis: 100%;
    padding-right: 20px;
}
@media all and (min-width: 1200px) {
    #trackListe {
        flex-basis: 50%;
        padding-right: 0;
    }
}
@media all and (max-width: 1200px) {
    .mobiletrackload #trackContent {
        display: block;
    }
    .mobiletrackload #trackListe {
        display: none;
    }
}
#mobileFilterContainer,
#mobileFilter,
#filterReset {
    display: inline-block;
    position: fixed;
    right: 20px;
}
@media all and (min-width: 896px) {
    #mobileFilterContainer,
    #mobileFilter,
    #filterReset {
        right: 40px;
    }
}
#mobileFilterContainer {
    z-index: 11;
    top: 20px;
    text-align: right;
}
@media all and (min-width: 896px) {
    #mobileFilterContainer {
        top: 40px;
    }
}
@media all and (min-width: 1200px) {
    #mobileFilterContainer {
        display: none;
    }
}
#mobileFilter {
    background-color: blue;
}
.thisIsATrackPage #mobileFilter {
    display: none;
}
.mob-filter-open {
    display: block;
    background-color: black;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    transition: height 2s;
    overflow-y: scroll;
}
.mob-track-open {
    background: black;
    padding: 10px;
    margin-bottom: 8px;
}
.absuge {
    color: gray;
}
#copylink {
    font-family: inherit;
    font-size: 14px;
    color: #1fff21;
    line-height: inherit;
    margin: 10px 0;
    padding: 6px;
    width: 100%;
    background: transparent;
    border: 1px solid  #1fff21;
}
#filterReset {
    top: 5rem;
}
#filterResetDesktop {
    display: none;
}
@media all and (min-width: 1200px) {
    #filterResetDesktop {
        display: inline-block;
        cursor: pointer;
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
        user-select: none; /* Standard */
    }
}
.trackContentMobile {
    margin-top: 20px;
}
@media all and (min-width: 1200px) {
    .trackContentMobile {
        display: none;
    }
}
/*verbirgt .wrap > header und verhindert somit doppelte titel*/
.trackContentMobile header {
    display: none;
}
@media all and (min-width: 1200px) {
    .trackContentMobile header {
        display: inline-block;
    }
}
#mobileGetHome {
    display: none;
    margin: 40px 0;
    background-color: black;
}
#mobileGetHome:hover {
    background-color: red;
}
.mobiletrackload #mobileGetHome {
    display: inline-block;
}
@media all and (min-width: 1200px) {
    .mobiletrackload #mobileGetHome {
        display: none;
    }
}
.dankhead img {
    width: 80px;
    height: auto;
}
.icon-filter-mob-open,
.icon-filter-mob-close {
    font-style: normal;
}
.icon-filter-mob-open:before {
    content: "Filter 🎛";
}
.icon-filter-mob-close:before {
    content: "Apply Filter 💀";
}
.mobile-close-content-button:before {
    display: inline-block;
    position: absolute;
    right: 10px;
    content: "❌️";
}
@media all and (min-width: 1200px) {
    .mobile-close-content-button:before {
        display: none;
    }
}

#about {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 500;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#about-content {
    position: relative;
    min-height: 80vh;
    min-width: 80vw;
    background-color: blue;
    padding: 50px;
}

#about-toggle {
    cursor: pointer;
}

#about-close {
    position: absolute;
    top: 50px;
    right: 50px;
    cursor: pointer;
    background-color: blue;
}

#about-close:hover {
    background-color: blue;
}

.about-unvisible {
    display: none !important;
}

/*

██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗   ██╗
██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║
██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║
██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║
██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║
╚═════╝  ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝

*/
.dankButtons {
    border: 1px solid #1fff21;
    padding: 7px 10px 3px 10px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}
.dankButtons a {
    border-bottom: 0;
}
.dankButtons:hover {
    background-color: red;
}
/*

███████╗██╗  ██╗   ██╗███████╗██████╗ ███████╗
██╔════╝██║  ╚██╗ ██╔╝██╔════╝██╔══██╗██╔════╝
█████╗  ██║   ╚████╔╝ █████╗  ██████╔╝███████╗
██╔══╝  ██║    ╚██╔╝  ██╔══╝  ██╔══██╗╚════██║
██║     ███████╗██║   ███████╗██║  ██║███████║
╚═╝     ╚══════╝╚═╝   ╚══════╝╚═╝  ╚═╝╚══════╝


*/
.flyers-blue {
    background-color: blue;
}
.dankgallery {
    width: 50%;
}
.dankgallery figure {
    /* outline: 1px solid #1fff21; */
    margin-bottom: 20px;
    margin-left: 150px;
}
.cocoon {
    background-color: violet (225, 0, 255);
}