@font-face {
  font-family:Ailerons;
  src: url(/css/ailerons-typeface.otf);
}

html {
font-family:Ailerons;
color:white;
scroll-behavior: smooth;
}


h1,h2,h3,h4 {
text-align:center;
font-weight:normal;
text-shadow:0 0 4px #4c8e9e;
}

h1 {
font-size:64px;
margin-top: -18px;
/*margin-bottom: 0;*/
}

h2 {
font-size:48px;
}

h3 {
font-size:32px;
text-align:left;
}

h4 {
font-size:24px;
text-align:left;
}

p {
font-family:'Roboto Slab', serif;
text-shadow: 0 0 4px #4c8e9e;
text-align:justify;
hyphens:auto;
}

a, a:visited, a:hover, a:active {
    color: white;
    text-decoration: none;
}

figure {
margin:0;
}
figure>figcaption {
padding:32px;
}

address {
font-family:'Roboto Slab', serif;
font-style:normal;
line-height:1.6em;
}


body {
background:linear-gradient(rgba(0, 0, 0, 0.4),rgb(11 17 21 / 41%)),url(../img/bg/background-gravity.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
margin:0;
}
html[data-rit-media-state=playing] #playerAnimation {
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
/*  background: hsla(180,0%,50%,0.25);*/
  pointer-events: none;
z-index:-1;
}



body > header {
    /*background: rgba(0,0,0,0.8);
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));*/
    margin-bottom: 2em;
margin-bottom:96px;

position: fixed;
    /*background: linear-gradient(rgb(0 0 0 / 0%),rgb(0 0 0 / 63%)),url(../img/bg/background-gravity.jpg);*/
    background-position: top right;
    z-index: 1000;
    top: 0;
    /*padding-bottom: 32px;*/
/*    box-shadow: 0 0 10px black;*/
/*box-shadow: 0 0 20px #22292e;*/
transition: backdrop-filter ease-in-out 0.3s, box-shadow ease-in-out 0.3s;
/*backdrop-filter: blur(10px) grayscale(1) brightness(0.4);*/
/*backdrop-filter:blur(4px) grayscale(0) brightness(0.8);*/
background:linear-gradient(180deg, #1b2731, transparent);
}

body.minimizeHeader>header {
box-shadow: 0 0 20px black;
box-shadow: 0 0 20px #212121;
backdrop-filter:blur(10px) grayscale(1) brightness(0.4);
}
@supports not ( backdrop-filter:blur(10px) grayscale(1) brightness(0.4) ) {
body.minimizeHeader>header {
background:linear-gradient(180deg, #1b2731, black);
}
}

body > header > a > img {
    display: inline-block;
    box-sizing: border-box;
    border: none;
    margin-bottom: -11px;
}
header > ul {
    margin: 0;
    padding: 0;
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    float: right;
}
header > ul > li {
    list-style: none;
    display: inline-block;
    color: white;
    z-index: 1000;
    position: relative;
    /*color: #a5acb1;
    color: #c2d2db;*/
color:white;
font-family:Ailerons;
/*    font-family: 'Gugi', cursive;*/
    text-shadow: 2px 2px 10px #4c8e9e;
}
header > ul > li:first-child {
}

footer>ul {
text-align: center;
}
footer>ul>li {
list-style: none;
display: inline-block;
margin-right: 2em;
margin-bottom: 1em;
}





aside.social{
position: fixed;
left: 40px;
/*box-shadow: 0 0 50px #f9d85d2b;
background: #f9d85d17;*/
border-radius: 25%;
}

aside.social>a:hover>svg,
aside.social>a:hover>img {
opacity:0.6;
transform:scale(1.1);
box-shadow:0 0 10px white;
}
aside.social>a>img,
aside.social>a>svg {
width:48px;
height:48px;
opacity: 0.15;
transform:none;
transition:opacity ease-in-out 0.2s, transform ease-in-out 0.2s;
}

aside.social>a>svg.round,
aside.social>a>img.round {
border-radius:50%;
}
aside.social>a>svg.yt {
border-radius:30% 30% 30% 30%;
height:34px;
}
aside.social>a>svg.insta {
border-radius:30% 30% 30% 30%;
}


aside.social>a {
display:inline-block;
position:relative;
height:48px;
}
aside.social>a>span {
position: absolute;
left: 48px;
line-height: 48px;
margin-left: 12px;
visibility:hidden;
opacity:0;
transition:opacity ease-in-out 0.2s,transform ease-in-out 0.2s;
white-space: nowrap;
transform: scaleX(0);
transform-origin: left;
}
aside.social>a:hover>span {
visibility:visible;
opacity:0.6;
transform: scaleX(1);
}







main {
max-width:1200px;
margin:0 auto;
/*background:red;*/
}
main.home>section:first-of-type>h2 {
display:none;
}

.news-list {
display:flex;
flex-wrap:wrap;
}
.news-list+p {
text-align:right;
padding-right: 32px;
font-family:Ailerons;
font-size:24px;
margin-top:0;
}

.news-entry {
background:rgba(0,0,0,0.4);
backdrop-filter:blur(3px);
margin-bottom:24px;
padding: 32px;
box-sizing:border-box;
transition:background ease-in-out 0.4s;
position:relative;
}
.news-entry.has-content {
padding-bottom:64px;
cursor:pointer;
}

.news-entry>footer {
padding:32px;
position:absolute;
bottom:0;
right:0;
left:0;
text-align:right;
}


.news-entry>h3 {
margin-top:0;
min-height: calc( 2 * 1.17em );
max-height: calc( 2 * 1.17em );
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
letter-spacing:-0.14em;
}
.news-entry>time {
display: block;
margin-top: 32px;
margin-bottom: 0.4em;
margin-left: 0.2em;
}

.news-entry>figure {
margin: -32px -32px 0 -32px;
}
.news-entry>figure>div {
overflow:hidden;
height:216px;
}
.news-entry>figure img {
background:rgba(255,255,255,0.1);
height:216px;
width:100%;
max-width:100%;
object-fit:cover;
filter: /*sepia(0.4)*/ saturate(0.4) /*grayscale(0.6)*/;
transition:filter ease-in-out 0.4s, transform ease-in-out 0.4s;
}
.news-entry>figure img.contain {
object-fit:contain;
padding: 16px;
box-sizing: border-box;
}

.news-entry:hover {
background:rgba(0,0,0,0.6);
}

.news-entry:hover>figure img {
filter:none;
transform:scale(1.04);
}










.product-list {
display:flex;
flex-wrap:wrap;
}
.product-list+p {
text-align:right;
padding-right: 32px;
font-family:Ailerons;
font-size:24px;
margin-top:0;
}

.product-entry {
background:rgba(0,0,0,0.4);
backdrop-filter:blur(3px);
margin-bottom:24px;
padding: 32px;
box-sizing:border-box;
transition:background ease-in-out 0.4s;
position:relative;
}
.product-entry.has-content {
padding-bottom:64px;
cursor:pointer;
}

.product-entry>footer {
padding:32px;
position:absolute;
bottom:0;
right:0;
left:0;
text-align:right;
}


.product-entry>h3 {
margin-top:0;
min-height: calc( 2 * 1.17em );
max-height: calc( 2 * 1.17em );
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
letter-spacing:-0.14em;
}
.product-entry>time {
display: block;
margin-top: 32px;
margin-bottom: 0.4em;
margin-left: 0.2em;
}

.product-entry>figure {
margin: 0 -32px 0 -32px;
}
.product-entry>figure>div {
overflow:hidden;
height:216px;
}
.product-entry>figure img {
background:rgba(255,255,255,0.1);
height:216px;
width:100%;
max-width:100%;
object-fit:cover;
filter: /*sepia(0.4)*/ saturate(0.4) /*grayscale(0.6)*/;
transition:filter ease-in-out 0.4s, transform ease-in-out 0.4s;
}
.product-entry>figure img.contain {
object-fit:contain;
padding: 16px;
box-sizing: border-box;
}
.product-entry>figure img.contain-top {
padding: 0;
height:unset;
}

.product-entry:hover {
background:rgba(0,0,0,0.6);
}

.product-entry:hover>figure img {
filter:none;
transform:scale(1.04);
}








.two-cols {
display: grid;
grid-auto-columns:1fr;
grid-gap: 32px;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(3px);
}
.two-cols>*:nth-child(2) {
grid-column:2;
padding: 32px;
box-sizing:border-box;
}
.two-cols img {
width:100%;
max-width:100%;
display:block;
}
.two-cols table {
width:100%;
font-size:24px;
letter-spacing:-0.14em;
}

.two-cols-text {
display: grid;
grid-auto-columns: 1fr;
grid-gap: 32px;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(3px);
}
.two-cols-text>* {
padding: 32px;
box-sizing:border-box;
}
.two-cols-text>*:nth-child(2) {
grid-column:2;
}

.two-columns-text {
background: rgba(0,0,0,0.4);
backdrop-filter: blur(3px);
column-count:2;
column-gap:32px;
padding: 32px;
box-sizing:border-box;
}

.four-cols,
.five-cols {
display: grid;
grid-auto-columns:1fr;
grid-gap: 32px;
background:rgba(0,0,0,0.4);
}
.four-cols>*:nth-child(2),
.five-cols>*:nth-child(2)
{
grid-column:2;
}
.four-cols>*:nth-child(3),
.five-cols>*:nth-child(3)
{
grid-column:3;
}
.four-cols>*:nth-child(4),
.five-cols>*:nth-child(4)
{
grid-column:4;
}
.four-cols>*:nth-child(5),
.five-cols>*:nth-child(5)
{
grid-column:5;
}
.four-cols img,
.five-cols img
{
width:100%;
max-width:100%;
}

.band-members-list {
padding-top:32px;
background:none;
}
.band-members-list figcaption {
padding:16px;
}
.band-members-list h3 {
font-size:24px;
margin-top:0;
margin-bottom:0;
letter-spacing:-0.1em;
}
.five-cols.band-members-list img {
filter:saturate(0.4);
transition:filter ease-in-out 0.4s, transform ease-in-out 0.4s;
}
.five-cols.band-members-list figure:hover img {
filter:saturate(1);
}


table.concert-list {
width:100%;
backdrop-filter:blur(3px);
}
table.concert-list td {
vertical-align:top;
padding:32px;
border-bottom:2px solid white;
}
table.concert-list td>*:first-child {
margin:0;
}
table.concert-list td>*:last-child {
margin-bottom:0;
}
table.concert-list tr:last-of-type td {
border:none;
}
table.concert-list tr>td:last-of-type>*:first-child {
margin-top:4px;
}
table.concert-list tr>td:last-of-type>p>a {
vertical-align: middle;
display: inline-block;
}
table.concert-list tr>td:last-of-type>div {
margin-top:1em;
text-align: right;
}
table.concert-list tr.tba>td:last-of-type>* {
opacity:0.4;
}
table.concert-list td>h3 {
letter-spacing: -0.14em;
}
table.concert-list tr {
background:rgba(0,0,0,0.4);
transition: background ease-in-out 0.4s;
}
table.concert-list tr:hover {
background: rgba(0,0,0,0.6);
}



.news-entry dl {
font-style:normal;
text-shadow: 0 0 4px #4c8e9e;
font-family:'Roboto Slab', serif;
}
.news-entry dl>dt,
.news-entry dl>dd {
float:left;
min-width:57px;
}
.news-entry dl>dd+dt {
clear:both;
}



button,
article.album h3>button {
border: none;
margin: 0;
padding: 0;
background: none;
width:24px;
height:24px;
display:block;
cursor:pointer;
background:url(../img/play.svg);
}
article.album h3>button {
width:32px;
height:32px;
margin-top:4px;
float:right;
}
html[data-rit-media-state=playing] article.album h3>button {
display:none;
}


table.album tr.playing button {
background:url(../img/stop.svg);
}


table.album td>a {
/*display:none;*/
font-size:18px;
}

table.album tr.loading {
animation: trackLoading 1s ease-in-out infinite;
}
@keyframes trackLoading {
  0% {background-color: #9a7600;}
  50% {background-color: #9a760050;}
  100% {background-color: #9a7600;}
}
table.album tr:hover, table.album tr.playing {
background-color:#9a7600;
}

table.album tr>td:first-child {
max-width:290px;
}
table.album tr>td:last-child {
text-align:right;
}
table.album tr>td:nth-child(2) {
width:30%;
}
table.album tr>td:nth-child(2)>a {
display:none;
}
table.album tr:hover>td:nth-child(2)>a {
display:inline;
}
table.album tr>td:nth-child(3)>button {
display:none;
}
table.album tr:hover>td:nth-child(3)>button,
table.album tr.playing>td:nth-child(3)>button {
display:block;
}
table.album tr>td:first-child>span {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer;
}
table.album tr:hover>td:first-child>span {
display:block;
padding-right:1em;
}
/*
table.album tr:hover>td>span {
    display: inline-block;
    max-width: 60%;
    min-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;

}
table.album tr:hover>td>a {
display:inline-block;
}
*/



article.two-cols.album h3 {
margin-bottom:0.4em;
}
figure.album-cover{
position:relative;
}
figure.album-cover>canvas{
position: absolute;
    height: 256px;
    width: 100%;
bottom:0;
}




#cookieConsent {
    position: fixed;
    backdrop-filter: blur(10px) grayscale(1) brightness(0.4);
    background: linear-gradient(180deg, transparent, #111c2b);
    box-shadow: 0 0 20px #212121;
    padding: 1em 10em;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    animation: cookieConsentAnimation 10s 1;
    animation-fill-mode: forwards;
    left: 0;
    right: 0;
}
#cookieConsent p {
margin:1em 0 2em 0;
}
#cookieConsent>a {
border:1px solid white;
}
@supports not ( backdrop-filter: blur(10px) grayscale(1) brightness(0.4) ) {
#cookieConsent {
background:linear-gradient(180deg, black, #111c2b);
}
}

@keyframes cookieConsentAnimation {
    0% {
        opacity: 0;
        bottom: -200px;
    }

    50% {
        opacity: 0;
        bottom: -200px;
    }

    100% {
        opacity: 0.9;
        bottom: 0;
    }
}

#cookieConsent > p {
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
}

#cookieConsent > a {
    /*background: #275f46;
    border-radius: 1em;*/
    padding: 0.5em 4em;
}

#section-contact>div.news-list>article.news-entry>dl {
display:inline-block;
}



/* HEADER */
@media only screen and (max-width: 1244px), only screen and (max-device-width: 1244px) {
main {
margin-top:148px;
}
body > header > a > img {
    width: 460px;
    margin-top: 26px;
}
/*
body > header {
width:100%;
    padding-left: 12px;
    padding-right: 12px;
box-sizing:border-box;
}
*/
body > header {
max-width:920px;
margin:0 auto;
    width: 920px;
    padding-left: calc( (100% - 920px) / 2);
    padding-right: calc( (100% - 920px) / 2);
}
header > ul {
    font-size: 26px;
    margin-top: 42px;
}
header > ul > li {
    margin-left: 0.5em;
}
aside.social {
top: 148px;
}

}

/* HEADER */
@media only screen and (min-width: 1245px) {
main {
margin-top:196px;
}

body > header > a > img {
    width: 56%;
    margin-top: 30px;
}
body > header {
max-width:1200px;
margin:0 auto;
    width: 1200px;
    padding-left: calc( (100% - 1200px) / 2);
    padding-right: calc( (100% - 1200px) / 2);
}
header > ul {
    font-size: 28px;
    margin-top: 66px;
}
header > ul > li {
    margin-left: 0.7em;
}
aside.social {
top: 196px;
}

}




@media only screen and (max-width: 1435px), only screen and (max-device-width: 1435px) {
aside.social {
left:12px;
}
}



@media only screen and (min-width:640px) and (max-width: 1359px), only screen and (min-width:640px) and (max-device-width: 1359px) {

main {
max-width:792px;
}

.news-entry {
width: calc( ( 100% - ( 2 * 12px ) ) / 2 );
}
.news-entry:nth-child(2n+1) {
margin-right:12px;
}
.news-entry:nth-child(2n+2) {
margin-left:12px;
}

.product-entry {
width: calc( ( 100% - ( 3 * 16px ) ) / 3 );
}
.product-entry:nth-child(3n+1) {
margin-right:16px;
}
.product-entry:nth-child(3n+2) {
margin-right:8px;
margin-left:8px;
}
.product-entry:nth-child(3n+3) {
margin-left:16px;
}

.four-cols>*:nth-child(3),
.five-cols>*:nth-child(3)
{
grid-row:2;
grid-column:1;
}
.four-cols>*:nth-child(4),
.five-cols>*:nth-child(4)
{
grid-row:2;
grid-column:2;
}
.five-cols>*:nth-child(5)
{
grid-row:3;
grid-column:1;
}

}

@media only screen and (max-width: 639px), only screen and (max-device-width: 639px) {
.news-entry,
.product-entry {
width:100%;
}

table.concert-list {
display:grid;
}
table.concert-list tr {
display:grid;
}
table.concert-list tr>td {
display:block;
border-bottom:none;
padding-bottom:0;
}
table.concert-list tr>td:last-child {
border-bottom: 2px solid white;
padding-bottom:32px;
}
table.concert-list tr:last-child>td:last-child {
border-bottom: none;
}

.four-cols>*:nth-child(2),
.five-cols>*:nth-child(2)
{
grid-row:2;
grid-column:1;
}
.four-cols>*:nth-child(3),
.five-cols>*:nth-child(3)
{
grid-row:3;
grid-column:1;
}
.four-cols>*:nth-child(4),
.five-cols>*:nth-child(4)
{
grid-row:4;
grid-column:1;
}
.five-cols>*:nth-child(5)
{
grid-row:5;
grid-column:1;
}

}


@media only screen and (max-width: 1359px), only screen and (max-device-width: 1359px) {
.two-cols,
.two-cols-text {
display:block;
}
.two-columns-text {
column-count:1;
}
}

@media only screen and (min-width: 1360px) {

.news-entry {
width: calc( ( 100% - ( 3 * 16px ) ) / 3 );
}
.news-entry:nth-child(3n+1) {
margin-right:16px;
}
.news-entry:nth-child(3n+2) {
margin-left:8px;
margin-right:8px;
}
.news-entry:nth-child(3n+3) {
margin-left:16px;
}

.product-entry {
width: calc( ( 100% - ( 4 * 18px ) ) / 4 );
}
.product-entry:nth-child(4n+1) {
margin-right:18px;
}
.product-entry:nth-child(4n+2) {
margin-right:12px;
margin-left:6px;
}
.product-entry:nth-child(4n+3) {
margin-left:12px;
margin-right:6px;
}
.product-entry:nth-child(4n+4) {
margin-left:18px;
}

}



@media only screen and (max-width: 959px), only screen and (max-device-width: 959px) {

    body {
        margin-top: 60px;
        padding-left: 15px;
        padding-right: 15px;
    }

        body > header {
            height: 42px;
            position: fixed;
            display: block;
            width: 100%;
            top: 0;
            max-width: 1280px;
            /*background:linear-gradient(180deg, #2d3d33, black);*/
            box-shadow: 0 0 20px #212121;
            margin-left: -40px;
            z-index: 2000;
            left: 0;
            right: 0;
            margin: 0;
        }
	body.minimizeHeader > header {
            background:linear-gradient(180deg, #2d3d33, black);
	}

            body > header > a > img {
                width: 320px;
                margin-top: 9px;
                float: left;
                margin-left: 15px;
	        z-index: 6000;
                position: relative;
            }

            body > header > ul {
                display: none;
                width: 100%;
                background: black;
                margin-top: -4px;
                text-align: right;
                padding: 0.5em 0;
            }

main {
margin-top:60px;
}

    #cookieConsent {
        left: 0;
        right: 0;
        margin: 0;
        padding: 1em 2em;
    }

    html.showMenu > body > header > ul {
        display: block;
background:linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 75%, rgba(0,0,0,0.8) 100%);
    }

    body > header > ul > li:first-child {
        margin-left: 0;
    }

    body > header > ul > li {
        margin-left: 0;
        display: block;
        padding: 10px 15px;
        width: 100%;
        box-sizing: border-box;
    }

    a#menuSelector {
        float: right;
        margin-right: 15px;
        margin-top: 16px;
    }
html:not(.showMenu) aside.social {
display:none;
}
aside.social{
width: calc( 2 * 48px + 12px );
top: 68px;
z-index:4000;
}
aside.social>a {
margin-bottom:12px;
}
aside.social>a:hover>span {
visibility:hidden;
}

table.album tr>td:first-child {
max-width:200px;
}
table.album tr>td:first-child>span {
    display: block;
    padding-right: 1em;
}

    *[data-rit-rwd-hide=mobile] {
        display: none;
    }

}

@media only screen and (min-width: 960px) {
    *[data-rit-rwd-hide=desktop] {
        display: none;
    }

aside.social{
width: 48px;
}
aside.social>a {
margin-bottom:24px;
}
}

@media only screen and (max-width: 389px), only screen and (max-device-width: 389px) {
            body > header > a > img {
                width: 300px;
                margin-top: 11px;
	    }
}

@media only screen and (max-width: 369px), only screen and (max-device-width: 369px) {
            body > header > a > img {
                width: 254px;
                margin-top: 15px;
	    }
}