/*
Theme Name: MyClassic-3 responsiv
Theme URI: http://wordpress.org/
Description: MyClassic Mandalamat responsiv
Version: 1
Author: CG
Date: 2022 July
Tags: green, responsiv
*/
 html, body, main, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,acronym, address, cite, code, del, em, img, ins, kbd, q, s, small, strike, strong, sub, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, embed, figure, figcaption, footer, header, menu, nav, section, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; /*font: inherit;*/ vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, menu, nav, section, main { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

* { margin: 0;
	padding: 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

html, body {  height: 100%;}
body {
    font-family: "Times New Roman", Times, /* Georgia, */ serif;
    color: #f00;
    background: #031a1a;
    line-height: 1.3em;
    font-size: 11px;
    padding-top: 5px;
    letter-spacing: 0;
	margin: 0;
    padding: 0;
	width: 100%;	
}
 h1, h2, h3, h4, h5, h6, .site-title {
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	letter-spacing: 0;
	text-transform: none;
	color: #fff8dd;
	margin: 0 0 0.2em;
	padding: 0;
	line-height: 1.3em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .site-title a {	color: #ede8d5;
}

p {
   font-size: 1.0em;
   padding: 0.3em;
   margin-bottom: 0.5em;
   }
p a { 	color: #84f0dc;}
p a:hover {
	color: #e0c96e;}
h1 {
	font-size: 2.5em;
	margin: 0 0 10px 0;
}
h2 {	font-size: 2em;}
h3 {	font-size:1.5em;}
h4 {	font-size: 1.3em;}
h5 {	font-size: 1.1em;}
h6 {	font-size: 1em;}
a {     color: #a2f2f5;
	text-decoration: none;
}
table {
	border-collapse: collapse;
	width: 100%;
	border-spacing: 0;
}
table th, table td {
	margin-bottom: 0.3em;
	max-width: 98%;
	padding: 3px 5px 10px 5px;
	text-align: center;
}
input { height: 24px;}
hr {
   border-color: #ff0000;
   -moz-border-bottom-colors: none;
   -moz-border-image: none;
   -moz-border-left-colors: none;
   -moz-border-top-colors: none;
   border-style: solid;
   border-width: 0 0 1px;
   clear: both;
   height: 0;
   margin: 0.5em 0;
}

cite {
	font-size: 90%;
	font-style: italic;
}

blockquote {
	border-left: 5px solid #ccc;
	margin-left: 1.5em;
	padding-left: 5px;
}

img {max-width: 100%; 
	height: auto; 
	vertical-align: bottom;}
	ol, ul { list-style: none;
		font-size: 1em;}
		
ul { list-style: disc outside none;}
.error404  p, .search-no-results p {
	color: #cc4433;
	font-size: 1.8em;
	 font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     font-weight: normal;
     line-height: 1.3em;
     padding: 2em 1em;
    text-align: center;
  }
.meta, meta a, nav a , .sub-nav a, .subhead, #nav-start a, .kachel h4 {
	 font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     font-weight: normal;
     }
.meta {font-size: .75em;}
.meta a { padding: 15px;}
.meta, .meta a { 	color: #ff9900; 	}
.meta a:hover {color: #dd0000;}
/* .bottom { 
	width: 80%;
	margin: 20px auto 10px auto;;
    } */

#page {
	background-color: #182e05;
	margin: 0 auto 0;
	width: 100%;
    max-width: 1600px;
	/* height: calc(100% - 80px); */
	display: table;
    table-layout: fixed;			}
		
a:hover {	color: #eecc39;
	text-decoration: none;}
/*header++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
header {
	position: relative;
	height: auto;
	max-width: 1600px;
	margin: 0 auto 0 auto;}
.top {	display: block;
	min-height: 50px;	
	/* height: 126px; */}
.title-container{
	position: absolute;
	margin:10px;
	/* padding: 10px 0 0 0; */}
.site-title { 
	/* display: block; */
	font-size: 2.0em;
	text-decoration: none;
    line-height: 1em;
   /*  margin: 0.1em 0 0.15em; */
	/* margin-left: -10px;	 */
    }
		
.site-title a:hover {	color: #eecc39;}
.site-description {
	color: #f964d0;
	font-size: 0.9em;	
	/* margin-left: -1.2em; */
	/* margin-top: 1.2em; */
/* 	letter-spacing: 0.085em; */	
}
#logo {
	float: right;
	padding: 10px  10px 0px 0;
	/* margin: 10px 0; */
    width: 35px;
    height: auto;
    background: transparent;
}
nav {
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
	/* width: 100%; */
    background: #182e05;
  /*   height: 26px; */
     }
nav ul { 
	list-style-type: none;  }	
nav li {
	 float: left; position: relative; white-space: nowrap; background-color: #1a3845; }	 
nav a {
	 font-size: 9px; 
	 color: #ffee7f; 
	 text-decoration: none; 
	 padding: 4px 4px; 
	 display: block; }	 
nav a:hover {
	 background-color: #f3f3f3; color: #cc0000; }	 
nav li .aktiv {
	 color: #ffee7f; background: #520691;}

/*...............Hamburger-Navi................*/
.hamcontainer{
	position: relative;
	width: 33px;
	height:33px;
	background: #d5f5ff;
	margin: -35px 0 16px 67%;
	
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;	
	box-shadow: 0px 0px 10px 5px #d7d7d7;
	}
#hamburger {
	height: 15px;
	width: auto;
	cursor: pointer;
	}
#top-nav {
	list-style:none;
	/* padding:10px; */
}
.js #top-nav {
	display:none;
}

#top-nav li {	
	float:left;
	width:50%;
}

#top-nav a {	
	padding: 8px 8px;
	font-size: 1em;
}	 
/*.............End..Hamburger-Navi................*/
	 
header hr {
	 margin: 0 auto 0 auto;
	 }
/*End header*/
 
/*Startseite xampp, mandalamat.de*/
.page-id-11 .top, .page-id-2852 .top  { min-height: 85px;}
.page-id-11 nav, .page-id-11 header hr, .page-id-2852 nav, .page-id-2852 header hr { display: none;}
/*Billypage*/
.page-id-8672 nav, .page-id-8672 header, .page-id-8665 nav, .page-id-8665 header, .page-id-8672 .hr-bottom, .page-id-8665 .hr-bottom, .page-id-8672 footer, .page-id-8665 footer { display: none;}
.page-id-8672 #page, .page-id-8665 #page {background-color: #1e1c3c}
/* End Billypage*/
.page-id-11 .sub-nav, .page-id-2852 .sub-nav { display: flex;}

/*Home*/
#home { width: 100%;}
#post-4345 .storycontent, #post-13 .storycontent { padding: 15px 25px 20px 0;}
/* #post-4345 #menu, #post-13 #menu { display: block;}   */
 /*Mandalamat Functional Principle*/
.page-id-4156 #content, .page-id-89 #content {background-color: #535353;}
#post-4156 .sub-nav a, #post-89 .sub-nav a {color: #960000;}
#post-4156  .sub-nav a:hover, #post-89 .sub-nav a:hover  { color: #55f0ef; }

#nav-start {transform: translate(50%, 55%);
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
 	left: 0;
    width: 50vw;
    top: 25vh;
    list-style-type: none;
    position: relative;
	z-index: 1;
     }
#nav-start #hom  a{
    letter-spacing: 0.2em;
    font-weight: bold;
    color: #fffaed;
	padding-bottom:7px;
	padding-top: 7px;
     }
#nav-start #hom  a:hover{  
     color: #cc0000; 
     }
#nav-start a {
	 font-size: 9px;
	 line-height: 1.1em;
	 color: #ffee7f; 
	 text-decoration: none; 
	 display: block;
	 padding: 1px 2px; 
	 border: 2px solid #520691;	 opacity: 1;	 	 }
#nav-start a:hover {
	 background-color: #f3f3f3; color: #cc0000;  }	
#hom,#mal, #gra, #wor, #mus, #ins, #man, #cgp, #akt,  #kon {	opacity: 1; 
	 background-color: #1a3845;
	 position: absolute;     transform: translate(-50%, -50%)	 }
#hom { 
	top: 35vw;
      left: 0vw;}
#mal {
	top: 25.89vw;
      left: -18.81vw;}
#gra {
	top: 9.89vw;
      left: -30.33vw;}
#wor {
	top: -9.89vw;
      left: -30.44vw;}
#mus {
	top: -25.89vw;
      left: -18.81vw;}
#ins {
	top: -35vw;
      left: 0vw;}
#man {
	top: -25.89vw;
      left: 18.81vw;}
#cgp {
	top: -9.89vw;
      left: 30.44vw;}
#akt {
	top: 9.89vw;
      left:30.44vw;}
#kon {
	top: 25.89vw;
      left: 18.81vw;}
	 
#innenbild {
	padding: 0;
 	margin: 0;
 	width: 40vw;
 	position: absolute;	transform: translate(-50%, -50%);
	z-index: -1;	
 }
#innenbild img {padding: 0;}
#nav-start .slideshow_content a {border: 0px;}
#nav-start .slideshow_content a:hover {background-color: transparent;}
/*Ende Seitenspezifische. Designs*/
#content {    color: #fff;
	height: 100%;
	display: table-row;
	
 }
 
/* .page {
    height: 100%;
	} */

.content-wrapper {	
	display: flex;
    flex-direction: column;
	width: 100%;		
	max-width: 1400px;	
	margin: 0 auto;
	padding: 0;	
	height: 100%; 	
	
	
}
.article-wrapper {
	background: transparent; 
	display: flex;
    flex-direction: column;
	width: 95%;		
	margin: 1.5% auto 0 auto;
	/* padding: 2% 2% 0 2%;	 */
	color: #fff;
	height: 100%; 	
	
}

article  {	
    background: transparent; 
	width: 100%;		
	margin: 0 auto ;
	padding: 0;		
	height: 100%;
	min-height: 65vh;
	
	}
/* ..................Footer ......................*/

.subnav-container {
	margin-top: auto;
	}
	
.hr-bottom {
	width: 80%;
	margin: 30px auto 0px auto;
	}

.sub-nav {
	background: transparent;
	/* margin: 6px auto; */
	clear: both;	
	display: -webkit-flex;
	display:  flex; 
    align-items: center;
    justify-content: center;
	color: #ffffff;
	}

.sub-nav  ul {
	/* position: relative;
    float: left; 
    margin: 0 auto;
    padding: 0; */
	display: flex;
	align-items: center;
	margin: 5px;}

.sub-nav li {		
    background: transparent;
    list-style: none;
	padding: 0 2vw;	}

.sub-nav a {
	/*text-align: center;*/
	font-size: 8px;	
	font-weight: normal;
	color: #e836ca;
	text-decoration: none;
	letter-spacing: 0.05em;
	padding: 5px 5px; 
	display: block}

.sub-nav a:hover {
	color: #ff9c1c;
	background-color: #e9e9e9;}
	
.sub-nav a.aktiv {
	color: #ffefef;
	background: #ffbf2d;
	}

/*Searchform*/
.searchform {
	margin-top: 4px;
	position: relative;
	max-width: 100px;	
	width: 70px;
	padding: 2px 4px;
/* 	float: right; */
}
.searchfield { 
    font-family: arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 0.9em;
	height: 13px;
   /*  padding: 4px 4px; */
   /*  max-width: 20%;	 */
	}
.searchform input {
	background: none repeat scroll 0 0 transparent;
	border: medium none;
}
 .submit { 
	height: 13px;
	width: 13px;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 3px;
	top: 2px;	
}
/*End Searchform*/
	
footer  {
	text-align: center;
 }

footer img{ padding: 0.5% 0;}
footer p, .error404 footer p {
    margin-bottom: 0;
    padding: 0;}

.hide { display: none;}
 /* Captions & aligment */
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft {float: left;}
.alignright {float: right;}

blockquote, input, textarea, .searchform, .searchfield, .wp-caption, .widget-default   { 
   -moz-border-image: none;
  border-style: solid;
   border-width: 1px;
     border-color: #020847;
   background: none repeat scroll 0 0 #520691;
   color: #fff;
}

.wp-caption {
	border: 0 solid #d90;
	text-align: center;
	background-color: #273a42;	padding: 0.8em;
	/* margin: 10px; */
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
.wp-caption p.wp-caption-text {
	font-size: 0.8em;
	line-height: 1em;
	padding: 0.8em 0 0;
	margin: 0;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: normal;
}

/* End captions & aligment */
/* ...................Audio-Player.......................... */
.ppq-audio-player .play-pause-btn .play-pause-icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}
.ppq-audio-player .play-pause-btn .play-pause-icon:after, .ppq-audio-player.player-playing .play-pause-icon:after {
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAASCAMAAADrP+ckAAABNVBMVEUAAAAAmIcAmYgAm4sAnIsAnIwAnI0AnY0AnY4Ano4Ano8An5AAoJEAoZEAoZIAopMBn5ABoJABoJEBoZEBoZIBoZMBopMCoZICopMCopQCo5QDoJEDoZEDo5QDo5UFopMGo5QKpJYLpJYMpZcMppgNpZcNppgNp5gOppcOppgOp5gOp5kQqJoSp5kSqJoTqZsbrJ4drJ8irZ8mrqEnsKMrsqUtsqYytKg0tak5t6tHvLJJvbNLvbNqycBrysFsycFwy8Jwy8N3zsZ+0MiA0cqD0suH1M2L1c6P1tCk3tmm39mv4t285+PE6ebH6ufN7erS7+zV7+3W8O3X8O7a8u/k9fPs+Pft+Pfx+fjx+fnx+vny+vr1+/v2+/v5/fz7/f38/f38/v38/v79/v7+/v7+//////+ALAV1AAAAAXRSTlMAQObYZgAAATxJREFUKM+F0tlWwjAQBuAgQgHTRFFrqaK4IALiiuKugPsKrqUo0DbO+z+CDYHIFZ279nznP3P+DHLh4+L8HWybAQM+qDdlUgGXMRcqpIwYnIwoG7ct6LjAfgdUKlZoAmPQLMRSCBrLZH4idPAEbqcb11eamm1w1ciqGgJrFVPNiMydfkLH8X5LhXMWV1YOc7WCKSGGHty6A9Z2ZRbFGaEymApFKaHJceXoFRxnmPKcZoQXL79huPLijKng/ouP4nFJZcdXUWJML/gpLyo6du2zPTUmQ3uPw7cnWiK8dPUDzn+rUvVaFXUdv4Fjy+51nBcqj3XxQl71o9v33eqlipO0yZWZJnEE5pqqJZTZsy/xjHKvYqBk82+7FCgiaO1GZqKHz/2TkKpWrYv7qldryIGH9c2bFrR75yXV4PwBrZh1OjRqx9oAAAAASUVORK5CYII=);  
  background-image: url(https://mandalamat.de/wp-content/themes/myclassic-3/Start-Stop-Export.svg); 
  background-size: 37px 18px
}
.ppq-audio-player {
  line-height: 46px;
  position: relative;
  overflow: hidden;
  height: 45px;
  margin: 2px auto;
  color: #000;
  background: #c4f1ff;
  border-radius: 6px;
  max-width: 530px;
}
.ppq-audio-player audio {
  position: absolute;
  vertical-align: baseline
}
.ppq-audio-player .play-pause-btn {
  float: left;
  margin: 6px 0 0 5px
}
.ppq-audio-player .play-pause-btn .play-pause-icon {
  position: relative;
  display: block;
  width: 33px;
  height: 33px;
  border: 2px solid #791717 /*#385a90*/;
  border-radius: 100%;
  background-color: #fff;
  box-shadow: 6px 0 6px 1px #3a4564;
}
.ppq-audio-player .play-pause-btn .play-pause-icon:after {
  display: block;
  content: "";
  background-position: 0 0;
  width: 17px;
  height: 18px
}
.ppq-audio-player.player-playing .play-pause-icon:after {
  background-position: -25px 0;
  width: 12px;
  height: 17px
}
.ppq-audio-player .player-time {
  float: left;
  width: 45px;
	margin-right: 4px;
  text-align: right
}
.ppq-audio-player .player-time-duration {
  float: right;
  margin: 0 0 0 8px;
  text-align: left
}
.ppq-audio-player .player-bar {
  position: relative;
  overflow: hidden;
  height: 6px;
  margin-top: 20px;
  background-color: #fff
}
.ppq-audio-player .player-bar .player-bar-loaded {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 /*  border-radius: 3px; */
  background: #361dac /* #4c4086 */;
}
.ppq-audio-player .player-bar .player-bar-played {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
 /*  border-radius: 3px; */
  background: #ff1ac6;
  /* box-shadow:  16px 0 16px 10px #3322aa; */
}
 /* ................... End Audio-Player.......................... */
 
/*Sidebar-Home Widget*/
#menu {
	display: none;
	float: right;
	background: rgba(174, 171, 171, 0.64);
	margin: 42vh 3% 0 0;
	padding: 5px 0 5px 0;
	position: absolute;
	right: 2px;
	top: 0;
	width: 22%;
}
#menu  ul {
	list-style-type: none;
	font:  bold 110% 'Times New Roman', Times, serif;
    color: #FF0303;
	letter-spacing: 0.1em;
	margin-top: 10px;
	padding-bottom: 2px; 
	padding-left: 5px;
	text-transform: uppercase;
}
#menu ul ul {
	text-align: left;
    border: 0;
	font: normal normal 10px/100% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	letter-spacing: 0;
	margin-top: 0;
	padding: 0;
	padding-left: 0;
	line-height: 1.4em;
}
#menu ul ul a {
	color: #fff;
	text-decoration: none;
}
#menu ul ul a:hover {
	color: #55f0ef;
}
 /*End Sidebar*/
 
 /*....................Buttons Startseite CGP.................*/	
 a.button-cgstart {
	margin: 1em;
	background-color: #E5EEC5;
	color: #E10000;
	display: inline-block;
	padding: .8em 1.4em;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
	-webkit-transition: all .3s ease-in-out;
	}
 a.button-cgstart:hover {
	background:  #7cbfcd;
	color: white;}		
/*...................End Buttons Startseite CGP..............*/
a.button {
	position: relative;
	display: inline-block;
	margin: 0;
	line-height: 1em;
	box-sizing: border-box;
	background-color: #cc0404;
	font-family: Times New Roman;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	color: #fff;
	padding: 0.3em 0.9em 0.35em 0.9em;
/* 	border-radius: 0px;
	border-style: solid;
	border-width: 0px;
	border-color: #bb0022; 
	box-shadow: 10px #f2f2f2;*/
	/* -webkit-transition: all .2s ease-in-out;	 */	
	}
a.button:hover {
	background:  #bee0ed;
	color: #cc0404;
	border-color: #6100b5;	
	}		
a.button.max-1, a.button.max-2 /*up, next*/{
	font-size: 1.25em;
	color: #9cecfc;	
	padding-bottom: 0.4em;
	background-color: #de1b1b;	
}	
a.button.max-2 /*next*/{
	font-size: 1.125em;
}
a.button.max-1:hover, a.button.max-2:hover  {
	color: #ff30ac;
	background-color: #d3f7fc;	
}
a.button.max-3 /*home*/{
	font-size: 1.125em;
	padding-bottom: 0.4em;
	background-color: #59ba98;	
}	
a.button.max-3:hover {
	color:#c90a0a;
	background-color: #fcfacd;	
}
a.button.max-4 /*mandala graphic*/{
	font-size: 1.25em;
	padding-bottom: 0.4em;
	background-color: #339999;	
}	
a.button.max-4:hover {
	color:#cf0217;
	background-color: #fcfcfc;	
}
a.button.max-5 /*Mandalamat*/{
	font-size: 1.25em;
	padding-bottom: 0.4em;
	background-color: #59ba98;	
}	
a.button.max-5:hover {
	color:#cf0217;
	background-color: #fcfacd;	
}
a.button.max-6 /*Instrumente*/{
	font-size: 1.125em;
	padding-bottom: 0.4em;
	background-color: #bb0022;	
}	
a.button.max-6:hover {
	color:#d60390;
	background:#d3f7fc;
	}
 


.clearfix::before, .clearfix::after {
    content: " ";
    display: table;
}

.bg1 {background: #004a7b6b;}
.bg2 {background: #83a46257;} 
.bg3 {background: #f361ff70;}
.bg4 {background: #6063ff36;}
.bg5 {background: #c1c15538;}
.archiv-bg {
	background-image:url(https://mandalamat.de/wp-content/themes/myclassic-3/Archive-transp.png);  
	background-size: 25% auto;
	height:100%;
}

.o-u-padding {
	padding-top: 1em;
	padding-bottom: 1em;
}
.o-u-margin {
	margin-top: 1em;
	margin-bottom: 1em;
}
.pictext {
	/* background-color: #838e8742; */
	margin: 0.8em auto 0 auto;
	padding: 1% 3% 0.5% 3%;
	display: inline-block;
	text-align: center;	
/* 	border-radius: 3px; */
}
.pictext h4, .pictext h5, .pictext h6{
	line-height: 1em;
	text-align: center;
	margin: 0.1em 0;
}

.frame {
	padding: 0.3em;
	background-color: #f2f0db;
}

/* Raster Gridlayout */

.columns {
	float:left;
	padding-left:1em; /* 16px */
	padding-right:1em; /* 16px */
	text-align: center;
}

/*wegen wp-bug*/
.columns p{ 
	padding: 0;
	margin: 0;
}
.floatright {float: right;}
.row {width:auto;}
.row:before, .row:after {
	content:'';
	display:table;
	}
.row:after {clear:both;}
.row .row {
	margin-left:-1em;
	margin-right:-1em;
	}
.box-1b { 
	text-align: center;
	padding-bottom:5%;
	}
.box-2b { 
	text-align: center;
	padding-bottom: 5%;	
	}
.columns .columns .columns{
	padding-left: 0;
	padding-right: 0;
	}

.flexbox, .kachelbox {
		display: flex;
		align-items: center;
		min-height: 80px;
		justify-content: center;
	}

/*Kacheln HOME*/
.kachelbox {
	height: 100%;
	width: 33.333333%;
	padding-bottom: 33.3%;	
	}
.kachelbox p {padding-bottom: 2%;}

a.kachel, .kachel {
	height: 0;
	width:80%;
	padding-bottom:80%;
	background-color:#fff;
	margin-bottom: -100%;
	border-radius: 50%;		
	background-size: 100% 100%;	
	min-height: 60px;
}
a.kachel:hover{
	background-blend-mode: difference;
}
a.kachel h4 {
    padding-top: 105%;
	text-align: center;
	font-size: 0.8em;
	letter-spacing: 0;
	color: #8c8787;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
}

a.kachel h4:hover{color:#fff;}

a.kachel#wor2{background-image: url(https://mandalamat.de/wp-content/uploads/2022/07/Klingklangklong-farbkorr.jpg);}
a.kachel#ins2{background-image: url(https://mandalamat.de/wp-content/uploads/2012/01/Instrumente2+-klein200.jpg);}
a.kachel#man2{background-image: url(https://mandalamat.de/wp-content/uploads/2012/03/mandala-11-2-grnHgd-200x200.jpg);}
a.kachel#gra2{background-image: url(https://mandalamat.de/wp-content/uploads/2022/07/Tod-farbkorr.jpg);}
a.kachel#mus2{background-image: url(https://mandalamat.de/wp-content/uploads/2022/07/Trompetist-farbkorr.jpg);}
a.kachel#cgp2{background-image: url(https://mandalamat.de/wp-content/uploads/2012/01/XR1-E-537-quad-160px.jpg);}
a.kachel#mal2{background-image: url(https://mandalamat.de/wp-content/uploads/2022/07/magnolie-2-farbkorr.jpg);}
a.kachel#kon2{background-image: url(https://mandalamat.de/wp-content/uploads/2022/07/CG-vertikal-grob-swHG-400px-200x200.png);}
a.kachel#akt2{background-image: url(https://mandalamat.de/wp-content/uploads/2022/07/Aktuell-4-200x200.png);}

/*End Kacheln HOME*/


.vert-img{
	height: 200px;
	width: auto;}
.horiz-img {
	height: 130px;
	width: auto;}	
.mid-img {
	height: 150px;
	width: auto;}
.vert-img-mini {
	height: 160px;
	width: auto;} 
.horiz-img-mini {
	height: 130px;
	width: auto;} 
.horiz-width-mini, .slick-text{ 
	width: 200px;
    height: auto;}

/*....................slick-slider......................*/

/* Arrows */
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    display: block;
   /*  width: 20px;
    height: 20px; */
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    top: 115%; 
	height: 50px; 
	width: 0;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{  opacity: 1;}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {   opacity: .25;}

.slick-prev:before, .slick-next:before {
    font-family: 'slick';
  /*   font-size: 20px; */
    line-height: 1;
    opacity: .75;
      -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;	
	font-size: 35px;
   	color: #69a5b7;
}

.slick-prev{   
/* 	left: -25px; */
	padding-left: 30%;
	left: 0}
	
.slick-prev:before{   content: '←';}

.slick-next {
	/* right: -25px; */
	padding-right: 30%;
	right: 35px; /*minus font-size*/}
	
.slick-next:before {   content: '→';}


.slick-track .pictext {
    background-color: #4c5562 /* #7d7d7d */;
	margin: 0.7em auto 0 auto;
    padding: 0.2em 0.6em 0.2em 0.6em;
    display: inline-block;
    text-align: center;
    border-radius: 2px;} 


.slick-slider {
	background-color: #2b402f;
	width: 96%;
	margin: 5% auto 5em auto;
	box-shadow: inset -16px 0 26px -16px #182e05, inset 16px 0 26px -16px #182e05;
	border: 0.3em solid #3b4d3b;
	}


.slick-track { 
	display: flex;
	align-items: center;
	text-align: center;	
	}
	
.slick-slide {margin: 8px 15px;}

.slick-slider p{
	padding: 0;
	margin: 0;
	text-align: center;
	color:  #f0f0f0;/* #ffbf00;*/}
/*....................end....slick-slider......................*/


/*...........................responsive definitions.........................................*/
@media only screen and (min-width: 300px) {
.searchform {
		/* margin: 0px 2px;
		max-width: 13%; */}
a.kachel h4 { font-size: 0.9em;}
}

@media only screen and (min-width: 400px) {

.top {min-height: 80px;}	

.title-container {margin: 20px;}
#logo {
	/* margin: 1%  3% 1.5% 0; */
	width: 50px;}	

.hamcontainer {
	margin: -56px 0 16px 75%;
	width: 45px;
	height:45px;
}

#hamburger {
	height: 20px;}

#top-nav a {
    padding: 12px 12px;
	font-size: 1.1em;}
nav a {
    font-size: 11px;
	padding: 6px 6px}
	
.searchform {
		margin: 6px 4px 0px 4px;
		}
	
.searchfield {	
		font-size: 11px;
		/* padding: 3px 5px; */
		max-width: 35%;} 
		
/* #nav-start {
    top: 15vh;
     }		 */

.sub-nav a {
	font-size: 11px;	
	letter-spacing: 0.1em;
	padding: 10px 10px;
}

a.kachel h4 { font-size: 1.2em;}

.horiz-img {height: 160px;}
.horiz-width-mini{ width: 300px;}
.slick-text {width: 300px;}

}

@media screen and (min-width:655px) {
	
	.top {min-height: 95px;}
.title-container{
	padding: 1% 2% 0 0; }	
	#logo {
    
    margin: 1% 2% 0 0;}
	
	
	.js #top-nav {display:block;}	
	nav {margin-bottom:0;}
	#top-nav li { width:auto;	}
	
	#hamburger, .hamcontainer {display:none;}	
	#top-nav a {	
	padding: 8px 4px;
	font-size: 10px;
}
	
}


@media only screen and (min-width: 700px) {

body {line-height: 1.4em;
	font-size: 14px;}
	
/* #page {height: calc(100% - 140px);}	 */

.top { height: 140px;}	
	
.site-title {
	font-size: 2.2em;
	margin: 0 0.1em 0 0.15em;}	
	
.site-description {	
	font-size: 0.8em;
	margin-left: 0.5em;
	}

#logo {width: 65px;}

#top-nav a {	
	padding: 8px 5px;
	font-size: 11px;
}

#nav-start {
    top: 19vh;
    }
	
.searchform {
	padding: 3px 40px 3px 3px;
    margin: 12px   46px;
	width: auto;
	max-width: 130px;
}
.searchfield {	
	font-size: 11px;
	max-width: 100%;}
	
.submit {
	top: 8px;
	height: 17px;
	width: 17px;
	}

.sub-nav a {
	padding: 10px 40px;
	font-size: 13px;
/* 	margin: 5%; */
}

.ppq-audio-player .player-time {
    width: 60px;
    margin-right: 6px;
}
#home { width: 70%;}	
#post-4345 #menu, #post-13 #menu { display: block;} 
#menu {
	margin: 26vw 3% 0 0;
	padding: 5px 5px 5px 5px;
	}
#menu ul{
	padding-left: 0;
	}
#menu ul ul {
	font-size: 10px;
	padding-left: 10px;
	line-height: 1.4em;
	}
	
a.kachel h4 { font-size: 1em;}

.slick-next {
	right: 42px; /*minus font-size*/}
	
.slick-prev::before, .slick-next::before {  
    font-size: 42px;
		}
		
.vert-img  {height: 300px;}
.horiz-img {height: 200px;}
.mid-img {height: 250px;}
.vert-img-mini {height: 200px;} 
.horiz-img-mini {height: 160px;} 
/* .horiz-width-mini{ width: 300px;} */

.slick-slider {
		margin: 2.5em auto 100px auto;
	}
}

/* Small */
@media screen and (max-width:600px) {
	
	.small-33 {
		width:width:33.333333%;
	}
	.small-50 {
		width:50%;	
	}
	.small-66 {
		width:width:66.66667%;
	}
	.small-100 {
		width:100%;	
	}
	.flex-small{
		display: flex;
		align-items: center;
	}	
	.flex-small-center{
		display: flex;
		align-items: center;
		justify-content: center;
	}	
}
/* Medium */
@media screen and (min-width:600px) and (max-width:1000px) {
	
	.medium-16 {
		width:16.66667%;	
	}	
	.medium-33 {
		width:33.333333%;	
	}	
	.medium-50 {
		width:50%;	
	}	
	.medium-66 {
		width:66.66667%;	
	}	
	.medium-83 {
		width:83.333333%;	
	}	
	.medium-100 {
		width:100%;	
	}	
	.flex-medium{
		display: flex;
		align-items: center;
	}	
	.flex-medium-center{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
}
/* Large */
@media screen and (min-width:1000px) {

body {line-height: 1.6em;
	font-size: 16px;}
	
#top-nav a {	
	padding: 9px 14px;
	font-size: 13px;
}	

#menu {
	margin: 25% 3% 0 0;
	padding: 10px 10px 25px 10px;
	width: 20%;
	}
#menu ul{
	padding-left: 10px;
	}
#menu ul ul {
	font-size: 12px;
	padding-left: 12px;
	line-height: 1.6em;
	}
	
a.kachel, .kachel {
	height: 0;
	width:70%;
	padding-bottom:70%;
	}
	.large-16 {
		width:16.66667%;	
	}	
	.large-25 {
		width:25%;	
	}	
	.large-33 {
		width:33.333333%;	
	}	
	.large-50 {
		width:50%;	
	}
	.large-66 {
		width:66.666666%;	
	}
	.large-75 {
		width: 75%;
	}	
	.large-83 {
		width:83.333333%;	
	}
	.large-100 {
		width:100%;	
	}	
	.flex-large{
		display: flex;
		align-items: center;
	}
	.box-1b{
		text-align: left;
		
	}
	.box-2b { 
	text-align: right;	
	margin-top: 5%;
	}


	
.vert-img  {height: auto;}
.horiz-img {height: auto;}
.mid-img {height: auto;}
.vert-img-mini {height: auto;} 
.horiz-img-mini {height: auto;} 
.horiz-width-mini{ width: auto;}
.slick-text {width: 400px;}
	

/* .slick-prev, .slick-next { top: 107%;} */
.slick-next {
	right: 50px; /*minus font-size*/}
	
.slick-prev::before, .slick-next::before {  
    font-size: 50px;
		}
		

}

@media only screen and (min-width: 1200px) {
nav a {
    font-size: 13px;
    color: #ffee7f;
    text-decoration: none;
    padding: 9px 14px;
    display: block;
}	

.searchform {
    margin: 8px 4px 0px 4px;
}
.searchfield {
    height: 13px;
   /*  padding: 5px 30px 6px 7px; */
	max-width: 99%;}

}
	
	
/*-----------------------Nav Start-Seite----------------------*/
@media only screen and (min-height: 400px){

.title-container{
	/* padding: 10px 0 0 0; */}

.site-title { 
    line-height: 1em;
    }
.site-description {
	margin-top: 1em;
}

#logo {
	/* padding: 20px  20px 0px 0; */
}	

/* #nav-start {
  top: 20vh;
     }	 */
}

@media only screen and (orientation: landscape) and (min-height: 250px) and (max-height: 400px){
	
#nav-start {
    top: 19vh;
     }		
	
}
 
@media only screen and (orientation: landscape) and (min-width: 320px) {

article  {	
	min-height: 55vh;
	}	 
 
#logo {
	/* padding: 10px  20px 0px 0 */;
}


		
#hom { 
	top: 32vh;
      left: 0vh;}
#mal {
	top: 25.89vh;
      left: -18.81vh;}
#gra {
	top: 9.89vh;
      left: -30.33vh;}
#wor {
	top: -9.89vh;
      left: -30.44vh;}
#mus {
	top: -25.89vh;
      left: -18.81vh;}
#ins {
	top: -32vh;
      left: 0vh;}
#man {
	top: -25.89vh;
      left: 18.81vh;}
#cgp {
	top: -9.89vh;
      left: 30.44vh;}
#akt {
	top: 9.89vh;
      left:30.44vh;}
#kon {
	top: 25.89vh;
      left: 18.81vh;}	
#innenbild {
 	width: 40vh; }	
 }
 
@media only screen and (orientation: portrait) and (min-width: 500px) {
#nav-start a { padding: 4px 8px; }	 
#hom { top: 32vw;}
#ins {top: -32vw;}
 }

@media only screen and (min-width: 400px) and (min-height: 400px){

#nav-start a, #nav-start #hom  a {
	 font-size: 10px;
	 padding: 8px 8px;  
	 }			
}
@media only screen and (min-width: 700px) and (min-height: 700px){

#nav-start a, #nav-start #hom  a {
	 font-size: 13px;
	 line-height: 1.6em;
	 padding: 8px 14px;  
	 }	
}
/*-----------------------End Nav Start-Seite----------------------*/