/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(https://www.soundjumper.net/fonts/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(https://www.soundjumper.net/fonts/) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://www.soundjumper.net/fonts/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA71rCksAxkCQjQVcuxJER.woff) format('woff');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://www.soundjumper.net/fonts/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA71rCksExkCQjQVcuxJER.woff) format('woff');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://www.soundjumper.net/fonts/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA71rCks8xkCQjQVcuxA.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
/* variables +++++++++++++++++++++++++++++++++++++++++++++ */
:root {
	--bg-color: #f7f7f7;
	--bg-color-second: lavender;
	--bg-color-contrast: #355;

	--text-color: #333333;
	--text-color-second: #000000;
	--text-color-contrast: lavender;
	--text-color-active: #337;

	--link-color: #1a389d;
	--link-color-active: #aaaa00;
	--link-color-visited: #add8e6;
	--logo-link-color: #333333;

	--card-bg-color: #fff5ee;
	--card-text-color: #333;

	--area-color: #a0a0a0;
	--border-color: #333;


	--dk-bg-color: #333333;
	--dk-bg-color-second: #335555;
	--dk-bg-color-contrast: #ccc;

	--dk-text-color: #f9f9f9;
	--dk-text-color-second: #aaccdd;
	--dk-text-color-contrast: #333;

	--dk-text-color-active: #337;
	--dk-link-color: #caffff;
	--dk-link-color-visited: #aaaaff;
	--dk-logo-link-color: #add8e6;

	--dk-card-bg-color: #2f4f4f;
	--dk-card-text-color: #e6e6fa;

	--dk-area-color: #f9f9f9;
	--dk-border-color: lavender;
}
/* var setup +++++++++++++++++++++++++++++++++++++++++++++ */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: var(--dk-bg-color);
		--bg-color-second: var(--dk-bg-color-second);
		--text-color: var(--dk-text-color);
		--text-color-second: var(--dk-text-color-second);
		--link-color: var(--dk-link-color);
		--area-color: var(--dk-area-color);
		--border-color: var(--dk-border-color);
		--logo-link-color: var(--dk-logo-link-color);
		--card-bg-color: var(--dk-card-bg-color);
		--card-text-color: bar(--dk-card-text-color);
		div.modeswitchdiv {
			display: none;
		}
	}
}
/* page +++++++++++++++++++++++++++++++++++++++++++++ */
body,html {
	margin:0;
	padding:0;
}
body {
	font-size:16px;
	color: var(--text-color);
	background-color: var(--bg-color);
	font-family:Saira,Arial,sans-serif;
	min-height:100vh;
	position:relative;
}
/* general +++++++++++++++++++++++++++++++++++++++++++++ */
*, *::before, *::after {
	box-sizing: border-box;
}
a,a:visited {
	color: var(--link-color);
}
a.my-button {
	display:inline-block;
	border:1px solid var(--border-color);
	border-radius:5px;
	padding:5px;
	margin:5px;
	text-decoration:none;
	color: var(--text-color-second);
	background-color: var(--area-color);
}
a.my-button:hover{
	text-decoration:underline;
	color: var(--link-color);
	background-color: var(--area-color);
}
/* header +++++++++++++++++++++++++++++++++++++++++++++ */
#header {
	position:fixed;
	top:0;
	width:100%;
	height: 120px;
	background-color: var(--bg-color);
	z-index: 1;
}
#header .header-content {
	overflow:hidden;
	position:relative;
	margin: 0 auto;
	max-width: 1180px;
	overflow: hidden;
	padding: 5px 15px;
	position: relative;
}
#header .header-content h1 {
	margin:0;
	padding:0;
}
.header-content-nav {
	font-size: 0.9rem;
	text-align: right;
}
@media (min-width:620px) {
	#header {
		height: 80px;
	}
	.header-content-nav {
		font-size: 0.9rem;
		position: absolute;
		top: 20px;
		right: 20px;
	}
}
h1.logolink a img {
	vertical-align: sub;
	border: 1px solid darkseagreen;
	border-radius: 10px;
}
.topnavi {
	display:none;
	float:right;
	padding:0;
	margin:15px 30px 0 0;
	font-size:.75rem;
}
.mobile-navi
	{display:block;
	width:180px;
	font-size:.75rem;
	margin:1px;
	padding:3px;
	position:absolute;
	top:0;
	right:0;
	z-index:99;
	background-color:silver;
	border:1px solid #ccc;
}
.mobile-navi .mobile-navi-content {
	color:#333;
}
@media (min-width:1000px) {
	.topnavi {
		display:block;
	}
	.mobile-navi {
		display:none;
	}
}
.hero2image {
	max-height:150px;
	width:100%;
	overflow:hidden;
}
/* footer +++++++++++++++++++++++++++++++++++++++++++++ */
#footer {
	position:sticky;
	top: calc(100vh - 80px);
	right:0;
	width: 100%;
}
#footer-content {
	margin: 0 auto;
	max-width: 1180px;
	overflow: hidden;
	padding: 20px 15px;
}
.footer-content,.header-content {
	max-width:1200px;
	margin:0 auto;
	padding:5px;
	overflow:hidden;
}
.footer-content .header-content img,.header-content .header-content img {
	float:left;
	margin-right:5px;
}
.footer-content-nav {
	text-align:center;
	width:100%;
	font-size:0.7rem;
}
.footernavi a,.topnavi a{
	margin:5px;
	color:#fff;
}
.footernavi a:visited,.topnavi a:visited{
	color:#fff
}
.footernavi
	{display:block;
	width:300px;
	margin:0 auto;
	padding:0;
	text-align:center;
	font-size:.75rem
}
/* content +++++++++++++++++++++++++++++++++++++++++++++ */
#content {
	max-width:1180px;
	margin:0 auto;
	overflow:hidden;
	padding: 85px 15px 0;
}
.content-header {
	margin:0;
	padding:0;
	h1, h2, h3, h4, h5 {
		margin:0;
		padding:0;
	}
}
.breadcrumb {
	width:100%;
	font-size:.75rem;
	border-top:1px solid #fafafa;
	border-bottom:1px solid #ccc;
	padding:5px 0;
	margin:5px 0
}
/* media queries +++++++++++++++++++++++++++++++++++++++++++++ */
@media (min-width:420px) {
	.hero2image {
		max-height:200px;
	}
}
@media (min-width:500px) {
	.hero2image {
		max-height:250px;
	}
}
@media (min-width:720px) {
	.hero2image {
		max-height:350px;
	}
}
@media (min-width:1000px) {
	.hero2image	{
		max-height:450px;
	}
}
.heroimage {
	width:100%;
	height:auto;
	margin:50px 0;
}
.infoWall {
	display:-webkit-box;
	display:flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	flex-direction:row;
	flex-wrap:wrap;
}
.infoCard {
	border:1px solid var(--border-color);
	border-radius:5px;
	color: var(--border-color);
	background-image:linear-gradient(-30deg,#fff,#eee);
	min-width:258px;
	margin:0 10px 25px 0;
	padding:10px;
	overflow:hidden;
}
.infoCard a {
	display:block;
}
.infoCard a:hover {
	background-image:none;
	background-color: var(--logo-link-color);
}
.infoCard img {
	vertical-align:middle;
}
.infoCard h1,.infoCard h2,.infoCard h3,.infoCard h4,.infoCard h5 {
	margin:2px;
}
.cover-image img {
	float:right;
	margin:1rem;
	height:auto;
	max-width:50%;
}
@media (max-width:719px){
	.cover-image {
		text-align:center;
	}
	.cover-image img {
		float:none;
		margin:1rem;
		max-width:90%;
	}
}
.myplayer
	{margin:10px;
	padding:10px;
	border:1px solid #558;
	border-radius:10px;
	background-image:linear-gradient(45deg,#afbbc0,#dfefcf);
	position:relative;
	min-width:280px;
	max-width:450px;
	overflow:hidden;
}
.myplayer .myplayer-title {
	font-weight:700;
}
.myplayer .myplayer-title img {
	width:90px;
	height:90px;
	border:1px solid #555;
}
.myplayer .myplayer-image
	{width:100px;
	height:100px;
	overflow:hidden;
	float:left;
	margin-right:20px;
}
.myplayer .player-imagecredit {
	font-size:.8em;
	color:#555;
	position:absolute;
	right:0;
	bottom:0;
	margin-right:20px;
}
.myplayer audio
	{height:50px;
	width:100%;
	margin:10px 0;
}
@media (max-width:719px){
	.myplayer {
		margin:0 auto;
		width:90%;
	}
}
.logolink a, .logolink a:visited, logolink a:active {
	text-decoration: none;
	color: var(--logo-link-color);
}
.heroimage img {
	max-width: 100%;
}
.topsection {
	text-align:center;
	margin-top:20px;
	margin-bottom:50px;
	min-height: 200px;
}
.topsection #topcredit {
	font-size:0.75em;
}
#topimage {
   	max-width:100%;
   	height:auto;
   	max-height:600px;
}
/* dark mode */
.modeswitchdiv {
	width:100%;
	margin:0;
	padding:0;
	display: flex;
	justify-content: center;
}
.modeswitchdiv-inner {
	margin:5px;
	padding:5px;
	border: none;
	/* border: 1px solid blueviolet; */
	border-radius:5px;
	overflow:hidden;
	font-size: 0.7rem;
}
.songWall {
	max-width: 800px;
	margin: 0 auto;
	padding: 0;
}
.songCard {
	width: 90%;
	margin: 15px auto;
	padding: 20px;
	color: var(--card-text-color);
	background-color: var(--card-bg-color);
	border: 1px solid var(--border-color);
	border-radius: 10px;
}
.sow-iframe-container {
	max-width:560px;
	margin:20px auto 0 auto;
}
.sow-iframe-container > iframe {
	max-width: 100%;
}
body.darkmode .songCard {
	border: 1px solid lavender;
	color: lavender;
	background-color: darkslategray;
}
.sowPager {
	border-radius: 10px;
	display: flex;
	justify-content: center;
	margin:10px;
	padding: 10px;
	overflow: auto;
	background-color: var(--bg-color-second);
	border: 1px solid var(--bg-color-contrast);
	color: var(--border-color);
}
.pagerbutton {
	border: 1px solid #336644;
	border-radius: 10px;
	padding: 5px 10px;
	margin: 10px;
	display: inline-block;
	background-color: #558866;
	color: #f9f9f9;
}
a.pagerbutton:visited {
	color: #ffd;
}

.topLink {
	margin: 0 auto;
	width: 1180px;
	max-width: 100%;
	text-align:right;
	overflow: hidden;
}
.play_button {
	color: red;
}
.iframe-placeholder {
	width: 560px;
	height: 315px;
	max-width: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
	cursor: pointer;
}
.klick_text {
	position: absolute;
	bottom: -5px;
	right: -5px;
	margin: 0;
	padding: 5px;
	color: peachpuff;
	background-color: cornflowerblue;
	border: 1px solid #333;
	border-radius: 10px;
}
/* DARKMODE +++++++++++++++++++++++++++++++++++++++++++++ */
html.darkmode body {
	background-color: var(--dk-bg-color);
	color: var(--dk-text-color);
}
html.darkmode body #header {
	background-color: var(--dk-bg-color);
}
html.darkmode body .sowPager {
	background-color: var(--dk-bg-color-second);
	border: var(---dk-bg-color-contrast);
}
html.darkmode .infoCard {
	background-image: linear-gradient(-30deg,#333,#559);
	border: 1px solid var(--dk-border-color);
}
html.darkmode a {
	color: lightsteelblue;
}
html.darkmode a:hover {
	color:darkgoldenrod;
}
html.darkmode a:visited {
	color:lightblue;
}
html.darkmode .modeswitchdiv-inner {
	border: none;
}
html.darkmode div#nav_top {
	background-color: var(--dk-bg-color);
}
html.darkmode div#nav_top a.selected {
	background-color: var(--text-color-active);
}

/* LIGHTMODE +++++++++++++++++++++++++++++++++++++++++++++ */
html.lightmode body {
	background-color: var(--bg-color);
	color: var(--text-color);
}
html.lightmode body #header {
	background-color: var(--bg-color);
}
html.lightmode body .sowPager {
	background-color: var(--bg-color-second);
	border: var(---bg-color-contrast);
}
html.lightmode .infoCard {
	background-image: linear-gradient(-30deg,#333,#559);
	border: 1px solid var(--border-color);
}
html.lightmode a {
	color:blueviolet;
}
html.lightmode a:hover {
	color:darkgoldenrod;
}
html.lightmode a:visited {
	color:blueviolett;
}
html.lightmode .modeswitchdiv-inner {
	border: none;
}
html.lightmode div#nav_top {
	background-color: var(--bg-color);
}
html.lightmode div#nav_top a.selected {
	background-color: var(--text-color-active);
}