.clear{
background: rgba(0,0,0,0) none repeat scroll 0 0;
border: 0 none;
clear: both;
display: block;
float: none;
font-size: 0;
height: 0;
list-style: outside none none;
margin: 0;
overflow: hidden;
padding: 0;
visibility: hidden;
width: 0;
}


.italiana-regular {
  font-family: "Italiana", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zain-extralight {
  font-family: "Zain", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.zain-light {
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zain-regular {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zain-bold {
  font-family: "Zain", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zain-extrabold {
  font-family: "Zain", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.zain-black {
  font-family: "Zain", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.zain-light-italic {
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.zain-regular-italic {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: italic;
}


body {
	margin: 0;
	background-color: #fff3eb;
	color: #444444;
	font-family: "Zain", sans-serif;
	font-size: 1.3em;
	text-align: center;
	letter-spacing: 0.05em;
	line-height: 1.8em;
	
}

body.site.livestream{
	overflow-y: scroll !important;
}

body.site.livestream  ul.breadcrumb{
	z-index: 0 !important;
}

body.site.livestream #header-2{
	z-index: 8 !important;
	position: relative;
	padding: 5px;
	background: linear-gradient(180deg, rgba(0,0,0,0.7) 35%, rgba(0,0,0,0) 100%) !important; 
}

body.site.references .item-page{
	border-bottom-style: none !important;
	
}

img {
 border-radius:15px;
}
/* COLORS */
.yellowish{
color:#dbb25c;
}

.white {
#color:#ffffff !important;
}


article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

/*p{
	margin: 12px 0 15px 0;
	
}
*/
ul{
	list-style: none;
}

#header-1{
	display: block;
	overflow: hidden;
	height: 45px;
	background-color: rgba(100,0,0,0.50);
	padding: 15px;
	
	text-align: center;
}

.opening{
color: #ffffff;               /* weiße Schrift */
  font-size: 10rem;              /* Größe anpassen */
  font-weight: 350;             
  text-transform: uppercase;    /* alles Capitals */
  text-align: center;           /* zentriert */
  text-shadow: 
    0 0 10px rgba(0, 0, 0, 0.05),   /* weicher Glow */
    2px 2px 4px rgba(0, 0, 0, 0.1);/* zusätzlicher Schatten */
  letter-spacing: 20px;   


  animation: animate_text 3s ease-in-out 1;
    animation-delay: 0s;
  animation-delay: 0.0s;

}

#header-2{
	display: block;
	overflow: hidden;
	background-color: rgba(0,0,0,0.50);
	padding: 20px;
		
}

#header-2-logosmall{
	display: block;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	text-align: center;
	width:80%;
}
#header-2-logosmallanimated{
	display: block;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	text-align: center;
	width:80%;
	height:100px;
}


p.logotext-headsmall{
	position: relative;
    font-size: 0.7em;
	text-align: center;
	margin:0px;
	letter-spacing: 0.16em;
}

h1{
	text-transform: uppercase;
	font-weight: bold;
	}

h2{
font-family: "Italiana", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: 2.5em;
  letter-spacing: 6px;
  color: white;
  margin-bottom: 60px;
  filter: drop-shadow(0px 0px 3px rgba(70,70,70,0.8));
  -webkit-filter: drop-shadow(0px 0px 3px rgba(70,70,70,0.8));
  -moz-filter: drop-shadow(0px 0px 3px rgba(70,70,70,0.8));
}

#header-3{
}


#head_picture{
	background-image: url("/images/homepage/3tk-opening-v01.jpg");
}

#content-1, #content-3, #content-5{
	background-color: #fff3eb;
	padding:50px;
	background-image: url("../../../images/homepage/hg_apricot.svg");
	background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

#content-2, #content-4{
	background-color: #e8c7ba;
	padding:50px;
	margin:125px;
	/*background-image: url("/images/homepage/hg_yellow2.svg");
	background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;*/
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  border-radius: 15px;
}
/*Specials für Kontakt Seite*/
#content-5{
  display: flex;
  flex-wrap: wrap; /* erlaubt Umbrüche */
  gap: 50px;
  justify-content: center;   /* zentriert die Reihe horizontal */
  
}
.kontakt_headline, .kontakt_stroke{
flex:1 1 100%;
  width: 100%;
}
.kontakt_left, .kontakt_right{
flex: 1 1 45%;
  min-width: 200px; /* verhindert Flexüberlauf */
	max-width: 450px;
}


.logo{
padding: 15% 0 0 0;
  background-image: url("../../../images/homepage/logoherzklangwhite.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 90% auto;
  margin: 30px 0;

filter: drop-shadow(0px 0px 15px rgba(128,128,128,0.4));
-webkit-filter: drop-shadow(0px 0px 15px rgba(128,128,128,0.4));
-moz-filter: drop-shadow(0px 0px 15px rgba(128,128,128,0.4));

animation: animate_text 1s ease-in-out 1;
    animation-delay: 0s;
  animation-delay: 0.0s;

}
@media (max-width:900px) {
.logo{
 background-image: url("../../../images/homepage/logoherzklangwhite-small.svg");
  padding:30% 0 0 0;
  margin:0px;
}


}



.logountertitel{
font-family: "Italiana", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 9px;
  color: white;
  margin-bottom:60px;
animation: animate_text_delayed 5s ease-in-out 1;

filter: drop-shadow(0px 0px 15px rgba(128,128,128,0.8));
-webkit-filter: drop-shadow(0px 0px 15px rgba(128,128,128,0.8));
-moz-filter: drop-shadow(0px 0px 15px rgba(128,128,128,0.8));

}

.stroke{
padding: 20px;
  background-image: url("../../../images/homepage/stroke.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 70px 0 20px 0;
  animation: animate_text_delayed 5s ease-in-out 1;
  
}

.opening_left{
width: 400px;
border-radius: 15px;
width: 95%;

}
.textopening{
  font-family: "Italiana", sans-serif;
  font-weight: 500;
  font-style: normal;
  
  font-size: 1.2em;
  letter-spacing: 6px;
  color: #444444;
  width: 450px;
  text-align: justify;
  line-height: 1.8em;
  
  }

.textopening1{
  font-family: "Italiana", sans-serif;
  font-weight: 500;
  font-style: normal;
  margin: 50px 0;
  font-size: 1.2em;
  letter-spacing: 6px;
  color: #444444;
  text-align: justify;
  line-height: 1.8em;
  
  }

i{
font-size:2.5em;}


.pic-crop {
  width: 100%;        /* Breite festlegen */
  /*height: 200px;       /* Höhe gleich der Breite → Quadrat */
  object-fit: cover;   /* Bild wird zugeschnitten, nicht verzerrt */
  /*border-radius: 50%;  /* Rundung = Kreis */
  border-color: #dbb25c;
  	border-width: 0.1px;
  	border-style: solid;
  	border-radius: 15px;
}
/* Gesamt-Wrapper: eine Spalte */
.welcome_wrapper1 {
 
  justify-content: center;   /* Wrapper-Inhalt mittig */
  align-items: center;       /* vertikal mittig (falls Höhe > Inhalt) */
  width: 70%;
  margin: 0 auto;
  animation: animate_text_delayed 5s ease-in-out 1;
}
/* Gesamt-Wrapper: zwei Spalten */
.welcome_wrapper {
  display: flex;
  justify-content: center;   /* Wrapper-Inhalt mittig */
  align-items: center;       /* vertikal mittig (falls Höhe > Inhalt) */
  width: 100%;
  margin: 0 auto;
  animation: animate_text_delayed 5s ease-in-out 1;
}
.content_wrapper {
  display: flex;

  justify-content: center;   /* Wrapper-Inhalt mittig */
  align-items: center;       /* vertikal mittig (falls Höhe > Inhalt) */
  width: 80%;
  margin: 0 auto;
  animation: animate_text_delayed 1s ease-in-out 1;
  padding:50px 0;
}



/* VITA */
.vitapic{
	width: clamp(300px, 80%, 600px) ;
	height: clamp(375px, 80%, 750px) ;
	margin: 0 0 50px 0;
	border-color: #dbb25c;
  	border-width: 0.1px;
  	border-style: solid;
  	border-radius: 15px;

}
.vita-left {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertikal in der Mitte */
  align-items: center;       /* horizontal mittig */
/*  gap: 50px;*/
}

.vita-right {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 10px, 25px);
  max-width:600px;
}
/* Bild-Container */


.welcome-left_container {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertikal in der Mitte */
  align-items: center;       /* horizontal mittig */
  max-width:450px;
/*  gap: 50px;*/
margin: 0 50px 0 0;
}


.tk_welcome {
  max-width: 300px;
  border-color: #dbb25c;
  border-width: 0.1px;
  border-style: solid;
  border-radius: 15px;
  margin: 40px 0;
  box-shadow: 5px 5px 7px 4px rgba(0,0,0,0.17);
}
/* Text-Container */
.welcome-right_container {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
 /* gap: clamp(5px, 10px, 25px);*/
   max-width:500px;
   margin: 0 0 0 50px;
}



.welcome_absatz {
  width: 100%;       /* gleiche Breite */
  max-width: 450px;  /* optional: begrenzen für schöne Lesbarkeit */

}

.welcomepic_container .pic {
  width: clamp(140px, 35%, 320px);
  height: auto;
}

.videofrontpage{
	max-width:960px;
	width:100%;
border-radius:15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.videoabout {
  max-width: 400px;
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}


.pic2 {
  position: absolute;
  /* responsive Offsets statt fixer px */
  top: clamp(40px, 25%, 200px);
  left: clamp(80px, 18vw, 280px);
  z-index: 2;
}


/* Breakpoint: bei schmalen Screens umbrechen */
@media (max-width: 1099px) {
  .welcome_wrapper, .content_wrapper, .container2, .container3, .container4 {
    flex-direction: column;   /* statt nebeneinander → untereinander */
  }
  
  .welcome-left_container, .welcome-right_container, .vita-left, .vita-right, .welcome_wrapper1, .welcome_wrapper{
    width: 100%;              /* volle Breite */
    margin: 0 0 50px 0; /*Versätze entfernen*/
  }
  
 .opening_left {
  width: 100%;
}
  .pic2 {
  left: 40px;
  z-index: 2;
}
.welcome_absatz {
  width: unset;
}
  
.logountertitel{
font-size:1.2em;}
  
#content-2, #content-4{
  margin:50px;
  }

.tabcontainer {
  margin: 0 25px !important;}


}
@media (max-width: 450px) {
.textopening1{
font-size:0.8em;
}

h2{
font-size:1.3em;}
h3{
font-size:1.1em;
}
.container3 {
margin: 0 !important;
gap:25px !important;
}

.stroke{
background-size: 500% auto;

}
.tabcontainer {
  margin: 0 !important;}


}

/* Content Setup*/

.container3, .container3 {
  display: flex;
  justify-content: space-between;
  margin: 0 8%;
  gap: 100px;            /* Abstand zwischen Boxen */
}
.container2{
width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container4 {
  display: flex;
  justify-content: space-between;
  margin: 0 5%;
  gap: 20px;            /* Abstand zwischen Boxen */
}

#delayed{
 display: none;

}
/* Basiszustand */
.reveal {
  opacity: 0;
  transform: translateY(16px);

  /* View Timeline am Element definieren */
  view-timeline-name: --reveal;
  view-timeline-axis: block;

  /* Animation an die View Timeline koppeln */
  animation-name: fade-up;
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-fill-mode: both;
  animation-timeline: --reveal;

  /* Wann innerhalb des Scroll-Erscheinens die Animation läuft:
     - startet, wenn das Element in den Viewport "eintritt"
     - läuft über ~30% des Einblend-Weges */
  animation-range: entry 20% cover 30%;
}

/* Keyframes für das Einblenden */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Optionale Verzögerungen als Hilfsklassen */
.delay-0   { animation-delay:   0ms; }
.delay-150 { animation-delay: 150ms; }
.delay-300 { animation-delay: 300ms; }
.delay-450 { animation-delay: 450ms; }
.delay-600 { animation-delay: 600ms; }

/* Barrierefreiheit: Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.box {
  flex: 1;
/*  padding: 24px;
  background: #eee;
  text-align: center;
  box-sizing: border-box;
  border-radius: 15px;
  box-shadow: 5px 5px 7px 4px rgba(0,0,0,0.17);*/

  /* Startzustand (unsichtbar und seitlich versetzt) */
  opacity: 0;
  transform: translateX(0);             /* wird gleich überschrieben */
  transition: transform 400ms ease, opacity 600ms ease;
  will-change: transform, opacity;
}

.box[data-dir="left"]  { transform: translateX(-40px); }
.box[data-dir="right"] { transform: translateX(40px);  }

/* Sichtbar-Zustand (nach Scroll) */
.box.in-view {
  opacity: 1;
  transform: translateX(0);
}

.offer{
  border-color: #ff0000;
  border-width: 5px;
  border-style: solid;


}

.box:hover{
transform: scale(1.1);
z-index:998;
}


/*BUTTONS*/
.btn{
	background-color:#e8c7ba;
	color:#fff;
	text-transform: uppercase;

}
.btn_bright {
	background-color:#fff3eb;
	color:#fff;
	text-transform: uppercase;
	display: inline-block;
  font-weight: 400;
  padding: 5px 15px;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 50px;
}




.btn:hover {
  color: #eeeeee;
  text-decoration: none;
}

.leftbtn{
align-self: flex-start;   /* vertikal linksbündig (oben) */
  margin-right: auto;       /* horizontal nach links */
}

/* Song entsteht*/

:root{
  --tab-bg:#bcbcbc;
  --tab-bg-hover:#d18969;
  --content-pad:50px 20px;
  --container-border:15px solid #ccc; /* Farbe kannst du anpassen */

}



/* === äußerer Container === */
.tabcontainer {
 /* border: var(--container-border);*/
  margin:0 75px;
  border-radius: 15px;
  overflow: hidden;
 /* background: #111;  optionaler Hintergrundrahmen */
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* === Tab-Leiste === */
.tabbar {
  display: flex;
  width: 100%;
}

.tablink {
  flex: 1;
  background-color: var(--tab-bg);
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  transition: background-color .25s ease;
}

.tablink:hover { background-color: var(--tab-bg-hover); }

/* === Inhalte === */
.tabcontent {
  display: none;
  color: #fff;
  padding: var(--content-pad);
  min-height: 50vh;
  opacity: 0;
  transition: opacity .25s ease;
}
.tabcontent.is-active { display: block; opacity: 1; }

#Tab1 { background-color: #e8c7ba;}
#Tab2 {
 background-color: #db8c5f;
 }
#Tab3 { background-color: #dbb8e1;}

/* === Responsive Mobile === */
@media (max-width: 640px) {
  .tabcontainer {
    margin: 40px 15px;            /* weniger Rand auf Handy */
    border-width: 10px;           /* etwas dünnerer Rahmen */
  }

  .tabbar {
    flex-direction: column;
    position: sticky; top: 0; z-index: 5;
  }
  .tablink {
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    font-size: 18px;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .tablink:first-child { border-top: none; }
  .tabcontent {
    padding: 24px 16px;
    min-height: 40vh;
  }
  
.tablink h4{
text-align:center;
}
}


/* Pic Gallery*/
/* Grundlayout */
.gallery-page {
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px) 0;
}

.headline {
  font-size: clamp(22px, 2.6vw, 34px);
  margin: clamp(12px, 2vw, 20px) 0;
}

/* Reihen */
.row {
  display: grid;
  gap: clamp(14px, 2.2vw, 28px);
  margin-bottom: clamp(20px, 3vw, 40px);
  align-items: start;
}

/* 2er- und 3er-Grid (Desktop), mobile wird unten gestapelt */
.row--two {
  grid-template-columns: repeat(2, 1fr);
}
.row--three {
  grid-template-columns: repeat(3, 1fr);
}


/* Forms */
#cf_1{
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}


/* ICONS */

.icon_wrapper_all{
display: flex;
justify-content: center;
gap:50px;
margin: 50px 0;
}

.icon_wrapper{
display: flex;
width: 50px;
}

.iconinstagram{
padding: 30px;
  background-image: url("../../../images/icons/instagram-brands-solid-full-white.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.iconmail{
padding: 30px;
  background-image: url("../../../images/icons/envelope-regular-full-white.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

/* Karten (Bild + Text) */
.card {
	/* Einmal zentral definieren, damit Bild und Caption gleich breit sind */
  --media-w: 70%;
  display: grid;
  gap: 10px;
  justify-items: center; /* zentriert Kind-Elemente horizontal */
  margin: 0;              /* figure default margin entfernen */
  border:0px;
  background-color: inherit;
  
  transform: translateX(0);             /* wird gleich überschrieben */
  transition: transform 400ms ease, opacity 600ms ease;
  will-change: transform, opacity;
}

.card:hover{
transform: scale(1.05);
z-index:998;
}



.card img {
  width: var(--media-w);
  height: auto;
  display: block;
  margin-inline: auto;   /* horizontal zentrieren */  
  border-radius: 15px;      /* optional */
  /* optional: gleichmäßige Kachel-Höhe */
  /* aspect-ratio: 4 / 3; object-fit: cover; */
  border-color: #dbb25c;
  border-width: 0.1px;
  border-style: solid;
}

/* Caption hat dieselbe Breite wie das Bild, steht mittig darunter,
   der Text darin ist linksbündig */

.card figcaption {
  width: var(--media-w);
  margin: 0;            /* sauber */
  text-align: left;     /* Text linksbündig */
  line-height: 1.4;
  font-size: clamp(14px, 1.6vw, 16px);
}

/* Responsives Stapeln */
@media (max-width: 900px) {
  .row--three {
    grid-template-columns: repeat(2, 1fr); /* 3er-Reihe wird zu 2er */
  }
}

@media (max-width: 640px) {
  .row--two,
  .row--three {
    grid-template-columns: 1fr; /* alles untereinander */
  }
}


/* Responsiv: Umbrechen bei schmalen Screens */
@media (max-width: 900px) {
  .container { flex-wrap: wrap; }
  /*.box { min-width: 260px; }*/
}


/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%\9 !important;
}

/* fullscreen setup */
html, body, #wrapper, #header-wrap-fullscreen, #header-3, .custom.module-header-3, #mod-custom110.mod-custom.custom{
    /* give this to all tags from html to .fullscreen */
    height:100%;
}


.fullscreen {
    width:100%;
    height:100%;
    overflow:hidden;
}
.fullscreen.overflow {
    height:auto;
    min-height:100%;
}

.mnwall_iso_buttons a.mnw_filter_active, .mwall-buttons a.mwall-filter-active {
	background-color: #dbb25c !important;
}

.mnwall_iso_buttons a{
	border: 0px !important;
}

.mwall-buttons a {
	
	border: 0px !important;
	background: transparent !important;

}

.dropbox_content h3{
	color: #fff;
	text-transform: uppercase;}

.updownload-bg{
 background: rgb(30,30,30);
background: linear-gradient(0deg, rgba(30,30,30,1) 0%, rgba(41,41,41,1) 100%);
margin-bottom: 20px;
  padding: 20px;

}

/* Parallax Bilder */
.not-fullscreen {
  height: 35%;
}
 #section_parallax-1 {
    background-image: url("../../../images/parallax/vocalist.jpg");
  }

#section_parallax-2 {
    background-image: url("../../../images/parallax/guitarplayer.jpg");
  }


#section_parallax-3 {
    background-image: url("../../../images/parallax/3tk-room-01.jpg");
  }

/*Navigation for non mobile*/

@media only screen and (min-width: 416px)
{
#nav {
    background-color: #132e37;
    height: 41px;
    z-index: 999;
	overflow-x: scroll;
}
	#menuToggle {
  display: none;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky-menu {
    position: fixed;
    top: 0;
    width: 100%;
    background: white; /* Anpassen je nach Design */
    z-index: 1000; /* Sicherstellen, dass es über anderen Elementen bleibt */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Schatten für bessere Sichtbarkeit */
}


ul.nav {
   
    text-transform: uppercase;
}
ul.nav li{
	padding:0.7rem 3.5% ;
}
.menu-logoico{
height: 25px;
	width:25px;
	margin-right: 20px;
	
}

ul.nav li.active, ul.menu li.active a, ul.nav li.current, ul.nav li.current a,  ul.nav li.deeper, ul.nav li.deeper a{
	color:#444444;
	
}
ul.nav li ul {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    padding: 0px;
	list-style: none;
	z-index:105;
}

ul.nav li ul li{
	padding-right:20px;
}

ul.nav li ul li ul {
	display: block;
	visibility: inherit;
	opacity: 1;
	position: relative;
	list-style: none;	
}

ul.nav li:hover > ul {
    padding: 0 1003em;
    top: 52px;
}

ul.nav li:hover > ul {
    visibility: visible;
	opacity: 1;
	padding: 0 1016em;
	margin: 0 -1016em 0 -1016em !important;
	position:relative;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.7);
	/-webkit-transition: opacity 0.6s ease-out 0s;
	-moz-transition: opactiy 0.6s ease-out 0s;
	-o-transition: opactiy 0.6s ease-out 0s;
	transition: opacity 0.6s ease-out 0s;
	width: 300px;
	display: flex;
	text-align: left;	
}

ul.nav ul li:hover > ul{
	display: block;
	
}
	#nav{
		overflow: hidden;
	}

#com-users-login__form{
	width: 350px;
	position: relative;
	margin:0 auto;
}
.com-users-login__options {
    justify-content: center;
    flex-direction: row;
    
}

.list-group-item {
		padding: 0.75rem 4.25rem;

	  background-color: transparent;
}

} /*mediaonly*/

@media only screen and (max-width: 415px)
{
	#nav {
    background-color: #1e1e1e;
    height: 25px;
    z-index: 999;
		overflow-x: scroll;
}
	#menuToggle {
  display: none;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
ul.nav {
    text-transform: uppercase;
    
}
ul.nav li{
	font-size: 0.6rem;
	padding:0.3rem 3.5% ;
}
.menu-logoico{
height: 25px;
	width:25px;
	margin-right: 20px;
	
}

ul.nav li.active, ul.menu li.active a{
	color:#dbb25c;
}
.menu-logoico{
height: 25px;
	width:25px;
	margin-right: 20px;
	
}

ul.nav li.active, ul.menu li.active a{
	color:#dbb25c;
	
}
ul.nav li ul {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    padding: 0px;
	list-style: none;
	z-index:105;
}

ul.nav li ul li{
	padding-right:20px;
}

ul.nav li ul li ul {
	display: block;
	visibility: inherit;
	opacity: 1;
	position: relative;
	list-style: none;	
}

ul.nav li:hover > ul {
    padding: 0 1003em;
    top: 52px;
}

ul.nav li:hover > ul {
    visibility: visible;
	opacity: 1;
	padding: 0 1016em;
	margin: 0 -1016em 0 -1016em !important;
	position:relative;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.7);
	/-webkit-transition: opacity 0.6s ease-out 0s;
	-moz-transition: opactiy 0.6s ease-out 0s;
	-o-transition: opactiy 0.6s ease-out 0s;
	transition: opacity 0.6s ease-out 0s;
	width: 300px;
	display: flex;
	text-align: left;	
}

ul.nav ul li:hover > ul{
	display: block;
	
}	




/*Upload Box*/
dd input#dropbox_upload_field_1.btn.btn-primary.dropbox_file_search{
width:300px !important;
}
input.dropbox_upload_des_folder{
width:300px !important;}

	/*VORBEREITUNG FÜR FLEX MENU https://codepen.io/shieldsma91/pen/zLpbLX */
	/*
#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 25px;
  left: 25px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
/
#menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #36383F;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#nav
{
  position: absolute;
  width: 180px;
  height: 400px;
  box-shadow: 0 0 10px #85888C;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background-color: #F5F6FA;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  transition-delay: 2s;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}
*/
} /*mediaonly*/
/*Logout*/
.logout {
	padding-bottom: 20px;
}

/*Breadcrumb*/


.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.35rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #000;
    border-radius: 0px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.6em;
	z-index: 98;
	position: relative;
	justify-content:  inherit;
padding-left: 22%;
}
.breadcrumb li span.divider:before{
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105";
	color: #dbb25c;}
.breadcrumb li span.divider:first-child{
	visibility: hidden;	
}

li span.divider img{
	
	vertical-align: inherit;
}

#content-wrap{
	/*padding-top:20px;*/
	/*background-image: url("/images/template/BG.jpg");
	background-size: auto;*/
	background-color:#101010;
}

.mnwall_iso_filters_cont, .mnwall_iso_reset_cont{
	font-size: 0.8em;
}
.mnwall_iso_buttons {
  margin-right: 0 !important;
  text-align: center;
}

.sboard .sb-item .sb-inner{
	padding: 0 0 10px 0 !important;
}
.filter-items{
	width: auto !important;
	margin: 0 auto !important;
	
	
}


/*FOOTER*/

#footer-1-a{
	/*margin-top: 30px; -> evntl nicht nötig, da items in content nun bottom padding haben*/
	height: 50px;
	background-color: #e8c7ba;
	display:block;
}
#footer-1-b{
	height: 350px;
	background-color: #fff3eb;
  padding: 50px;
  background-image: url("../../../images/homepage/hg_apricot.svg");
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;
	display:block;
}


.footer-text{
	padding-top:48px;
	text-transform: uppercase;
	font-size: 1rem;
		
}
.footer-icons{
	padding-top:30px;
}

div#footer-1-b i.fab, div#footer-1-b i.far{
	color:white;
	font-size: 36px;
	padding: 20px;
} 


/*CONTENT*/

.items-leading.clearfix{
	padding-top: 15px;
	
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.page-header{
	text-align: left;

}
div.page-header h2{
	font-size:1.5em;
	/*letter-spacing: 0.3em;*/
	font-weight: bold;
}

.item, .item-page{
	padding:15px 0;
	border-bottom-width: medium;
    border-bottom-style: solid;
    border-bottom-color:#1e1e1e;
	margin: 0 auto;
	font-size: 0.9em;
}

@media only screen and (max-width: 1023px)
{
	.item, .item-page{
	width: 85%;

}
	
#videoplayer {
	display: block;
	margin: 0 auto;
	width: 100%;
	float:right;
	
}
#player_subtitle{
	display:block;
	background-color: #1e1e1e;
	font-size: 0.7em;
	font-style: italic;
	padding: 10px;
	letter-spacing: normal;
	}

}

#paragraph-wrapper{
	margin: 0 auto;
  	text-align: center;
	 max-width: 90%;
 }




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

#paragraph{
width: 38%;
  float: left;
  text-align: justify;
  margin: 5px 6%;
}

.mnwall_iso_filters_cont, .mnwall_iso_reset_cont{
	font-size: 0.95em;
}
	
.item, .item-page{
	
	/* width: 50%; */ /*Auskommentiert bei 3TK weil bei Vita das Design sonst nicht passt*/
	
	
	}
.download{
	display:block;
	position:relative;
	bottom: 0;
}
.phocadownloadfile32{
	background: #1e1e1e;
	border: none;
	margin: 0;
	font-size: 0.7em;
	font-style: italic;
	padding: 10px;
	letter-spacing: normal;
	
}
#description{
	text-align: justify;
	float: left;
	display: block;
	width: 30%;
	margin-left: 15px;
}
/*VIDEO PLAYER - direkt Reference Links (HKST,KSK...)*/
#videoplayer {
	display: block;
	/*margin: 0 auto;*/
	width: 65%;
	float:right;
}
#player_subtitle{
	display:block;
	background-color: #1e1e1e;
	font-size: 0.7em;
	font-style: italic;
	padding: 10px;
	letter-spacing: normal;
	}
}
/*MediaPage - public References*/
.description-row{
  display: flex; /* equal height of the children */
}

.description-col {
  flex: 1;/* additionally, equal width */
  font-size: 1.2em;
  padding: 25px;
  }
#videoplayer-a {
	display: block;
	margin: 0 auto;
	width: 100%;
	padding:0 0 150px 0;
	}
#player_subtitle-b{
	
	background-color: #1e1e1e;
	letter-spacing: normal;
	}
#player_subtitle-c{
	
	background-color: #1e1e1e;
	letter-spacing: normal;
	}
#videoplayer-wall
{
	display: block;
	/*margin: 0 auto;*/
	width: 33%;
	float:right;
	
}

/* Start Slider*/
#startslider{
	
	padding-bottom: 0px;
	background-color: #000;
	margin-bottom: 0px;
	padding-top: 0;
	width:63%;
}
.slide-desc-bg.slide-desc-bg-default{
	background: rgba(0,0,0,0.3) !important;
	}

	
.slide-desc-text-default{
	text-align:center;
	padding:2%;
	color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  font-size: 14px;
  line-height: 18px;;
	}
	
	
/* Social Media Feed + Masonry About */
	
#mnwall_container_1, div#mwall_container_1{
	width: 63%;
	position: relative;
	display:block;
	margin: 0 auto;
	padding-bottom: 40px;
}

#timeline_wall1modern, #sb_wall1modern{
	width: 80%;
	position: relative;
	display:block;
	margin: 0 auto;
	padding-bottom: 40px;
}
.sboard .sb-item .sb-inner .sb-thumb {
   
    border: 0px solid !important;
    background-color: transparent !important;
}
#sb_wall1modern .sb-instagram.sb-hover:hover, #sb_wall1modern .sb-instagram.active, #sb_wall1modern div.filter-items.sb-modern span.sb-hover.sb-instagram.filter-label.active {
  background-color: #dbb25c !important;
  border-color: #dbb25c !important;
  color: #fff !important;
}


#sb_wall1modern div#timeline_wall1modern.sboard .origin-flag.sb-instagram {
    background-color: #dbb25c !important;
}
#sb_wall1modern div#timeline_wall1modern.sboard .origin-flag.sb-instagram:after{
    border-left: 8px solid #805500!important;
}

.mnwall-s-desc, .mnwall-desc{
	
	padding: 0 !important;

}
.mnwall-masonry .mnwall-item-inner, .mnwall-hover-box-content{
	padding: 0 !important;
	
}

.mnwall_iso_buttons a {
  border: 0;
  background: transparent !important;
  box-shadow: 0;
}
.item-page div.item-image{
	display: none;
	visibility: hidden;
}
div.pull-left.item-image img{
	display:none;
}


/* Dropbox Component */
.file_listing_header_row {
        background: #dbb25c !important;
}
div.file_listing_table {
	text-align: left;
}

/*ICONS Upload Download*/

.fas.fa-file-upload, .fas.fa-file-download{
	color: #dbb25c !important;
	font-size: 2em;
	position: relative;
	display: block;
	float:left;
}

/* spotify Field */
html body.site.mwm-am div#wrapper section#content-wrap div#content-1 div.blog div.items-row.cols-1.row-3.row-fluid.clearfix div.items-row.cols-1.row-7.row-fluid.clearfix div.span12 div.item.column-1 dl.fields-container dd.field-entry.add-spotify span.field-value.iframe{
	height: 150px !important;
	width: 80% !important;
}


/*ALERT Messages*/
span.alert-messsage, .alert-message, .error {
    font-size: 1.1em;
    color: #fff;
    /*background-color: #000;*/
     background: rgb(0,0,0);
	background: -webkit-linear-gradient(rgba(0,0,0,1) 0%, rgba(50,50,50,1) 100%);
	background: -o-linear-gradient(rgba(0,0,0,1) 0%, rgba(50,50,50,1) 100%);
	background: linear-gradient(rgba(0,0,0,1) 0%, rgba(50,50,50,1) 100%); 
    text-transform: uppercase;
    border-radius: 0;
    border: medium groove #dbb25c;
    padding: 5px;
    margin:0 5px;
    text-align: center;
    display: block;
}

/*LIVESTREAM for IFrames*/
#streamingwrapper{
	margin: 0 auto;
	max-width: 1200px;
	min-height: 600px;
}
#audiostreamframe  {
	display: block;
	width: 20%;
	width: 200px;
	height: 300px;
	float: left;
	z-index: 10;
position: absolute;
	left:22%;
}

#audiostreamframeheader{
	display: block;
	background-color: #dbb25c;
	font-size: 0.7em;
	height:20px;
	width: 346px;
	padding-top:3px; 
}

#noaudiostreamframe  {
	display: block;
	width: 20%;
	width: 200px;
	height: 300px;
	float: left;
	position: absolute;
}

#zoomframe {
	display: block;
	float: left;
	min-width: 600px;
	width: 80%;
}
/*ZoomWEB SDK Design*/
#zmmtg-root{
	/*height: 699px !important; 
	width: 393px !important; */
	top: 75px !important; 
	left: 80px !important;
	background: none !important;
	position: relative;
	z-index: 2;
	
}

html body.site.livestream div#zmmtg-root div.root-inner div#content_container.main-content{
	justify-content: unset !important;
	display: block !important;
	align-items: unset !important;
	
}

html body.site.livestream div#zmmtg-root div.root-inner div#content_container.main-content div#content div.container-preview div.media-preview-container p{
	display: none !important;
	
}

#wc-loading{
	background: none !important;
	top: -225px !important;
	
}
#wc-leave{
	background: #101010 !important;
	top: -225px !important;
	left:-3%;
}


#content_container{
	
	background: none !important;
	
}

.joinWindowBtn{
	
	background-color: #dbb25c !important;
}




/*Terms of Use*/
.list-type2 ul h3{
	color:#fff;
}

.form-terms-stream{
	margin: 20px;
}

.form-end-text{
 font-style: italic;
	color:#dbb25c ;
	
}

.list-type2{
margin:0 auto;
	max-width: 600px;
}

.list-type2 ul{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: 'Raleway', sans-serif;
padding: 0;
margin-bottom: 4em;
}

.list-type2 ul ul{
margin: 0 0 0 2em;
}

.list-type2 li{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #1e1e1e;
color: #b2b3b2;
text-decoration: none;
transition: all .2s ease-in-out;
}

.list-type2 li:hover{
background: #d6d4d4;
color: #1e1e1e;
text-decoration:none;
transform: scale(1.1);
}
.list-type2 li:before{
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -0.8em;
font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f152";
color: #dbb25c;
}