@charset "utf-8";
/* CSS Document ©2026 by daroc */
/* Thank you for looking at this code ;-) */ 


/* puritan-regular - latin */
@font-face {
	font-display: swap;
  	font-family: 'PuritanFont';
  	font-style: normal;
  	font-weight: 400;
  	src: url('../fonts/puritan-v11-latin-regular.woff2') format('woff2'),
}

/* puritan-700 - latin */
@font-face {
	font-display: swap;
	font-family: 'PuritanFont';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/puritan-v11-latin-700.woff2') format('woff2'),
}

/* Boycott - latin */
@font-face {
	font-display: swap;
  	font-family: 'BoycottFont';
  	font-style: normal;
  	font-weight: normal;
  	src: url('../fonts/boycott-font.woff2') format('woff2'), 
}


html, body{
	background-color: #202020; background-image: url(../images/2026-bg.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top; color: #888; font-family: 'PuritanFont', sans-serif; font-style: normal; font-weight: 400; font-size: 1em; letter-spacing: 0.02em; line-height: 1.2em; margin: 0; padding: 0; width: 100%; }
a{
	outline: none; }
a:link,
a:visited{
	color: #b32f03; text-decoration: underline; transition: color 0.5s ease-in-out; }
a:hover,
a:active{
	color: #5e3021; text-decoration: underline; }

a.button:link,
a.button:visited{
	background-color: #202020; border: 1px solid #b32f03; display: inline-block; font-family: 'PuritanFont', sans-serif; font-style: normal; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; text-decoration: none; text-transform: uppercase; transition: all 0.5s ease-in-out; width: 100px; }
a.button:hover,
a.button:active{
	background-color: #292728; text-transform: uppercase; }

a.socialmedia{
	display: inline-block; margin: 0; padding: 0; width: 50px; }
a.partnermedia{
	display: inline-block; margin: 0; padding: 0; width: 250px; }
a.socialmedia img,
a.partnermedia img{
	display: block; height: auto; width: 100%; transition: all 0.5s ease-in-out; }
a.socialmedia img:hover,
a.partnermedia img:hover{
	filter: invert(65%); }

a.no-js{
	display: block; position: relative; top: -210px; visibility: hidden; }

hr.news-hr{
	background: url(../images/2026_mnemocide_logo_skull.png) no-repeat scroll center; background-size: 1280px 50px; height: 50px; border: none; color: #888; padding: 20px; }

header{
	background-image: url(../images/2026-bg.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top; height: auto; padding: 0; position: fixed; top: 0; left: 0; width: 100vw; z-index: 1000; }
div#innerheader{
	margin: 0 auto; padding: 0 2%; width: 96%; max-width: 1920px; }
div#logoheader{
    background-image: url("../images/2026-logo_mnemocide.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: center; background-clip: border-box; background-origin: content-box; background-size: contain; box-sizing: border-box; clear: both; height: 150px; padding: 10px; position: relative; width: 100%; }

nav.pushmenu-nav{ 
	/*box-shadow: 0px 30px 30px -10px rgba(32,32,32,0.9);*/ height: 50px; line-height: 50px; margin: 0; padding: 0; position: relative; text-align: center; width: 100%; }
div#moblist{
	display: none; height: 40px; position: absolute; left: 2%; top: 10px; width: 40px; }
a#mobNavi{ 
	display: block; background-image: url(../images/2026_navicon.png); background-repeat: no-repeat; background-attachment: scroll; background-position: center; background-clip: border-box; background-origin: padding-box; background-size: cover; border: 0; box-sizing: border-box; height: 40px; line-height: 40px; margin: 0; outline: 0; text-decoration: none; text-align: center; width: 40px; }
ul.navbar-list { 
	display: block; height: 50px; margin: 0; padding: 0; }
ul.navbar-list li.navbar-item { 
	display: inline-block; font-family: 'PuritanFont', sans-serif; font-style: normal; font-size: 16px; font-weight: 700; padding: 0; padding-left: 20px; text-align: center; }
ul.navbar-list li.navbar-item:first-child{ 
	padding-left: 0; }
ul.navbar-list li.navbar-item a:link,
ul.navbar-list li.navbar-item a:visited{
	color: #b32f03; display: block; font-weight: 700; height: 39px; margin: 0; outline: none; position: relative; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: color 0.5s ease-in-out; }
ul.navbar-list li.navbar-item a:hover,
ul.navbar-list li.navbar-item a:active{
	color: #5e3021; }

div#container{
    box-sizing: border-box; height: auto; margin: 0 auto; padding: 0; position: relative; width: 100%; }

div.uppertable{
	display: table; width: 100%; }
div.tableclass{
	display: table-row; height: 100%; box-shadow: 0px 3px 10px -2px rgba(179, 47, 3,0.3); }

section#introduction{
	box-sizing: border-box; height: 100vh; margin: 0; padding: 210px 0 0 0; position: relative; }
@supports (max-height: 100dvh) {
  section#introduction{
     max-height:100dvh; }   
}
div#heroimage{
	background-attachment: local; background-origin: content-box; background-repeat: no-repeat; background-size: cover; margin: 0; height: 100%; padding: 0; position: relative; }
h1 {
	position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); color: #b32f03; font-family: 'BoycottFont', sans-serif; font-style: normal; font-size: 3rem; font-weight: 700; margin: 0; text-align: center; text-transform: uppercase;  line-height: normal;}

div#news-div,
div#concert-div,
div#disco-div,
div#band-div,
div#download-div,
div#visual-div,
div#contact-div{
	display: table; height: 100%; position: relative; width: 100%; }

div#news-title,
div#concert-title,
div#disco-title,
div#band-title,
div#download-title,
div#visual-title,
div#contact-title{
	background-color: rgba(15,14,12,0.7); clear: both; display: none; height: 8vh; padding: 0; width: 100%; }

div#news-title h2,
div#concert-title h2,
div#disco-title h2,
div#band-title h2,
div#download-title h2,
div#visual-title h2,
div#contact-title h2{
	color: #b32f03; font-family: 'BoycottFont', sans-serif; font-style: normal; font-size: 2.0rem; font-weight: 700; line-height: 8vh; margin: 0; text-align: center; text-transform: uppercase; }

section#thenews,
section#theconcerts,
section#thediscography,
section#theband,
section#thedownloads,
section#thevisual,
section#thecontact{
	box-sizing: border-box; background-image: linear-gradient( to right, rgba(15,14,12,0.7) 0%, rgba(15,14,12,0.7) 33.33%, rgba(22,21,18,0.7) 33.33%, rgba(22,21,18,0.7) 100%); background-clip: content-box; background-repeat: no-repeat, repeat; height: auto; margin: 0 auto; padding: 210px 0 5vh 0; position: relative; width: 96%; max-width: 1920px; }

div#news-left,
div#concert-left,
div#disco-left,
div#band-left,
div#download-left,
div#visual-left,
div#contact-left{
	box-sizing: border-box; display: table-cell; padding-top: 80px; padding-right: 3%; vertical-align: top; width: 33.33%; }

div#news-left h2,
div#concert-left h2,
div#disco-left h2,
div#band-left h2,
div#download-left h2,
div#visual-left h2,
div#contact-left h2{
	color: #b32f03; font-family: 'BoycottFont', sans-serif; font-style: normal; font-size: 2.5rem; line-height: 2.8rem; margin: 0; text-align: right; text-transform: uppercase; }

div#news-right,
div#concert-right,
div#disco-right,
div#band-right,
div#download-right,
div#visual-right,
div#contact-right{
	box-sizing: border-box; font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); line-height: normal; display: table-cell; padding: 80px 3% 20px 3%; vertical-align: top; width: 66.67%; }

div#news-right p:first-child,
div#concert-right p:first-child,
div#disco-right p:first-child,
div#band-right p:first-child,
div#download-right p:first-child,
div#visual-right p:first-child,
div#contact-right p:first-child{
	margin-top: 0; }

div#news-right p.thedate{
	font-size: 1rem; }
div#news-right p.thedate:first-child{
	margin-top: 0; }
div#news-right p.thetitle{
	font-family: 'BoycottFont', sans-serif; }
div#news-right video{
	height: auto; width: 100%; max-width: 640px; }


div.the-show{
	position: relative; width: 100%; }
div#concert-right p.showlocation,
div#concert-right p.subtitle{
	font-family: 'BoycottFont', sans-serif; }
div#concert-right p.subtitle{
	font-size:1.5em; }
div.theDistance{
	display: none; }
div.tickets{
	position: absolute; top: 0; right: 0; }
div.infos{
	position: absolute; bottom: 0; right: 0; }


div.thealbum,
div.distance{
	display: table; }
div.distance{
	height: 20px; }
div.albumcover{
	display: table-cell; vertical-align: top; width: 40%; max-width: 500px; }
div.albumcover img{
	box-shadow: 0 0 15px 0px #222222; display: block; height: auto; width: 100%; }
div.albumdescription{
	display: table-cell; padding-left: 20px; vertical-align: top;  }
span.lptitle{
	font-family: 'BoycottFont', sans-serif; }
span.songnbr{
	display: inline-block; margin-top: 0.5rem; width: 2.2rem;}


div.themember{
	display: table; }
div.memberpic{
	display: table-cell; vertical-align: top; width: 40%; max-width: 500px; }
div.memberpic img{
	box-shadow: 0 0 15px 0px #222222; display: block; height: auto; width: 100%; }
div.memberdescription{
	display: table-cell; padding-left: 20px; vertical-align: middle; }
span.membername{
	font-family: 'BoycottFont', sans-serif; }
div.themanifest{
	text-align: center; text-transform: uppercase; }


div.thedownload{
	display: table; }
div.imgsmall{
	display: table-cell; vertical-align: top; width: 40%; max-width: 500px; }
div.imgsmall img{
	box-shadow: 0 0 15px 0px #222222; display: block; height: auto; width: 100%; }
div.imgdescription{
	display: table-cell; padding-left: 20px; vertical-align: middle;  }


div.videolinie{ 
	width: 100%; margin: 20px 0; box-shadow: 0 0 15px 0px #222222; }
div.videolinie:first-child{ 
	margin: 0; }
div.videoWrapper{ 
	position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }
div.videoWrapper iframe{
	border: none; border-radius: 3px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

div.contactpic{
	display: table-cell; vertical-align: top; width: 50px; }
div.contactpic img{
	display: block; height: auto; width: 100%; }
div.contactdescription{
	display: table-cell; padding-left: 20px; vertical-align: middle; }
div.contactdescription p{
	margin: 0; }
div.contactdistance{
	height: 20px; }

span.shortspan{
	display: inline-block; width: 3rem; }
span.mobilephonespan{
	display: none; }

footer{
	color: #888; height: 50px; line-height: 50px; padding: 0; margin: 0; width: 100%; }
div#innerfooter{
	margin: 0 auto; padding: 0 2%; position: relative ;text-align: center; width: 96%; max-width: 1920px; }
div#innerfooter p{
	font-size: 1.2rem; margin: 0; padding: 0; }

/* SIDR Menu */
.pushmenu-body{
	position: relative; right:0; }
.pushmenu-push-left { 
	right: 200px; }
div#mobile-sider{
	background-image: linear-gradient( to right, #0b090a 0%, #0b090a 100%); background-clip: content-box; background-repeat: no-repeat, repeat; box-sizing: border-box; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 0; position: fixed; text-align: center; top: 0; width: 200px; z-index: 999999; }
.pushmenu-right{
	right: -200px; }
.pushmenu-right.pushmenu-pushed{ 
	right: 0; }
#mobile-sider, 
.pushmenu-body {
  transition: all 0.5s ease; }
div#mobile-sider ul{
	border: none; display: block; margin: 0 15px; padding: 0; text-transform: capitalize; }
div#mobile-sider ul li{
	display: block; margin: 0; line-height: 40px; }
div#mobile-sider ul li:after {
	content: ""; background: #888; border-radius: 100%; display: block; height: 1px; width: 100%; margin: 0; }
div#mobile-sider ul li:last-child:after {
	content: ""; background: #0b090a; border-radius: 100%; display: block; height: 1px; width: 100%; margin: 0; }
div#mobile-sider ul li:first-child{
	border-top: none; }
div#mobile-sider ul li a.normalMenu{
	color: #b32f03; display: block; font-family: 'PuritanFont', sans-serif; font-style: normal; font-weight: 700; outline: none;  padding: 8px 15px 3px; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
/* SIDR Menu fertig */
span.contactbreak{
    display: none; }

span.socialmediaspan{
	margin-left: 45px; }

a.partnermedia{
	margin-left: 50px; }
a.partnermedia:first-child{
	margin-left: 0; }


/*======= RESPONSIVE =======*/ /*100px = 6.25em*/
@media screen and (max-width:75em) {
	div#news-title,
	div#concert-title,
	div#disco-title,
	div#band-title,
	div#download-title,
	div#visual-title,
	div#contact-title{
		display: table; }
	
	div#news-left,
	div#concert-left,
	div#disco-left,
	div#band-left,
	div#download-left,
	div#visual-left,
	div#contact-left{
		display: none; }
	
  	div.tableclass{
		display: table; width: 100% }
	
	section#thenews,
	section#theconcerts,
	section#thediscography,
	section#theband,
	section#thedownloads,
	section#thevisual,
	section#thecontact{
		box-sizing: border-box; background-image: linear-gradient( to right, rgba(22,21,18,0.7) 0%, rgba(22,21,18,0.7) 100% ); background-clip: content-box; background-repeat: no-repeat, repeat; height: auto; min-height: 100vh; margin: 0; padding: 210px 0 5vh 0; position: relative; }
	
	div#news-right,
	div#concert-right,
	div#disco-right,
	div#band-right,
	div#download-right,
	div#visual-right,
	div#contact-right{
		padding: 20px 3%; width: 100%; }
}

@media screen and (max-width:70em) {
	ul.navbar-list{
		display: none; }
	div#moblist{
		display: block; height: 40px; position: absolute; left: 2%; top: 10px; width: 40px; }
}

@media screen and (max-width:50em) {
	div#logoheader{
		height: 125px; }
	section#introduction{
		padding: 185px 0 0 0; }
	section#thenews,
	section#theconcerts,
	section#thediscography,
	section#theband,
	section#thedownloads,
	section#thevisual,
	section#thecontact{
		padding: 185px 0 5vh 0; }
	a.no-js{
		top: -185px; }
	nav.pushmenu-nav{ 
		height: 60px; line-height: 60px; }
	div.albumcover{
		display: table-row; vertical-align: middle; width: 100%; max-width: 500px; }
	div#disco-right p:first-child{
		margin-top: 20px; }
	div.albumdescription{
		display: table-row; padding-left: 0px; padding-top: 20px; vertical-align: middle;  }
	div#band-right p:first-child{
		margin-top: 20px; }
	div.memberpic{
		display: table-row; vertical-align: top; width: 100%; max-width: 500px; }
	div.memberdescription{
		display: table-row; padding-left: 0px; padding-top: 20px; vertical-align: middle; }
	div#download-right p:first-child{
		margin-top: 20px; }
	div.imgsmall{
		display: table-row; vertical-align: top; width: 100%; max-width: 500px; }
	div.imgdescription{
		display: table-row; padding-left: 0px; padding-top: 20px; vertical-align: middle;  }
	span.contactbreak{
		display: block; }
	div.theDistance{
		display: block; height: 50px; width: 100%; }
	div.tickets{
		position: absolute; top: auto; bottom: 0; right: auto; left: 0; }
	div.infos{
		position: absolute; bottom: 0; right: 0; }
}

@media screen and (max-width:40em) {
	div#logoheader{
		height: 100px; }
	section#introduction{
		padding: 160px 0 0 0; }
	h1 {
		font-size: 1.5rem; bottom: 20px; }
	section#thenews,
	section#theconcerts,
	section#thediscography,
	section#theband,
	section#thedownloads,
	section#thevisual,
	section#thecontact{
		padding: 160px 0 5vh 0; }
	a.no-js{
		top: -160px; }
}