@charset "utf-8";
/* CSS Document ©2020 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'), /* Super Modern Browsers */
}

/* 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'), /* Super Modern Browsers */
}

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


html, body{
	background-color: #202020; background-image: url("../small/2025-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: none; transition: color 0.5s ease-in-out; }
a:hover,
a:active{
	color: #5E3021; text-decoration: none; }

a.button:link,
a.button:visited{
	background-color: #202020; border: 1px solid #555; 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/mnemocide_logo_skull.png") no-repeat scroll center; background-size: 1280px 50px; height: 50px; border: none; color: #888; padding: 20px; }

audio {
	height: 20px; width: 220px; border: none; border-radius: 2px; }

header{
	background-image: url("../small/2025-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: 20px 2%; width: 96%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
div#logoheader{
    background-image: url("../small/2025-logo.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: left center; background-clip: border-box; background-origin: content-box; background-size: contain; box-sizing: border-box; height: 180px; padding: 0; width: 25%; }
div#claimheader{
	color: #b32f03; font-size: 2em; text-align: center; width: 50%;  }
div#claimheadersmallscreen{
	color: #b32f03; font-size: 2em; text-align: center; width: 100%; display: none; }
div#languageset{
	text-align: right; width: 25%; }

section#introduction{
	box-sizing: border-box; height: 100vh; margin: 0; padding: 220px 2% 0; position: relative; width: 100%;  }
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;}

@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; box-shadow: 0px 3px 10px -2px rgba(179, 47, 3,0.3); }


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#container{
    box-sizing: border-box; height: auto; margin: 0 auto; padding: 0; position: relative; width: 96%; max-width: 1920px; }

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); }

div.files-div{
	display: table; position: relative; width: 100%; }

div.files-title{
	background-color: rgba(15,14,12,0.7); clear: both; display: none; height: 8vh; padding: 0; width: 100%; }

div.files-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; }
p.infotitle,
p.infotitlesmall{
	font-family: 'BoycottFont', sans-serif; font-style: normal; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; }
p.infotitlesmall{
	display: none; }

section#biography{
	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: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
section#members{
	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: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
section#discography{
	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: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
section#liveexpirience{
	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: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
section#liveimages{
	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: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
section#thevideos{
	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: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
section#thedownloads{
	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: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
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: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }


div.files-left{
	box-sizing: border-box; display: table-cell; padding-top: 80px; padding-right: 3%; vertical-align: top; width: 33.33%; }
div.files-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.files-right{
	box-sizing: border-box; font-size: 1.2rem; line-height: 1.5rem; display: table-cell; padding: 80px 3% 20px 3%; vertical-align: top; width: 66.67%; }
div.files-right p{
	font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1600 - 320))); line-height: normal; }
div.files-right p:first-child{
	margin-top: 0; }

div.themember{
	display: table; }
div.memberpic{
	display: table-cell; vertical-align: top; width: 30%; }
div.memberpic img{
	box-shadow: 0px 3px 10px -2px rgba(179, 47, 3,0.3); 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.distance{
	display: table; }
div.distance{
	height: 80px; }
span.lptitle{
	font-family: 'BoycottFont', sans-serif; }
span.songnbr{
	display: inline-block; width: 3rem; }
span.songntitle{
	display: inline-block; width: 15rem; }
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; }

.image-gallery {
  display: grid; gap: 10px;  grid-template-columns: auto auto auto; list-style: none; margin-top: 0; padding: 0;}

.image-gallery > li { 
	cursor: pointer; position: relative; }


.image-gallery li img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 20%;
  background: rgba(57, 57, 57, 0.502);
  bottom: 0;
  left: 0;
  transform: scale(0);
  transition: all 0.2s 0.1s ease-in-out;
  color: #fff;
  border-radius: 5px;
  /* center overlay content */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover */
.image-gallery li:hover .overlay {
  transform: scale(1);
}


div.videolinie{ 
	width: 100%; margin: 20px 0; box-shadow: 0px 3px 10px -2px rgba(179, 47, 3,0.3); }
div.videolinie:first-child{ 
	margin: 0; }
div.videoWrapper{ 
	position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }
div.videoWrapper iframe{
	border-radius: 3px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

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; }


/*======= RESPONSIVE =======*/ /*100px = 6.25em*/

@media screen and (max-width:98em) {
	div#claimheader{
		display: none;  }
	div#claimheadersmallscreen{
		display: block; }
	div#logoheader{
		height: 130px; padding: 0; width: 80%; }

}

@media screen and (max-width:75em) {
	div.files-title{
		display: table; }
	
	div.files-left{
		display: none; }
	
  	div.tableclass{
		display: table; width: 100% }
	
	section#biography{
		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; margin: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
	section#members{
		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; margin: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
	section#discography{
		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; margin: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
	section#liveexpirience{
		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; margin: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
	section#liveimages{
		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; margin: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
	section#thevideos{
		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; margin: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
	section#thedownloads{
		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; margin: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
	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; margin: 5% auto 0; padding: 0; position: relative; width: 96%; max-width: 1920px; }
	
	div.files-right{
		padding: 20px 3%; width: 100%; }
}
	
@media screen and (max-width:50em) {
	div#logoheader{
		height: 125px; }
	div.files-right p:first-child{
		margin-top: 20px; }
	#biography div.files-right p:first-child,
	#liveexpirience div.files-right p:first-child{
		margin-top: 0px; }
	div.memberpic{
		display: table-row; vertical-align: top; width: 100%; max-width: 335px; }
	div.memberdescription{
		display: table-row; padding-left: 0px; padding-top: 20px; vertical-align: middle; }
}

@media screen and (max-width:40em) {
	div#logoheader{
		height: 100px; }
	h1 {
		font-size: 2rem; bottom: 20px; }
}

@media screen and (max-width:30em) {
	#claimheadersmallscreen p.infotitle{
		display: none; }
	p.infotitlesmall{
		display: block; }
	.image-gallery {
  		grid-template-columns: auto auto; list-style: none; margin-top: 0; padding: 0; }

}

	@media screen and (orientation: landscape){
	div#heroimage{
		background-image: url("../small/2026_mnemocide_promopic_band_small.jpg"); background-position: center 30%; }
	}

	@media screen and (orientation: portrait){
	div#heroimage{
		background-image: url("../small/2026_mnemocide_promopic_band_small_p.jpg"); background-position: center bottom; }
	}