@charset "UTF-8";



:root  {
  --cassiopeia-color-primary: black;
  --cassiopeia-color-hover: #97c919;
  --cassiopeia-color-link: #87b415;
}



/* Font Apparat: (font-family: apparat, sans-serif;) Regular 300, Medium 400, Extrabold 700, Heavy 900 */

/* @group Allgemein */

body {

   font-family: apparat, sans-serif;
   font-weight: 300;
   
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-weight: 300;
   font-family: apparat, sans-serif;
}

strong {
	font-weight: 600;
}



p, .com-content-article__body li {
	text-align: left;
}

p.lehrer {
	text-align: left !important;
}

p.lehrer a {
	background-color: #87b415;
	padding: 8px 11px;
	color: white;
	margin-right: 3px;
	margin-top: 20px;
	text-decoration: none;
	border-radius: 5px;
	line-height: 2.75em !important;
}

p.lehrer a:hover {  
   	background-color: #98cb17;
	color: white;
	   }


.mod-list li.active > a {
  text-decoration: none;
}

.mod-list li.current > a {
  text-decoration: underline;
}


.site-grid > [class*=" container-component"], .site-grid > [class^="container-component"] {
    width: 100%;
  }
  
  .footer1 {
  	text-align: center;
  	font-size: 0.65em;
  	margin-top: 20px;
  }
  
  .com-content-article__body h2.instrument {
  font-size: 1.25em !important;
  font-weight: 300 !important;
  padding-top: 25px;
   text-align: left;

}



.ph-si-category {
	display: none;
}

.pg-category-box {
	background: black;
}
/* @end */

/* @group Header */

.header {
	width: 100%;
	z-index: 1000;
}

.container-header  {
background-image: none;
background-color: transparent;
}


.container-header .grid-child {
justify-content: center;
}

.container-header .navbar-brand.ver {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.container-header .navbar-brand.hor {
	display: none;
}

.container-header .navbar-brand img {
  width: 20rem;
  min-width: 20rem;
}

.container-header .mod-menu {
  color: black;
}


.container-header .metismenu > li.active > a::after, .container-header .metismenu > li.active > button::before, .container-header .metismenu > li > a:hover::after, .container-header .metismenu > li > button:hover::before {
  background: #87b415;
}

/* @end */

/* @group Kontaktformular */

/*.m-0:first-child {
	display: none;
}*/

/* @end */



.back-to-top-link {
	background-color: red !important;
	width: 50px;
	height: 50px;
}



/* @group Preloader */

.preloader {
  align-items: center;
/*  background: rgb(23, 22, 22);*/
  background: white;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.3s linear;
  width: 100%;
  z-index: 1000;display  opacity: 1;
  transform: opacity 1s linear;
}

.preloader.loaded {
  display: none;
}

.preloader img {
	width: 20%;
}

/* @end */


/* @group Mobiles Menü */
.container-header .navbar-toggler {
  color: black !important;
  cursor: pointer;
  font-size: 2em;
}

.container-nav nav {
    margin-top: 0 !important;
  }
  
  .navbar, .navbar-toggler {
  	width: 100%;
  	text-align: center;
  }
  
    .metismenu-item  {
		border-bottom: thin solid #010101;
	}
  
  .metismenu-item a {
  	width: 100%;
  	text-align: center;
  }
}

/* @end */



/* @group Startseite */

.container-below-top {
	background: grey;
	margin-bottom: 20px;
	padding-right: 0 !important;
	padding-left: 0 !important;

}
.container-below-top .reihe {
display: flex;
/*justify-content: space-around;*/
flex-wrap: nowrap;

}

.itemid-207 .item-page p {
	text-align: center;
}

.itemid-207 .container-component {
	margin-bottom: 50px;
	
}

.itemid-207 .com-content-article__body h1  {
		margin-bottom: 0px;

}

.itemid-207 .com-content-article__body h2  {
		font-size: 1.25em;

}


/* @end */


/* @group Unterrichtsangebot */
.itemid-116 .blog-item {
			background: rgba(0, 0, 0, 0.025);
border-radius: 5px;

}

.item-content  {
		text-align: center !important;
	}

.item-content h2  {
		text-align: center !important;
		font-size: 1.1em;
		padding-bottom: 0px;
}



.item-page h2 a  {
		color: black;
		text-decoration: none;
}

.itemid-160 .item-content h2  {
		font-size: 1.35em !important;
		padding-top: 10px;
}


.item-content h2 a {
		color: black;
		text-decoration: none;
		text-align: center !important;
}
 .blog-item .item-image {
  margin-top: 0px;

}

 .item-page .item-image {
  margin-bottom: 25px;

}

.com-content-article .com-content-article__body {
/*	display: flex;
	flex-direction: column;*/
	text-align: center;
	justify-content: center;
}







/* @end */

/* @group Einzelseiten Instrumente, Musiklehrer */



.item-image, .item-image img {
	width: 100%;
	margin-bottom: 0px;
}

.com-content-article__body h1 a {
	font-size: 2.5em;
	font-weight: 300 !important;

}


.com-content-article__body h1  {
		margin-bottom: 50px;
}



.com-content-article__body h2 {
	font-size: 2.5em;
	font-weight: 300 !important;
	padding-top: 25px;
}

h2.instrument {
	text-align: center;
		font-size: 1.75em;
}

p.instrument {
	text-align: center;
}



.itemid-160 .com-content-article__body  {
display: flex;
align-items:center;

	flex-direction: column;


}

.itemid-160 .com-content-article__body p {
width: 90%;
}

/* @end */

/* @group Aktuelles */
.itemid-115 .com-content-category-blog__item, .itemid-115 .item-page  {
	border: thin solid #87b415;
}

.itemid-115 .item-content, .itemid-115 .item-page  {
	padding: 25px 25px;
}

.itemid-115 .page-header h2 {
	font-size: 2em;
	padding-bottom: 25px;
	text-align: left !important;
	
}

/* @end */

/* @group Kontakt */

.itemid-164 a {
	text-decoration: none;
}

.anfahrt p {
	text-align: left;
	margin-top: 25px;
}

.adresse {
	margin-bottom: 25px;
}

.adresse h1 {
	margin-bottom: 10px;
}


.adresse p {
	text-align: center !important;
}

/*.telbtn {
	margin-bottom: 25px;
}*/

.probestundebtn {
	margin-top: 25px !important;

}

/* @end */

/* @group Probestunde */

.itemid-213 .page-header h1 {
	text-align: center;
}

.ba-page-items label {
	width: 100%;
	text-align: left;
}

.probestundebtn {
	padding: 12px 13px 10px 13px;
	background-color: #87b415;
	color: white;
	text-decoration: none;
	font-size: 1em;
	 border-radius: 5px;
}

.probestundebtn:hover {
	background-color: #98cb17;
	color: white;

}


.probestundebtn:focus {
  color: white;
}

.itemid-164 .probestundebtn {
	font-size: 1em;
}


/* Formular Probestunde */

.itemid-213 .com-content-article__body {
	display: flex;
	flex-direction: column;
	align-items:center;
}

.cf-label {
	text-align: left;
}


/* @end */

/* @group Tabellen */

.itemid-162 h1, .itemid-163 h1, .itemid-165 h1  {
	margin-bottom: 15px;
}



.itemid-162 td, .itemid-163 td {
	text-align: left;
}
   
    table {
     	margin-bottom: 15px;
     	font-size: 1.05em;
     	line-height: 1.4em;
	 	width: 100%;
     }
     
     
     tbody tr {
     	border: none;
     }
     
   tbody th {
     	padding: 20px;
     	background-color: rgba(255, 255, 255, 0.70)
   }
     
     tbody td {
     	padding: 20px;
     	background-color: rgba(255, 255, 255, 0.40)
     	
     }
     
     .itemid-162 table td:first-child {
	 width: 30%;
	 text-align: right;
     }
     

     
     
    .itemid-163 table td:first-child {
	 width: 75%;
	 text-align: left;
	 padding-left: 10%;
     }
     
     
     td.kopf {
     	background: #87b415 !important;
     	color: white;
     	font-weight: 400;
	 	font-size: 1.1em;
	 	padding: 15px 0 10px 0;
     	border-top-right-radius: 5px;
     	border-top-left-radius: 5px;
	 	text-align: center;
	 	width: 100% !important;
	 	text-align: center !important;
     }
     
     td.fuss {
     	background: rgba(192, 192, 192, 0.2) !important;
     	color: #2d2c2c;
	 	font-size: 1em;
	 	padding: 15px 20px 15px 20px !important;
     		border-bottom-right-radius: 5px;
     		border-bottom-left-radius: 5px;
	 			 	width: 100% !important;

	 		text-align: center !important;
	 	font-style: italic;
	 }
     
     
   
     table tr:nth-child(1n+2) {
     background-color: rgba(192, 192, 192, 0.2);
     color: #000;
     }
     table tr:nth-child(2n+3) {
     background: rgba(192, 192, 192, 0.4);
     color: #000;
     }
     table tr:hover {
     background-color: white;
     color: black;
     }
     

     
     
     .kontaktkopf {
     
     	text-align: center !important;
     }
     
     .telbtn {
       	background: #87b415;
       	padding: 10px 20px;
       	border-radius: 5px;
       	color: white;
       	margin-top: 0px !important;
     }
     .telbtn:hover {  
   	background-color: #98cb17;
	color: white;
	   }
   
   /* @end */


/* @group Footermenü */

.footer {
 background-color: transparent;
	 color: black;

	background-image: none;
 border-top: thin solid black;
	padding-top: 35px;
}

.footer .grid-child {
  padding-top: 0;
}

.footer ul {
flex-direction:row;
}

.footer .nav li {
padding: 0 15px 0 0;

}



/* @end */

/* @group Impressum Datenschutz */

.itemid-103 .page-header {
	text-align: center;
}

p.anschrift {
	text-align: center;
	
}

.itemid-102 .com-content-article__body h2, .itemid-103 .com-content-article__body h2 {
  font-size: 1.75em;
  font-weight: 300 !important;
  padding-top: 25px;
   text-align: left;

}

.com-content-article__body h3 {
  font-size: 1.3em;
   text-align: left;
}

/* @end */


/* @group  Colorize-zoom */
.img-hover-zoom--colorize img {
  transition: transform .5s, filter 1.5s ease-in-out;
  filter: grayscale(75%);
}

.img-hover-zoom--colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.07);
}

.container-below-top h3.title {
    display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 50%;
  text-shadow: 0 0 10px rgba(28, 26, 26, 0.05);
}

.container-below-top h3.title:hover {
  opacity: 100%;
    text-shadow: 0 0 10px rgba(28, 26, 26, 0.9);

}


.container-below-top .grid {
  display: grid;
  grid-gap: 0px;
}

/* The container */
.img-hover-zoom {
  height: auto; /* Set it as per your need */
  overflow: hidden; /* Hide the overflowing of child elements */
  position: relative;
}

/* Basic */
.img-hover-zoom img {
  cursor: pointer;
  transition: transform .5s ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.5);
}


/* @end */



@media (min-width: 576px) {
	

}


@media (min-width: 768px) {

/* @group Allgemein */

 .site-grid > [class*=" container-component"], .site-grid > [class^="container-component"] {
    width: 80%;
  }
  
.itemid-117 .site-grid > [class*=" container-component"], itemid-117 .site-grid > [class^="container-component"] {
    width: 100%;
  }
  
    .footer1 {
  	font-size: 1em;
  	margin-top: 0px;
  }
  
      .metismenu-item  {
		border-bottom: none;
	}
	
	  .container-header .mod-menu {
    justify-content: center;
  }
  
  p.lehrer {
	text-align: center !important;
}

  .com-content-article__body h2.instrument {
  font-size: 1.75em !important;
   text-align: center;

}

.container-below-top h3.title {
    display: flex;
  }

/* @end */
  
  
  /* @group Header */
  
.container-header .navbar-brand.ver {
  display: none;
 }

.container-header .navbar-brand.hor {
	  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.container-header .navbar-brand img {
  width: 33rem;
  min-width: 33rem;
}
/* @end */

/* @group Startseite */

.container-below-top {
	margin-bottom: 35px;
}

.itemid-207 .container-component {
	margin-bottom: 50px;
	
}

.itemid-207 .com-content-article__body h1  {
		margin-bottom: 10px;

}

.itemid-207 .com-content-article__body h2  {
		font-size: 1.75em;

}


/* @end */

/* @group Probestunde */

.probestundebtn {
	font-size: 1.25em;
}

/* Formular Probestunde */

.wf-mediabox-body {
	max-width: 80% !important;
}
/* @end */

/* @group Einzelseiten Instrumente, Musiklehrer */


.itemid-160 .com-content-article__body p {
width: 40%;
}



/* @end */

/* @group Impressum Datenschutz */

.itemid-103 .page-header {
	text-align: center;
}

p.anschrift {
	text-align: center;
	
}

.com-content-article__body h2 {
  font-size: 2.5em;
  font-weight: 300 !important;
  padding-top: 25px;
  text-align: center;
}

.itemid-116 .com-content-article__body h2.instrument {
  font-size: 1.75em;

}


.com-content-article__body h3 {
  font-size: 1.75em;
   text-align: center;
}

/* @end */

/* @group Aktuelles */
.itemid-115 .item-content, .itemid-115 .item-page  {
	padding: 50px 10%;
}

/* @end */

/* @group Tabellen */

td.fuss {
    	 padding: 15px 60px 15px 60px !important;
       	}
     		     
.itemid-162 table td:first-child {
	 width: 40%;
	 text-align: right;
     }
     

     
     
.itemid-163 table td:first-child {
	 width: 65%;
	 text-align: left;
	 padding-left: 10%;
     }

   
   /* @end */



}