html {
}
body {
    margin: 0;
    padding: 0;
    position: relative;
    background: top center no-repeat url("/img/oceanbw.jpg") fixed #000;
    background-size: cover;
}
img.logo {
    position: relative;
    vertical-align: middle;
    height: 42px;
    background: transparent;
}
#mainmenu {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 30;    
    color: #fff;
}
#mainmenu .group {
    position: relative;
    margin: 0 auto;
    padding-left: 20px;
    max-width: 990px;
    background: #000;
    border: 1px solid black;
    border-bottom: 2px solid #607c87;
}
#mainmenu #close-menu {
    display: none;
}
#icon {
    width: 32px;
    height: 32px;
    margin: 5px;
    vertical-align: middle;
}
a.menu-category {
    display: inline-block;
    padding: 0;
    margin: 5px 10px;
    cursor: pointer;
}
a.menu-category:link, 
a.menu-category:visited {
    color: firebrick; 
    /* text-shadow: -1px -1px 0 #ff0, 1px -1px 0 #ff0, -1px 1px 0 brown, 1px 1px 0 brown; */
}
a.menu-category:hover,
a.menu-category:active {
    color: red;
}
.menu-years {
    float: right;
    margin: 10px 25px;
    font-family: "Literaturnaya";
    font-weight: bold;
    font-size: 12pt;
    line-height: 18pt;
    vertical-align: middle;
    color: #333;
}
.hidden {
    display: none;
}
#mainmenu #language-menu {
    position: absolute;
    top: 10px;
    right: 10px;
}
#mainmenu #language-menu div {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
}
#content {
    position: relative;
    top: 0;
    margin: 43px auto;
    margin-bottom: 0;
    padding: 0 30px;
    padding-bottom: 30px;
    max-width: 950px;
    min-height: 500px;
    font-family: sans-serif;
    text-shadow: 1px 1px 2px #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5em;
    font-weight: 400;
    color: #fff;
    overflow: hidden;
    background: top center no-repeat url("/img/ocean_color_1920.jpg") fixed #000;
    background-size: cover;
    border: 1px solid black;
}
h1 {
    position: relative;
    text-align: center;
    color: #fff;
}
h1 i {
    font-weight: 100;
}
h1, h2, h3 {
    clear: both;
}
h2 {
    position: relative;
    border-bottom: 1px solid red;
}
h4 {
    margin: 0;
}
u {
    text-decoration: none;
    font-size: x-large;
    border: 1px solid red;
    color: red;
    font-weight: bold;
    line-height: 12pt;
}
#data {
    display: none;
}
#toc {
    position: absolute;
    z-index: 10;
    width: 100px;
    top: 47px;
    right: 25px;
    border: 1px solid #000;
    padding-top: 10px;
    padding-bottom: 10px;
    transition-timing-function: ease-in-out;
    transition-property: top;
    transition-duration: 0.2s;
    background: rgba(0,0,0,0.7);
    margin-left: -15pt;
}
#toc li {
    margin-left: -10pt;
}
#toc2 {
    margin-left: -15pt;
}
a.alt:hover {
    text-decoration: none !important;
}
a.alt::after {
    content: "" !important;
}
a.anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}
.content-column {
    /* max-width: 800px; */
    border-right: 1px solid #607c87;
}
#content p {
    background-color: rgba(0,0,0,0.7);
    padding: 10px;
}
.content-column.wide {
    max-width: 100%;
    border-right: 0;
}
.content-item {
    position: relative;
    max-width: 700px;
    padding-bottom: 30px;
    padding-right: 10px;
    border-bottom: 0px solid #ccc;
    text-align: justify;
    font-size: 12pt;
}
.content-item img {
    display: block;
    padding: 5px;
    border: 1px solid #000;
    margin: 0 auto;
}
img.bullet {
    position: relative;
    top: -2px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    content: url("/img/Famfamfam-Silk-Bullet-black.16.png");
}
img.discogs {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    content: url("/img/icon-discogs.png");
}
img.metallum {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    filter: grayscale(1);
    content: url("/img/icon-metallum.ico");
}
img.bandcamp-victory {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    filter: grayscale(1);
    content: url("/img/icon-bandcamp-victory.jpg");
}
img.blacksmith {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    filter: contrast(2) brightness(2) grayscale(1);
    content: url("/img/icon-blacksmith.png");
}
img.archive {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    content: url("/img/icon-archive.ico");
}
img.facebook {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    filter: contrast(2) brightness(0.8) grayscale(1);
    content: url("/img/ico-facebook.ico");
}
.double-column {
    width: 45%;
    float: left;
    border-bottom: 0;
}
.triple-column {
    width: 31%;
    float: left;
    padding: 0 10px;
    border-bottom: 0;
}
.triple-column h3 {
    text-align: center;
}
.news-item img {
    margin: 0;
    margin-right: 10px;
    float: left;
}
.path::before {
    content: "◾ ";
    vertical-align: top;
}
.path {
    font-size: smaller;
}
.navigation, a {
    cursor: pointer;
}
a:link, a:visited {
    color: #73c3e2;
    text-decoration: none;
}
a:hover, a:active {
    color: #0ff;
    text-decoration: underline;
}
.calendar-date {
    color: gray;
    font-size: smaller;
    font-style: italic;
}
.timeline-item {
    border:1px solid gray;
    border-right: 0;
    border-left: 4px solid gray;
    padding: 10px;
    padding-right: 100px;
    margin: 15px 0;
}
.timeline-item.red {
    border-left: 4px solid red;
}
.timeline-item i {
    font-weight: bold;
    font-size: small;
    font-style: normal;
}
.timeline-item i::after {
    content: "|";
    margin-left: 5px;
}
.timeline-dot {
    position: absolute;
    text-align: right;
    top: 10px;
    right: -5px;
}
.timeline-dot::after {
    content: "●";
    color: black;
    margin-left: 5px;
}

img {
    position: relative;
    transition: width 0.5s, height 0.5s;
    transition-timing-function: ease-in-out;
}
img.zoomable {
    cursor: zoom-in;
    border: 1px solid #000;
}
.zoom {
    position: absolute;
    z-index: 20;
    left: 10px;
    right: 10px;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    border: 1px solid #000;
    background: #fff;
    padding: 10px;
    cursor: zoom-out;
}
img.icon {
    width: 16px;
    height: 16px;
    border: 0px;
    display: inline;
    vertical-align: middle;
}
img.zs_icon {
    content: url("/img/zs_icon.png");
    width: 32px;
    height: 32px;
    display: inline;
    padding: 0;
    vertical-align: middle;
    border: 0;
    margin: 0 5px;
}
img.zz_icon {
    content: url("/img/zz_icon.png");
    width: 32px;
    height: 32px;
    display: inline;
    padding: 0;
    vertical-align: middle;
    border: 0;
    margin: 0 5px;
}
img.zchm_icon {
    content: url("/img/zchm_icon.png");
    width: 32px;
    height: 32px;
    display: inline;
    padding: 0;
    vertical-align: middle;
    border: 0;
    margin: 0 5px;
}
legend,
.subtitle {
    font-style: italic;
    color: #333;
    text-align: center;
}
blockquote {
    position: relative;
    background: #eee;
    margin: 40px 0 20px 0;
    padding: 1.6em 2.4em .7em 1.4em;
    font-style: italic;
    border: 2px solid white;
    border-radius: 10px;
    box-shadow: 2px 2px 4px hsl(0 0% 0% / 20%);
    text-indent: 1.6em;
}
blockquote::before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--border-rad);
    box-shadow:
	inset -2px -2px 1px hsl(0 0% 100%),
	inset 2px 2px 4px hsl(0 0% 0% / 20%);
}
blockquote::after {
    content: "❝";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: -2px;
    transform: translate(-50%, -50%);
    width: 1.3em;
    height: 1.3em;
    background: white;
    box-shadow: 0 4px 5px -1px hsla(0 0% 0% / 20%);
    border-radius: 999px;
    display: grid;
    place-content: center;
    padding-top: .5em;
    color: var(--accent-color);
    font-size: 36px;
    font-style: normal;
    text-indent: 0;
}
cite {
    display: block;
    margin-top: 30px;
    text-indent: 0;
    text-align: center;
    font-weight: bold;
    font-size: .9rem;
    text-transform: uppercase;
    color: hsl(0 0% 20%);
}
aside {
    position: relative;
    background: #ffc;
    margin: 10px;
    padding: 20px;
    font-style: italic;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 2px 2px 4px hsl(0 0% 0% / 20%);
    width: 300px;
    float: right;
}
img.pentagram {
    width: 24px;
    display: inline-block;
    vertical-align: middle;
    filter: invert(1);
}

.album-release {
    display: none;
    padding: 10px;
    font-size: smaller;
}
.album-release.active {
    display: block;
}
.album-release td:first-child {
    width: 70px;
}

/************************* UI ***************************/
.tabbed-element {
    position: relative;
}
.tabs {
    width: 100%;
    border-bottom: 1px solid #607c87;
    background-color: #666;
}
.tab {
    display: inline-block;
    padding: 0 10px;
    margin: 0;
    background-color: #666;
    cursor: pointer;
    user-select: none;
}
.tab.active {
    background-color: #607c87;
}
.tab:hover {
    background-color: #ccc;
}
.tab-content-all {
    position: relative;
}
.tab-content {
    display: none;    
}
.tab-content.active {
    display: block;
}
/********************* DISCOGRAPHY **********************/
.album-block {
    display: inline-block;
    line-height: 11pt;
    margin-bottom: 10px;
    margin-right: 10px;
}
.album-block h4 {
    text-align: center;
    font-size: 10pt;
}

img.cover{
    border: 1px solid #000;
    width: 220px;
    height: 220px;
}

.album-info {
    border: 1px solid #000;
    background-color: rgba(0,0,0,0.7);
    margin-bottom: 20px;
}
.album-release img {
    height: 300px;
    border: 1px solid #000;
    vertical-align: top;
    margin-right: 10px;
    margin-bottom: 10px;
}
.album-release div.group {
    display: inline-block;
    vertical-align: top;
}
.album-release h3 {
    padding: 0;
    margin: 0;
}
.album-release p {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    white-space: pre-wrap;
    display: inline-block;
}
.tracklist {
    padding: 5px;
}
.track {
}
.track h3 {
    border: 1px solid #000;
    background-color: #666;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 10px;
    cursor: pointer;
    position: relative;
}
.track h3:after {
    content: url("/img/Icons8-Ios7-Arrows-Down-4.16.png");
    position: absolute;
    top: 5px;
    right: 10px;
    line-height: 16px;
}
.track p {
    margin-top: 0;
    margin-bottom: 0;
    white-space: pre-wrap;
    display: none;
}
.track.active h3 {
    background-color: #607c87;
}
.track.active h3:after {
    content: url("/img/Icons8-Ios7-Arrows-Up-4.16.png");
}
.track.active p {
    display: block;
}


.property {
    display: inline-block;
}
.value{
    display: inline-block;
    crear: right;
}

.hidden {
    display: none !important;
}
.youtube {
    width: 560px;
    height: 315px;
    padding: 10px;
}
.warn {
}
.warn:before{
    content: url("/img/pentagram.png");
    vertical-align: middle;
    line-height: 1.5em;
    margin-right: 2px;
}

/********************* MEDIA *********************/

.media p b {
    font-style: italic;
    display: block;
    margin-bottom: 10px;;
}
.media h2 small {
    font-weight: normal;
    font-size: 10pt;
}

.zine-page {
    text-align: center;
}
.zine-page img {
    height: 256px;
    margin: auto;
}

/********************* PHOTOS *******************/
.content-column .photoalbum {
    text-align: center;
}
.content-column .photoalbum img {
    height: 200px;
    vertical-align: text-top;
}


/********************* FONTS ********************/

@font-face {
    font-family: 'Black Rose';
    src: url('/inc/BlackRose.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/******************** MOBILE *********************/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    html,
    body {
	margin: 0;
	padding: 0;
	height: 100vh;
    }
    img.logo {
	display: none;
    }
    a.menu-category {
	font-size: 9pt;
	font-weight: bold;
	color: red;
	width: 22%;
    }
    #content {
	
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 20px;
	padding-right: 10px;
	padding-left: 10px;
    }
    .content-column {
	max-width: initial;
	border: 0;
    }
    .content-column.links img {
	display: none;
    }
    #toc {
	display: none;
    }
    h1 {
    }
    h2 {
	margin-top: 3em;
    }
    .album-block {
	width: 100%;
	text-align: center;
    }
    .album-block h4 {
	font-size: 18pt;
	line-height: 18pt;
    }
    img.cover {
	width: 256px;
	height: 256px;
	
    }
    .youtube {
	width:  256px;
	height: 144px;
    }

    #mainmenu .burger {
        background: url('/img/menuw.png') no-repeat #000;
        height: 32px;
    }
    #mainmenu.active .burger {
        display: none;
    }
    #mainmenu .group {
        display: none;
    }
    #mainmenu.active .group {
        display: block;
    }
    #mainmenu .menu-category {
        line-height: 20pt;
        font-size: 15pt;
	}
    #mainmenu.active .menu-category {
        display: block;
	}
    #mainmenu.active #language-menu {
        display: block;
        postition: absolute;
        top: auto;
        bottom: 10px;
        right: 10px;
    }
    #mainmenu.active #close-menu {
        font-family: Arial;
        font-size: 18px;
        display: block;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 20px;
        min-width: 20px;
        min-height: 20px;
        text-align: center;
        vertical-align: middle;

    }
}