@font-face	{	font-family: opfont;	src: url(var/opfont.ttf); }
@font-face	{	font-family: headline;	src: url(var/headline.ttf); }
*			{	font: normal 400 1rem opfont; color: #999; letter-spacing: 0.02rem;
				margin: 0; padding: 0; border-radius: 1.1em;
				-ms-box-sizing: border-box; -webkit-box-sizing: border-box;
				 -o-box-sizing: border-box;    -moz-box-sizing: border-box;
					box-sizing: border-box; }
body 		{	background: #200 url(var/wallpaper.jpg) 0 0/100% 100% no-repeat fixed;
				cursor: default; }
div			{	float: left; width: 100%; text-align: justify; border: 0px solid rgba(100,0,0,1); }
/* for mobile phones */
#margin		{	width:   5%; }
.content	{	width:  90%; }
.content img, .content iframe, .sh
			{	-ms-box-shadow: 5px 5px 6px -1px #000; -webkit-box-shadow: 5px 5px 6px -1px #000;
				 -o-box-shadow: 5px 5px 6px -1px #000;	  -moz-box-shadow: 5px 5px 6px -1px #000;
					box-shadow: 5px 5px 6px -1px #000; }
iframe.nosh
			{	-ms-box-shadow: none; -webkit-box-shadow: none;
				 -o-box-shadow: none;	 -moz-box-shadow: none;
					box-shadow: none; }
.row		{	text-align: justify; }
.row::after {	display: block; clear: both; content: ""; }
h1			{	font: normal 400 3rem headline; color: #666; margin-top: -25px; }
i			{	font-style: italic; }
i, a		{	color: #666; }
a:hover		{	cursor: pointer; color: #999; text-shadow: 0 0 3px #b00; }
a:hover, a:link, a:visited, a:active
			{	text-decoration: none; }
a img:hover	{	-ms-box-shadow: 0 0 6px 0 #f00;	-webkit-box-shadow: 0 0 6px 0 #f00;
				 -o-box-shadow: 0 0 6px 0 #f00;	   -moz-box-shadow: 0 0 6px 0 #f00;
					box-shadow: 0 0 6px 0 #f00; }
#header, #footer
			{	z-index: 2; position: fixed; width: 100%; text-align: center;
				border-radius: 0; background: rgba(0,0,0,0.6); }
#header		{	height: 100px; top: 0; }
#hspace		{	height: 100px; top: 0; }
#footer		{	height:  40px; bottom: 0; padding-top: 20px; }
#fspace		{	height:  40px; bottom: 0; }
#menu		{	z-index: 20; position: fixed; cursor: pointer;
				top: 77px; right: 5px; width: 50px; height: 20px; }
#menu span	{	border-radius: 10px; border: 1px solid rgba(100,100,100,0.5);
				color: #666; padding: 5px; }
#menu i, #menu a
			{	color: #999; }
#menu a:hover {	text-shadow: 0 0 3px #f00; }
#menu li	{	line-height: calc(3vh - 6px); }
#menu ul	{	position: relative; top: 7px; right: 50px; width: 90px; padding: 4px 10px;
				list-style-type: none; text-align: right; background: rgba(0,0,0,0.8);
				opacity: 0;	visibility: hidden;
				-webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
				   -moz-transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
					-ms-transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
					 -o-transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
					    transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s; }
#menu:hover ul
			{	opacity: 1; visibility: visible;
				-ms-transition-delay: 0s; -webkit-transition-delay: 0s;
				 -o-transition-delay: 0s;	 -moz-transition-delay: 0s;
					transition-delay: 0s; }
/* index */
#indeximg 	{	height: calc(100vh - 140px); }
#indeximg img {	z-index: 3; position: fixed; width: 100%; max-height: 100%; margin-top: -60px;}
#indextxt	{	z-index: 4; position: fixed; width:  90%; bottom: 50px;	padding: 10px 5%;
				background: rgba(0,0,0,0.5); }
/* about */
.scrollbox	{	scroll-behavior: smooth; overflow: auto; }
.s1			{	height: calc(100vh - 162px); margin: 10px 0; border-radius: 0; }
.s1s		{	height: calc(100vh - 290px); margin: 0; border-radius: 0; }
img			{	max-width: calc(100% - 10px); }
.pad-h		{	padding: 10px 4%; }
img.rr		{	height: 120px; float: right; margin: 0 0 10px 15px; }
img.ll		{	height: 120px; float:  left; margin: 0 15px 10px 0; }
.btn		{	height: 30px; width: 95px; padding: 0px; line-height: 1;
				display: inline-flex; align-items: center; justify-content: center;
				background: #000; color: #999; }
.btn:hover	{	background: #100; text-shadow: 0 0 6px #f00; }
/* discog */
.iconbox 	{	text-align: center; }
.iconbox img {	width: 85px; margin: 5px; cursor: pointer; }
.iconbox img:hover
			{	-ms-box-shadow: 0 0 6px 0 #f00;	-webkit-box-shadow: 0 0 6px 0 #f00;
				 -o-box-shadow: 0 0 6px 0 #f00;	   -moz-box-shadow: 0 0 6px 0 #f00;
					box-shadow: 0 0 6px 0 #f00; }
h5			{	font-size: 0.8rem; }
#player		{	width: 278px; margin-left: calc(50% - 139px); margin-bottom: 10px; }
#player	img	{	-ms-box-shadow: none; -webkit-box-shadow: none;
				 -o-box-shadow: none;	 -moz-box-shadow: none;
					box-shadow: none; }
[id*="pg"]	{	display: none; }
.databox	{	background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3)); 
				background-clip: padding-box; padding: 10px 6%; margin-bottom: 10px; }
.databox.plain
			{	background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3)); 
				background-clip: padding-box; padding: 0; margin: 0; }
.databox .left
			{	text-align: center; }
.databox .right b
			{	font-variant: small-caps; color: #666; }
.databox.pct{	margin: 5px; height: 190px; padding: 10px; }
.databox.pct img, 
.databox.wide img
			{	object-fit: cover; object-position: 50% 50%; border-radius: 0.9rem;
				font-family: 'object-fit: cover; object-position: 50% 50%'; }
.rght img, .rghtw img, .vid iframe
			{	margin: 10px; border: 0; }
/* lyrics */
[class^="slides"]
			{	display: none; text-align: left;
				background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
				background-clip: padding-box; padding: 10px 6%; }
.vis		{	display: block; }
.lyricbox	{	width: 300px; margin-left: calc(50% - 150px); text-align:left; }
.lyricbox ul {	list-style-type: none; }
.lyricbox li {	padding: 5px; cursor: pointer; }
.lyricbox li:hover
			{	text-shadow: 0 0 6px #a00; }
/* news */
#nav		{	z-index: 20; position: relative; }
#nav a		{	font-size: 0.8rem; color: #999; }
#nav ul		{	position: relative; list-style-type: none;  cursor: pointer;
				left: calc(100% - 1.5rem); width: 8rem; padding: 0; top: 50%;
				-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);
				 -o-transform: translateY(-50%);	-moz-transform: translateY(-50%);
					transform: translateY(-50%); }
#nav span	{	opacity: 0;	visibility: hidden; font-size: 0.9rem;
				-webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
				   -moz-transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
					-ms-transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
					 -o-transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
					    transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s; }
#nav li		{	line-height: calc(2vh + 6px); padding: 2px 10px; }
#nav li:hover {	background: rgba(0,0,0,0.8); }
#nav li:hover span
			{	opacity: 1; visibility: visible;
				-ms-transition-delay: 0s; -webkit-transition-delay: 0s;
				 -o-transition-delay: 0s;	 -moz-transition-delay: 0s;
					transition-delay: 0s; }
hr			{	color: rgba(100,100,100,0.3); width: 100%; margin: 3px 0 6px 0; }
.databox .hh {	font-size: 1.2rem; padding: 0 0 5px 0;}
.databox div {	border-radius: 0; }
.databox .rr {	font-size: 0.8rem; text-align: right; margin-top: -10px; }
.databox .hh span
			{	width: 100px; padding: 5px 20px; background: #000; }
.databox .cc {	overflow: hidden; }
.databox img {	height: 180px; margin-bottom: 10px; }
.databox img.cc
			{	float: none; }
.databox img.md
			{	height: 115px; }
.databox img.sm
			{	height: 80px; }
/* appear */
.itembox	{	background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3)); 
				background-clip: padding-box; padding: 10px 6%; margin-bottom: 10px; overflow: hidden; }
.itembox .hh {	font-size: 1.2rem; padding: 0 0 5px 110px;}
.itembox i	{	font-size: 0.9rem; }
.itembox div {	align-self: center; border-radius: 0; text-align: left; }
.itembox img {	float: left; margin: 0 10px 10px 0; }
.itembox .ii {	font-size: 0.9rem; padding: 0 10px 10px 0;}
.itembox .ii p
			{	margin: 5px 0;}
/* reviews */
h2			{	font-size: 1.33rem; }
/* contact *
.iconbox.xs	img
			{	width: 45px; height:45px; margin: 3px; }
/* guestbook */
.databox .rr a, .databox .hh a
			{	font-size: 0.9rem; }
.s2			{	height: calc(100vh - 400px); }
#posts .rr	{	margin-top: -23px; }
#nav.slim	{	top: 250px; }
#nav.slim ul {	width: 5rem; }

/* forum */
.cur		{	cursor: pointer; }
.postbox	{	background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.4)); 
				background-clip: padding-box; padding: 10px 6%; margin-bottom: 10px; }
.postbox div {	border-radius: 0; }
.postbox a	{	font-size: 0.9rem; }
.postbox span {	font-size: 1.4rem; color: #a00; }
.postbox.sm	{	width: 93%; margin-left: 7%; }
.postbox .hh {	font-size: 1.2rem; }
.postbox .rr {	text-align: right; margin-top: -20px; }
.postbox .h1 {	width: 65%; text-align: left; }
.postbox .h2 {	width: 10%; text-align: center; }
.postbox .h3 {	width: 25%; text-align: right; }
.postbox .cc {	float: none; clear: both; }
.s3			{	height: calc(100vh - 445px); margin-bottom: 10px; }
/* thanks */
p.head		{	font-size: 1.2rem; text-align: center; padding: 0 20%; }
.listbox	{	padding: 10px 6%; margin: 10px 0; background: rgba(0,0,0,0.2); overflow: hidden; }
.entry		{	clear: both; }
.entry div	{	border-radius: 0; margin-bottom: 10px; }
.entry .aa	{	width: 40%; padding: 4px 10px; font-size: 1.4rem; text-align: right; line-height: 1.1rem;}
.entry .bb	{	width: 60%; padding: 4px 10px; font-size: 1.05rem; border-left: 1px solid #666; }
/* projects */
img.logo	{	width: 35%; min-width: 120px; max-width: 300px; height: auto;
				margin: 0 10px 10px 0; float: left; }
p.bt		{	text-align: right; margin-top: 5px; }
p.bt a		{	margin: 0 5px; }
/* signal12 */
#btn		{	width: 100px; }
#btn a		{	margin-bottom: 10px; }
[id^="pg"] center .btn
			{	margin: 0 10px; }
[id^="pg"] h2
			{	margin: 10px 0; }
#head		{	width: calc(100% - 200px); text-align: center; padding: 0 0 5px 0;}
#head img	{	max-height: 70px; }
.s4			{	height: calc(100vh - 285px); margin-top: 10px; }
#sig12 img	{	display: none; }
/* gallery */
#thumb		{	width: 25%; }
#thumb		{	min-width: 120px; text-align: center; padding: 0 5px 10px 5px; }
#thumb img	{	width: 90%; max-width: 280px; }
#thumb a	{	text-shadow: none; }
#thumb p	{	opacity: 0; }
#thumb:hover p
			{	opacity: 1; }
/* gallerylive */
.iconbox.sm img
			{	width: 65px; }
.imgbox #head {	height: auto; }
.imgbox [class*="slides"]
			{	text-align: center; }
.imgbox [id^="pg"]
			{	margin: 10px 0 0 0; }
.imgbox img	{	min-width: 200px; max-width:90%; max-height: 400px; margin: 5px 0; }
/* galleryrest */
.iconbox.xs img
			{	object-fit: cover; object-position: 80% 20%; border-radius: 0.9rem;
				font-family: 'object-fit: cover; object-position: 80% 20%'; }
.fades		{	-ms-animation: fadeIn 9s; -webkit-animation: fadeIn 9s;
				 -o-animation: fadeIn 9s; 	 -moz-animation: fadeIn 9s; animation: fadeIn 9s; }
.fadef		{	-ms-animation: fadeIn 3s; -webkit-animation: fadeIn 3s;
				 -o-animation: fadeIn 3s; 	 -moz-animation: fadeIn 3s; animation: fadeIn 3s; }
#indextxt	{	-ms-animation: fadeWait 50s; -webkit-animation: fadeWait 50s;
				 -o-animation: fadeWait 50s; 	-moz-animation: fadeWait 50s; animation: fadeWait 50s;
				animation-iteration-count: infinite; opacity: 0; }
#menu span	{	-ms-animation: glow 10s; -webkit-animation: glow 10s;
				 -o-animation: glow 10s;	-moz-animation: glow 10s; animation: glow 10s;
				animation-iteration-count: infinite; }
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
   @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
	 @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
		@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes fadeWait { 20% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: 1; } }
   @-moz-keyframes fadeWait { 20% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: 1; } }
	@-ms-keyframes fadeWait { 20% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: 1; } }
	 @-o-keyframes fadeWait { 20% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: 1; } }
		@keyframes fadeWait { 20% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: 1; } }
@-webkit-keyframes glow { 40% { text-shadow: 0 0 0   #000; }
						  50% { text-shadow: 0 0 4px #f00; color: #999; }
						  60% { text-shadow: 0 0 0   #000; } }
   @-moz-keyframes glow { 40% { text-shadow: 0 0 0   #000; }
						  50% { text-shadow: 0 0 4px #f00; color: #999; }
						  60% { text-shadow: 0 0 0   #000; } }
	@-ms-keyframes glow { 40% { text-shadow: 0 0 0   #000; }
						  50% { text-shadow: 0 0 4px #f00; color: #999; }
						  60% { text-shadow: 0 0 0   #000; } }
	 @-o-keyframes glow { 40% { text-shadow: 0 0 0   #000; }
						  50% { text-shadow: 0 0 4px #f00; color: #999; }
						  60% { text-shadow: 0 0 0   #000; } }
		@keyframes glow { 40% { text-shadow: 0 0 0   #000; }
						  50% { text-shadow: 0 0 4px #f00; color: #999; }
						  60% { text-shadow: 0 0 0   #000; } }

/* help */ /*
-webkit-[item] => Safari, Chrome, Opera > 12.1
   -moz-[item] => Firefox < 16
	-ms-[item] => IE
	 -o-[item] => Opera < 12.1
		[item] => Standard

    align-items: center => horizontal center
justify-content: center => vertical center

box-shadow: 0px 0px 6px 2px #800 => shadow left, top, blur, spread, color

font-family: 'object-fit: cover; object-position: 80% 20%'	=> iEdge, Android, Safari
			  object-fit: cover; object-position: 80% 20%   => Rest

line-height: 2vh => vh: Relative to 1% of the height of the viewport

color: rgba(255,  0,  0,1) => color: #f00		color: rgba(100,100,100,1) => color: #666
color: rgba(180,  0,  0,1) => color: #a00		color: rgba(160,160,160,1) => color: #999
color: rgba( 25,  0,  0,1) => color: #100
*/

@media only screen and (max-width: 600px) {		/* for extra small devices & phones */
*			{	font-size: 12px; }
.s1s		{	height: 100%; margin: 0; border-radius: 0; }
.databox.wide img
			{	height: 80px !important; }
.databox img.lg
			{	height: 30%; max-height: calc(60vh - 400px); }
.databox img.cc
			{	height: 130px; }
.vid iframe	{	width: 344px; height: 200px; }
video		{	width: 192px; height: 108px; }
}
@media only screen and (min-width: 600px) {		/* for small devices, tablets & large phones */
*			{	font-size: 12px; }
.s1s		{	height: 100%; margin: 0; border-radius: 0; }
.databox.pct{	width: calc(50% - 10px); height: 240px; }
.databox.wide img
			{	height: 100px; }
.databox img.lg
			{	height: 30%; max-height: calc(60vh - 400px); }
.vid iframe	{	width: 430px; height: 250px; }
video		{	width: 384px; height: 216px; }
}
@media only screen and (min-width: 768px) {		/* for medium devices & landscape tablets */
*			{	font-size: 12px; }
.databox.wide img
			{	height: 130px; }
.s2			{	height: calc(100vh - 420px)!important; }
.s3			{	height: calc(100vh - 445px)!important; }
.vid iframe	{	width: 430px; height: 250px; }
video		{	width: 576px; height: 324px; }
}
@media only screen and (min-width: 992px) {		/* for large devices, laptops & desktops */
*			{	font-size: 15px; }
.rght		{	width: 100%; }
h1			{	margin-top: -30px; }
#menu		{	top: 74px; right: 20px; }
#menu ul	{	top: 7px; right: 70px; width: 120px; }
#margin		{	width: 10%; }
.databox.pct{	width: calc(33% - 15px); height: 250px; }
.databox.wide img
			{	height: 150px; }
.databox img.lg
			{	height: 30%; max-height: calc(60vh - 400px); }
.content	{	width: 80%; }
.s3			{	height: calc(100vh - 468px)!important; }
#indextxt	{	width: 80%; }
#player		{	margin-left: 0; }
#album .databox
			{	margin-left: 10px; width: calc(100% - 288px); }
.lyricbox	{	width: 310px; margin: 5px 0 0 0; float: left; }
.lyricbox li {	font-size: 0.8rem; }
#lyrics [class^="slides"]
			{	width: calc(100% - 310px); margin: 5px 0 0 0; }
#lyrics i	{	font-size: 0.9rem; }
.entry div	{	margin-bottom: 20px; }
.vid iframe	{	width: 602px; height: 350px; }
video		{	width: 768px; height: 432px; }
}
.__xl__for_extra_large_devices__laptop_desktops {}
@media only screen and (min-width: 1200px) {		/* for extra large devices, laptops & desktops */
*			{	font-size: 15px; }
.s1s		{	height: calc(100vh - 290px); margin: 0; border-radius: 0; }
.rght		{	width: calc(100% - 200px); }
.rghtw		{	width: calc(100% - 100px); }
.rghtv		{	width: calc(100% - 250px); }
.formbox	{	padding: 0 20%; }
.databox.pct{	width: calc(25% - 20px); height: 270px; }
.databox.wide
			{	padding-left: 20%; }
.databox .left
			{	width: 30%; padding: 10px; }
.databox .right
			{	width: 70%; padding: 10px 6%; }
.databox img.lg
			{	height: 50%; max-height: calc(60vh - 300px); }
.vid iframe	{	width: 768px; height: 432px; }
video		{	width: 960px; height: 540px; }
}