@font-face {
 font-family: 'mmOtsikko';
 src: url('BirchStd.eot'); /* For Internet Explorer 6+ */
}
@font-face {
 font-family: 'mmOtsikko';
 src: url('BirchStd.ttf'); /* For non-IE browsers */
}


body, html{
	background-color: #000000;
    font-family: Arial, Verdana, Geneva, sans-serif; font-size: 16px; color:#ffffff;
	letter-spacing: 0.4px;
	line-height: 150%;
	height: 100%;
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
}

#res-kuva{
	max-width: 100%; height: auto;
}


.footer{
	background:#370202;
}
.pagewidth{
	margin-top: 0;
	margin-left:auto;
	margin-right:auto;
	position:relative;	
	z-index:0;
	background-image: url('../layout/logo-tausta.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center top;
	text-align:center;
	vertical-align:top;
}
.intro-logo{
	height:100%; 
	position:relative; 
	background-image:url('../layout/logo-tausta-2026.jpg');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	background-attachment: fixed;
	text-align:center;
}
.content_table{
	margin-top:70px; 
}
.menu{
	font-size:16px;
	color:#fff;
}

.menu a{
	color: #fff;
}

.menu:hover{
	color: #ecc7c7;
}

.menu:active{
	color: #ecc7c7;
}

.tyhja-vali{
	height:150px;
}
.tyhja-vali-pieni{
	height:50px;
}

.div-top-logo{
	position: absolute;
    top: 0;
	left:0;
	text-align:left;
	width:350px;
}

.top-logo{
	margin-top:20px;
	max-width: 100%;
	height: auto;
}

.musiikkiKuva{
	max-width: 95%;
	height: auto;
}

.bandiKuva{
	max-width: 95%;
	height: auto;
}

.aloita-kuva{
	/*position:relative;	*/
	position: absolute;
    bottom: 0;
	cursor:pointer;
	text-align:center;
	width:100%;
	/*margin-top:40px;*/
	
}

.div-otsikko-inner h1, .div-otsikko-inner h2, .div-otsikko-inner h3{

	font-family: mmOtsikko, Verdana, Geneva, sans-serif;
    line-height: 0.95em;
    letter-spacing:1px;	
	font-size: 36px;
	color:#fff;
	padding:0px;
	margin:0px;
	font-weight:normal;
}

.otsikko-kuva{
	max-width: 100%; height: auto;
}

.div-menu{
	position:fixed;
	width:100%;
	z-index:998; 
}

.div-otsikko{
	height: 65px;
	width: 800px;
	text-align:center;
	margin:auto;
	/*background: rgba(255,255,255,0.25);*/
	background: rgba(55,2,2,0.85);
	font-family: mmOtsikko, Verdana, Geneva, sans-serif;
    line-height: 0.95em;
    letter-spacing:1px;	
	font-size: 36px;
}
.div-otsikko-inner{
	vertical-align: middle;
	padding-left:15px;
	padding-bottom:15px;
	padding-top:20px;
	text-align:left;
}

.content-box{
    /*height:auto;*/
	min-height: 410px;
	margin-top:0px;
	padding-top:15px;
	width: 800px;
	text-align:center;
	/*min-height: 305px;*/
	margin:auto;
	/*background: rgba(36,36,36,0.75);*/
	background: rgba(38,3,3,0.75);
	border: solid 1px #370202;
}
.content-box-inner{
	width: 95%;
	text-align:left;
	padding:20px;
}

.contentBoxMusiikki{
	width: 100%;
	text-align:center;
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 5px;
}

.musiikkiDiv{
	display:block;
	text-align:center;
	min-width: 50%;
	padding-top:20px;
	padding-bottom:20px;
}

.bandiDiv{
	display:table-cell;
	text-align:center;
	width: 20%;
	padding-top:10px;
	padding-bottom:10px;
}

.footer-box{
	width: 100%;
	text-align:center;
	/*min-height: 305px;*/
	margin:auto;
	background: #370202;
}
.footer-box-inner{
	text-align:center;
	vertical-align: middle;
	padding-top:15px;
	padding-bottom:15px;
}

h1 {
  font-family: Arial, Verdana, Geneva, sans-serif; font-size: 25px;
  line-height: 1.45em;
  color: #000000;
  font-style: bold;
  //text-align: right;
}

h2 {
 font-family: Arial, erdana, Geneva, sans-serif; font-size: 16px;
  line-height: 1.45em;
  color: #ffff00;
  font-style: bold;
  margin-bottom:4px;
  //text-align: right;
}

 // Päävalikko
 
 .topnav {
  overflow: hidden;
  background-color: #040d1e;
}

.topnav a {
	font-family: Arial, verdana,tahoma , sans-serif;
	font-size:16px;
	color:#ffffff;
	font-weight:normal;
    text-decoration: none;
    padding: 4px 25px;
    text-align: center; 
    display: inline-block;	
	float: left;
}

.topnav a:hover {
	color: #ecc7c7;
}

.activeMenu {
	color: #ecc7c7;
}

.topnav .icon {
	display: none;
	color: #ecc7c7; 
 
}

a:link{
	color:#fff;
}
a:hover{
	color:#ecc7c7;
}
a:visited{
	color:#fff;
}
a:active{
	color:#ecc7c7;
}

#header-mobile{
	display:none;
	padding:0px;
	padding-top:0px;
	padding-bottom:10px;
	position: absolute;
	position:fixed;
	width:100%;
	z-index:998; 
	top:0px;
}	
.menu-mobile{
	display:none;
	background:#520303;
}

@media screen and (max-width: 800px) {

	#header-mobile{
		display:block;
	}	
	.menu-mobile{
		display:block;
	}		
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}

	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.div-top-logo{
		position: absolute;
		top: 0;
		left:50%;
		margin-left:-150px;
		text-align:center;
		width:300px;
	}
	.top-logo{
		width:100%;
		/*margin-top:40%;*/
	}

	.box-kuva{
		display: none;
	}

	.aloita-kuva{
		bottom:20px;
		display:block;
		/*margin-top:150px;*/
		margin-left: auto;
		margin-right: auto;
	}

	.oikea-kuva{
		display: none;
	}
	
	.menu-holder{
		display: none;
	}
	
	.div-otsikko{
		height: 65px;
		width: 90%;
	}
	.content-box{
		/*height:auto;*/
		min-height: 410px;
		margin-top:0px;
		width: 90%;
	}
	.content-box-inner{
		width: 90%;
	}
	.contentBoxMusiikki{
		grid-template-columns: auto;
	}	
	.musiikkiDiv{
		display:block;
		text-align:center;
		width: 100%;
		padding-top:20px;
		padding-bottom:20px;
	}	
	.bandiDiv{
		display:block;
		text-align:center;
		width: 100%;
		padding-top:10px;
		padding-bottom:10px;
	}		
}