/*

Theme Name: mh-elegance-lite-child
Description: child based on mh-elegance-lite
Author: Hans Tutschku
Version: 0.0.1
Template: mh-elegance-lite
*/

@import url('../mh-elegance-lite/style.css');


/* global color variables
as I can't use globals, I'm providing here a list to simply search and replace in case
I need to change them

transparent yellow for header
border: solid 1px hsla(43, 100%, 48%, 0.9);
background: hsla(43, 100%, 48%, 0.59);

list-header-box  (some recent works, upcoming, )
background: #f5af00;

list-box-light
background: #ffeec2;

list-box-dark
background: #c28b00;

color for links  c28b00 
link hover color 7a5800

workslink hover color ad7c00




*/

.loop-title a { font-size: 24px; font-size: 1.5rem; line-height: 1.4; color: #c28b00; }
.loop-title a:hover { color: #7a5800; }
.entry-content a { color: #c28b00; }
.entry-content a:hover { color: #7a5800; text-decoration: underline; }

#flags_language_selector img{ /* for language flags menu */
	margin:1px;
	border:1px solid #333;
}


.site-name{
	font-size: 250%;
	padding: 0 10px 0 10px;
	color: #fff;
	position:absolute; 
	top:30px; 
	left: 200px;  
	z-index: 1;
	border: solid 1px hsla(43, 100%, 48%, 0.9);
	background: hsla(43, 100%, 48%, 0.59);

}

#footer_language_list{
	font-size: 80%;
	z-index: 1;
	position:absolute; 
	top:10px; 
	right:80px;  
	border: solid 1px hsla(43, 100%, 48%, 0.9);
	background: hsla(43, 100%, 48%, 0.59);

}


#footer_language_list ul{
	list-style: none;
	margin:0;
	padding:0;
	color: #fff;
}

#footer_language_list ul li img{
	margin-right:5px;
}

#footer_language_list ul li{
	display:inline;
	margin:0 5px 0 5px;
	padding:0;
	color: #fff;
}

#footer_language_list ul li a, #footer_language_list ul li a:visited{
	color: #fff;
	text-decoration:underline;
}

#footer_language_list ul li a:hover, #footer_language_list ul li a:active{
	color: #fff;
}

/* ************************************************************************** */


.separator { min-height: 1px; font-size: 12px; letter-spacing: 0.30rem; color: #bcbfc3; background: transparent url('./images/dot.png') repeat-x; background-position: left; }
.section-title { text-align:center; display: inline-block; padding-right: 16px; padding-right: 1rem; background-color: #fff; text-transform: none; }


h1 { font-size: 32px; font-size: 2rem; }
h2 { font-size: 24px; font-size: 1.5rem; }
h3 { font-size: 16px; font-size: 1rem; padding: 30px 0 10px 0; font-weight: 600; letter-spacing: 0.25rem;}
h4 { font-size: 14px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05rem;}
h5 { font-size: 13px; font-size: 1rem; }
h6 { font-size: 12px; font-size: 0.875rem; }

p {
	margin-bottom: 0.1rem;
	padding-bottom: 0rem;
	font-size: 16px; font-size: 1rem;
}

a { color: #c28b00; font-weight: 600; text-decoration: none;  } /*8a8f97*/ /*color for links */
a:hover { color: #7a5800; text-decoration: underline;} /*be2844*/ /* link hover color */

img{max-width: 100%;}
img{ -ms-interpolation-mode: bicubic; }

.mh-container {
	margin: 0, auto;
	width: 90%;
	margin: 0 auto;
}
.mh-container-single {
	margin: 0, auto;
	width: 100;
	margin: 0 auto;
}

.mh-container-front {
	margin: 0, auto;
	width: 660px;
	margin: 0 auto;
	text-align: center;
}

/* ************************************************************************** */
/* **********  MAIN NAV   *************************************************** */
/* ************************************************************************** */

.main-nav {
	z-index: 2;
	position:absolute; 
	bottom: 2px;
	border: solid 1px hsla(43, 100%, 48%, 0.9); /* transparent yellow */
	background: hsla(43, 100%, 48%, 0.7);
	/* 
	padding: 1px 15px 1px 0px;
	display: inline;
	margin-left:  -420px; 
	*/
	width: 100%;
	
	


}

.main-nav ul { 
	float: none;
	display: inline-block;
	position: relative;
	min-width: 40%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;

}


/* distance between menu items */
/* this block is for each individual menu item */
.main-nav ul li { 
	float: left; 
	text-align: center;
	display: inline-block; 
	margin-left: 1px;
	margin-right: 1px;
	margin-bottom: 1px;
	margin-top: auto;
	position: relative;
}


.main-nav ul li a { /* submenus Biography, CDs etc. */
	display: block; 
	font-size: 100%; 
	color: #000; 
	font-weight: bold;
	line-height: 1.3; 
	letter-spacing: 0.1rem; 
	padding-right: 5px;
}


.main-nav ul li a:hover, .main-nav ul .current-menu-item > a { color: #ffffff; } /*  main menu hover color was #be2844*/

.main-nav ul li:hover > ul { /*  sub menu for works, EFIM */
	background: hsla(43, 100%, 48%, 1);  /*  sub menu background was #be2844 #6666ff */
	z-index: 9999; 
	margin-top: -15px; 
	font-size: 80%; 
} 

.main-nav ul ul { /* submenus für EFIM, Works etc. */
	display: none; 
	position: absolute; 
	float: left;
	padding: 0 0 0 -10px; 
	margin: 0 0 0 -10px;
	font-size: 70%;
	width: auto;
}

.main-nav ul ul li { /* test for submenus für EFIM, Works etc. */
	width: 10rem; 
	margin: 0; 
	text-align: left; 
	float: left; 
	left: -240;
}

.main-nav ul ul li a { padding: 10px; } /* distance of submenues instrumental, electroacoustic etc */

.main-nav ul ul ul { left: 100%; top: 0; }


.mh-content-section {
	background: #fff;
	padding: 20px 0;
}

a.workslink {
	color: #000000 ;
}

a.workslink:hover {
	color: #ad7c00;
}

#main-content {
	width: 100%;
	float: left;
	margin-right: 40px;
	overflow: hidden;
}

body {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-size: 0.875rem;
	line-height: 1.6;
	letter-spacing: 0rem;
	color: #000000;
	background: #252336;
	word-wrap: break-word;
}



.page-title {
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.1rem;
	text-align: center;
	color: #000000;
}



.wp-caption-text {
	font-size: 12px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	color: #666666;
	margin-top: 5px;
	margin-top: 0.3125rem;
	display: block;
}

.header-wrap {
	width: 100%;
	color: #000;
	text-align: center;
	vertical-align: middle;
	padding-top: 0px;
	padding-top: 0rem;
	padding-bottom: 2px;
	padding-bottom: 0.2rem;

}

/* 
.logo-text { margin-top: 10px; 
	vertical-align: middle;
	text-align: center;
	} */
	.logo-name, .logo-desc { color: #fff; }
	.logo-name { 
		font-weight: 600; 
		z-index: -1;
	}
	.logo-desc { font-size: 16px; font-size: 1rem; font-weight: 400; }



	.logo {
		padding: 2px 0 0 0;
		padding: 0.2rem 0 0 0;
		z-index: 1;
		overflow: hidden;
	}



	.title-box {
		display: inline-block;
		vertical-align: middle;
		width: auto;
		margin-top: -90px;
		margin-left: -305px;
		padding-left: 10px;
		padding-right: 10px;
		z-index: 2;
		border: solid 2px #fff;
		border: solid 2px hsla(0, 0%, 0%, 0.4);
		/*position: absolute;*/
		background: hsla(0, 0%, 0%, 0.6);
	}

	.logo-text {
		margin-top: 0px;
		z-index: 1;
		padding-bottom: 5px;
		color: #555;
	}

	.video-centered { /* global and adapts to screen widts, see below */
		width: 70%;
		margin-right: auto; 
		margin-left: auto;
	}

	.video-centered-90 {
		width: 90%;
		margin-right: auto; 
		margin-left: auto;
	}
	.video-centered-80 {
		width: 80%;
		margin-right: auto; 
		margin-left: auto;
	}
	.video-centered-70 {
		width: 70%;
		margin-right: auto; 
		margin-left: auto;
	}
	.video-centered-60 {
		width: 60%;
		margin-right: auto; 
		margin-left: auto;
	}
	.video-centered-50 {
		width: 50%;
		margin-right: auto; 
		margin-left: auto;
	}

	.video-left { /* global and adapts to screen widts, see below */
		width: 70%;
	}

	.video-left-90 {
		width: 90%;
	}
	.video-left-80 {
		width: 80%;
	}
	.video-left-70 {
		width: 70%;
	}
	.video-left-60 {
		width: 60%;
	}
	.video-left-50 {
		width: 50%;
	}


	/******************************* div for audio recordings in posts to have some space *******************************/

	.audio {
		padding-top: 20px;
	}
	/******************************* LISTINGS *******************************/

	.list-header-box {
		background: #f5af00;
		text-align: left;
	}
	.list-header-text {
		padding: 0.5em 0;
		/*font-family: 'Lato', sans-serif;*/
		color: #fff;
		padding-left: 10px;
	}

	.list-box-light {
		
		padding: 10px 0 10px;
		font-size: 100%;
		background: #ffeec2;
		overflow: hidden;
		position: relative; 
		border-bottom: 1px solid #f5af00;

	}
	.list-box-dark {
		background: #f5af00;
		overflow: hidden;
	}


	/******************************* CONCERTS *******************************/


	.concerts-date {
		text-align: left;
		padding: 10px;     
		width: 15%;
		float: left;
	}
	.concerts-place {
		text-align: left;
		padding: 10px;     
		width: 35%;
		float: left;  
	}
	.concerts-program {
		text-align: left;
		padding: 10px;     
		width: 40%;
		float: left; 
	}


	/******************************* FRONTPAGE IMAGES *******************************/

	.front-images {
		font-size: 90%;
		margin:0 auto;
		width:70%; 
	}

	.front-image-left {
		text-align: center;	   
		width: 45%;
		float: left;
	}
	.front-image-right {   
		text-align: center;	 
		width: 45%;
		float: right;
	}

	/******************************* CDs *******************************/

	.CDs {
		background: #ffeec2;
		max-width: 100%;
		height: auto;
		text-align: left;
		padding: 0.5em;
		padding-right: 10px;    
		border-bottom: 1px solid #c28b00;
		overflow:auto;
	}

	.CDs-year-and-title {
		padding-bottom: 50px;
		padding-left: 10px;
		font-weight: bold;
	}

	.CDs-year {
		text-align: left;
		padding: 10px;     
		width: 6%;
		float: left;
	}
	.CDs-title {
		text-align: left;
		padding-top: 10px;  
		width: 58%;
		float: left;  
	}

	.CDs-content {
		text-align: left;
		padding-left: 20px;

	}
	.CDs-inhalt {
		text-align: left;
		padding-bottom: 10px;
		float: left; 
		width: 50%; 
		font-size: 90%;
	}
	.CDs-image1 {
		text-align: left;
		float: right; 
		width: 25%;  
	}
	.CDs-image2 {
		text-align: left;
		float: right;  
		width: 25%; 
	}



	/******************************* Works-listings *******************************/

	.Works {
		background: #651329;
		background: hsl(221, 100%, 83%);
		max-width: 100%;
		height: auto;
		text-align: left;
		padding: 0.2em;
		border: 1px solid #ffffff;
		overflow:auto;

	}


	.Works-year-and-title {
	}

	.Works-year {
		text-align: left;
		font-weight: normal;
		padding-left: 5px;    
		padding-top: 5px;  
		width: 5%;
		float: left;
		max-height: 100%; 
		position: relative;

	}
	.Works-title {
		text-align: left;
		font-weight: bold;
		padding-top: 5px;  
		width: 20%;
		float: left;  
		max-height: 100%;    
		position: relative;
	}
	.Works-translation {
		text-align: left;
		font-weight: normal;
		padding-top: 5px;  
		width: 20%;
		float: left;  
		max-height: 100%;    
		position: relative;
	}
	.Works-Besetzung {
		text-align: left;
		font-weight: normal;
		padding-top: 5px;  
		width: 40%;
		float: left;  
		max-height: 100%;    
		position: relative;
	}
	.Works-CD {
		/*background: hsl(221, 100%, 83%);*/
		text-align: left;
		/*vertical-align: top;*/
		font-weight: bold;
		padding: 5px 0 5px;
		width: 10%;
		float: right;  
		/*position: relative;*/
	}
	.Works-image {
		/*background: hsl(221, 100%, 83%);*/
		text-align: left;
		/*vertical-align: top;*/
		font-weight: bold;
		padding: 5px 0 5px;
		width: 10%;
		float: right;  
		/*position: relative;*/
	}

	/******************************* festival-posts *******************************/

	.festival-year {
		/*background: hsl(221, 100%, 83%);*/
		text-align: left;
		font-weight: normal;
		padding-left: 5px;    
		padding-top: 5px;  
		width: 5%;
		float: left;
		max-height: 100%; 
		position: relative;

	}
	.festival-title {
		/*background: hsl(221, 100%, 83%);*/
		text-align: left;
		font-weight: bold;
		padding-top: 5px;  
		width: 42%;
		float: left;  
		max-height: 100%;    
		/*position: relative;*/
	}
	.festival-motto {
		/*background: hsl(221, 100%, 83%);*/
		text-align: left;
		font-weight: normal;
		padding-top: 5px;  
		width: 40%;
		float: left;  
		max-height: 100%;    
		position: relative;
	}
	.festival-image {
		/*background: hsl(221, 100%, 83%);*/
		text-align: left;
		/*vertical-align: top;*/
		font-weight: bold;
		padding: 5px 0 5px;
		width: 10%;
		float: right;  
		/*position: relative;*/
	}

	/******************************* projects *******************************/
	.projects-title {
		/*background: hsl(221, 100%, 83%);*/
		text-align: left;
		font-weight: bold;
		padding-top: 5px;  
		width: 42%;
		float: left;  
		max-height: 100%;    
		/*position: relative;*/
	}


	/******************************* Works-posts *******************************/

	.Works-posts {
		background: #651329;
		background: hsl(221, 100%, 83%);
		max-width: 100%;
		height: auto;
		text-align: left;
		padding: 0.2em;
		border: 1px solid #ffffff;
		overflow:auto;

	}

	/******************************* texts *******************************/

	.texts-title {
		text-align: left;
		font-weight: 600;
		padding-top: 5px;  
		width: 75%;
		float: left;  
		max-height: 100%;    
		position: relative;
	}

	/******************************* texts *******************************/

	.ceramics {
		background: #ffeec2;
		max-width: 100%;
		height: auto;
		text-align: center;
		overflow:auto;
	}

	.ceramics-text {
		display: inline-block;  
		max-width: 90%;
		height: auto;
		text-align: center;
		padding-top: 30px; 
		overflow:auto;
	}

	.photography-text {
		display: inline-block;  
		max-width: 90%;
		height: auto;
		text-align: center;
		padding: 30px 0 50px; 
		overflow:auto;
	}

	/******************************* archive *******************************/

	.archive-years {
		text-align: center;
		padding: 10px 0 30px; 
	}


	/************************************ SCREEN WIDTH 1066px ************************************/
	/************************************ SCREEN WIDTH 1066px ************************************/
	/************************************ SCREEN WIDTH 1066px ************************************/
	/************************************ SCREEN WIDTH 1066px ************************************/
	/************************************ SCREEN WIDTH 1066px ************************************/
	/************************************ SCREEN WIDTH 1066px ************************************/


	@media screen and (max-width: 1066px) {
		.logo-name {
			font-size: 200%;
		}
		.mh-container { width: 95%;}
		.main-nav {
			font-size: 85%; 
			
		}
		#main-content { width: 95%; } /*hans*/
		.loop-header, .loop-thumb { width: 100%; float: none; margin-right: 0; }
		.loop-thumb, .loop-header .entry-meta { margin-top: 20px; }
		.entry-title-wrap, .entry-meta-wrap { float: none; width: 100%; }
		.entry-title-wrap { margin-bottom: 20px; margin-bottom: 1.25rem; }
		.entry-header .entry-meta { float: left; }
		.commentlist ul, .commentlist ol { margin: 0 0 30px 0; margin: 0 0 1.875rem 0; }
		.commentlist ul ul, .commentlist ol ol { margin: 0; }

		.site-name{
			top:30px; 
			left: 160px;  
		}
	}


	/************************************ SCREEN WIDTH 924 ************************************/
	/************************************ SCREEN WIDTH 924 ************************************/
	
	@media screen and (max-width: 924px) {

		.main-nav {
			font-size: 80%; 
			left: 0px;
			right: 0px;
			margin-left: 0px;
			padding-right: 2px;

		}
		.main-nav ul {
			padding-right: 2px;

		}
		.site-name{
			top:30px; 
			left: 140px;  
		}

	}

	/************************************ SCREEN WIDTH 870 ************************************/
	/************************************ SCREEN WIDTH 870 ************************************/
	
	@media screen and (max-width: 870px) {

		.main-nav {
			font-size: 70%; 
			left: 0px;
			right: 0px;
			margin-left: 0px;
			padding-right: 1px;

		}
		.main-nav ul {
			padding-right: 1px;

		}
		.site-name{
			top:30px; 
			left: 120px;  
		}

		.main-nav ul ul li a { padding: 5px; } /* distance of submenues instrumental, electroacoustic etc */

		.main-nav ul li a { /* submenus Biography, CDs etc. */	
			padding-right: 2px;
		}


	}

	/************************************ SCREEN WIDTH 780px ************************************/
	/************************************ SCREEN WIDTH 780px ************************************/
	
	@media screen and (max-width: 780px) {

		.main-nav {
			font-size: 68%; 
			left: 0px;
			right: 0px;
			margin-left: 0px;
			padding-right: 1px;

		}
		.main-nav ul {
			padding-right: 1px;

		}
		.site-name{
			top:20px; 
			left: 120px;  
		}

	}


	/************************************ SCREEN WIDTH 767px ************************************/
	/************************************ SCREEN WIDTH 767px ************************************/
	/************************************ SCREEN WIDTH 767px ************************************/


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

		body { font-size: 80%; }

		.mh-container-front {
			width: 630px;
		}

		.front-images {
			font-size: 80%;
		}
		.logo-name {
			font-size: 150%;
		}
		.title-box {
			margin-top: -70px;
			margin-left: -305px;
		}

		.concerts-program {	    
			width: 30%;; 
		}

		.logo {
			padding: 40px 0;
			padding: 0.5rem 0;
			margin: 0 0 -1.3rem;
		}

		/*.mh-container { max-width: 440px; width: 90%; }*/
		.mh-container { max-width: 95%; width: 95%; padding-top: -1rem;}

		#main-content, #main-sidebar { float: none; width: 100%; margin-right: 0; }
		#main-content { margin-bottom: 30px; margin-bottom: 1.875rem; }
		[class*='mh-col-'] { float: none; width: 100%; margin: 0; }
		.js .slicknav_menu { display: block; }
		.js .main-nav { display: none; }
		.header-wrap { padding: 0; }
		.latest-news-widget .news-item { margin-bottom: 30px !important; margin-bottom: 1.875rem !important; }

		.Works-year {
			width: 10%;
			margin: 0 5px;
		}
		.Works-title {
			width: 30%;
		}
		.Works-translation {
			width: 20%;
		}
		.Works-Besetzung {
			width: 30%;
		}
		.Works-CD {
			width: 10%;
		}

		.CDs-year {
			width: 10%;
		}
		.CDs-title {
			width: 54%;
		}

		.festival-year {
			width: 10%;
		}
		.festival-title {
			width: 37%;
		}
		.festival-motto {
			width: 35%;
		}

		.video-centered { /* global and adapts to screen widts, see below */
			width: 90%;
			margin-right: auto; 
			margin-left: auto;
		}
		.video-centered-50 { /* global and adapts to screen widts, see below */
			width: 70%;
			margin-right: auto; 
			margin-left: auto;
		}
		.video-left { /* global and adapts to screen widts, see below */
			width: 90%;
		}

		.site-name{
			font-size: 240%;
			left: 20px;
		}


		#footer_language_list{
			font-size: 70%;
			right: 20px;
			bottom: 10px;
			top: auto;
		}

	}


	/************************************ SCREEN WIDTH 600px ************************************/
	/************************************ SCREEN WIDTH 600px ************************************/
	/************************************ SCREEN WIDTH 600px ************************************/


	@media screen and (max-width: 600px) {
/*	img{max-width: 60%;}
	img{ -ms-interpolation-mode: bicubic; }
	*/
	body { font-size: 80%; }

	.logo-name, .logo-desc { color: #fff; }

	.title-box {
		margin-top: -50px;
		margin-left: -205px;
	}
	.front-images {
		font-size: 80%;
	}

	.logo-name {
		font-size: 80%;
	}
	.logo {
		padding: 2px 0 0px;
		padding: 0.23rem 0 0rem;
		margin: 0 0 -1rem;
		z-index: 1;
	}

	.site-name{
		font-size: 200%;
		left: 10px;
		top: 10px;
	}


	#footer_language_list{
		font-size: 70%;
		right: 10px;
	}


	*/

	/*.mh-container { max-width: 440px; width: 90%; }*/
	.mh-container { max-width: 95%; width: 95%; padding-top: -0.5rem;}

	#main-content, #main-sidebar { float: none; width: 100%; margin-right: 0; }
	#main-content { margin-bottom: 30px; margin-bottom: 1.875rem; }
	[class*='mh-col-'] { float: none; width: 100%; margin: 0; }
	.js .slicknav_menu { display: block; }
	.js .main-nav { display: none; }
	.header-wrap { padding: 0; }
	.latest-news-widget .news-item { margin-bottom: 30px !important; margin-bottom: 1.875rem !important; }
}


/************************************ SCREEN WIDTH 455px ************************************/
/************************************ SCREEN WIDTH 455px ************************************/
/************************************ SCREEN WIDTH 455px ************************************/


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

	.title-box {
		margin-top: -100px;
		margin-left: -205px;
	}

	.site-name{
		font-size: 150%;
		left: 5px;
		top: 5px;
	}


	#footer_language_list{
		font-size: 70%;
		right: 5px;
	}

}

/************************************ SCREEN WIDTH 412px ************************************/
/************************************ SCREEN WIDTH 412px ************************************/
/************************************ SCREEN WIDTH 412px ************************************/


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


	.concerts-program {	    
		width: 20%;; 
	}
}

/************************************ footer ************************************/

footer { font-size: 13px; font-size: 0.8125rem; min-height: 30px; padding: 30px 0; padding: 0.1rem 0; 
	color: #fff;
	/*background: #252336; */
}

.centervideo { margin: 0 auto }

.archive-year-box {
	display: inline-block;
	margin: 0.4em;
}