/* *********************************
           Variables
  ********************************** */
 

 
  .row {
  	 /*
  	  margin-right: 150px;
 	 margin-left: 150px;
 	 */
  }
  a {
  	color: #4098d4;
	text-decoration: none;

  }
  a:hover {
  	color: #000;
	text-decoration: none;
  }

  p{text-align: center;
	}
  
  h1{
	/*font-family: 'Russo One', sans-serif;*/
	font-family: "Montserrat",sans-serif;
	  font-style: normal;
  font-weight: 600;
	font-size: 30px;
	line-height: 35px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 16px;
  }
  
  h2 {
  font-family: "Raleway",sans-serif;
  	text-align: center;	
	font-size: 30px;
	line-height: 35px;
	margin-top: 0px;
	margin-bottom: 16px;
	

}


.td1 {
	float:left;
	width: 99%;
	background-color:#EFEFEF;
	background-color:rgba(153,153,153,0.2);
	background-color:pink;
}
.td2 {
	float:left;
	background-color:pink;
	background-color:#EFEFEF;
	background-color:rgba(153,153,153,0.2);
	width: 48%;
	margin-right:1%;
}
.td3 {
	background-color:gold;
	background-color:#EFEFEF;
	background-color:rgba(153,153,153,0.2);
	float:left;
	width: 31.333%;
	margin-right:1%;
}
.td4 {
	background-color:gold;
	background-color:#EFEFEF;
	background-color:rgba(153,153,153,0.2);
	float:left;
	width: 23%;
	margin-right:1%;
}
.td6 {
	background-color:gold;
	background-color:#EFEFEF;
	background-color:rgba(153,153,153,0.2);
	float:left;
	width: 64.6%;
	margin-right:1%;
}
.td8 {
	background-color:gold;
	background-color:#EFEFEF;
	background-color:rgba(153,153,153,0.2);
	float:left;
	width: 73%;
	margin-right:1%;
}
.td1, .td2, .td3, .td4, .td6, .td8 {
	position:relative;
	z-index:0px;
	margin-bottom:1%;

	/*border:dotted 1px grey;*/
}
.td1 img, .td2 img, .td3 img, .td4 img, .td6 img {
	width: 100%;
	margin-bottom:3%;
}




.clr {clear:left;
	font-size: 0px;} 

 
 
 
.pfad {
	margin-top:40px;
	margin-bottom:40px;
	color: #4098d4;
		
	}
.pfad a{color:#000;}
.pfad a:hover{color: #4098d4;}
  
  .smart{
  	text-align: left;
  	}
  
  .smart span, .pfad a, .pfad span{
  	white-space: nowrap;
  }
  .smart a {
  	color:#fff;  	
  	text-decoration: none;
  }
   .smart a:hover {
  	color: #000;	
  } 
  .container {
  	/*position:relative;*/
	
  	background-color: #999;
  	background: rgba(246, 246, 246, 0.5);
  	background-color: pink;  	
  }
  /*.col-lg-12 {
  	border:dashed 1px red;
  }	*/
  	.detail{min-height:100px;  }
  
  
.nav0 {
	background-color: rgba(30, 30, 30, 0.7);

	width:100%;
	margin-right: 0px;
	padding-right: 0px;
 	margin-left: 0px;
	position:absolute;
	z-index:50;
	/*top:70px;*/
	left:0px;
	
}
#logobox {
	width:100%;
	height:75px; 
	background-color: pink;   
  }
#logo { 	 
	position:relative; 
	width:60px; 
	height:auto; 
	margin-top:0px; 
	left:0px; 
	top:8px;

	}
#logozusatz { 	 
	position:relative; 
	width: 200px;
	height:auto; 
	margin-top:0px; 
	left:10px; 
	}

.claim {
	font-family: "Montserrat",sans-serif;
	font-style: normal;
 	font-weight: 600;
	font-size: 30px;
	line-height: 35px;
	left:180px;
	top:22px;


	}

    #telefon a{

	display:block;
	height:87px;
	width:87px;
	background-image: url(../userfiles/buttons/kontakt_big.svg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 100% auto;		
	position:absolute;
	
	top:30px;
	right:0px;
	z-index:200;		
		
		
    }


   #telefon a:hover {
	background-image: url(../userfiles/buttons/kontakt_big_active.svg);
  }
   
  .small-logo-container {height:40px;}

  	
  .small-logo img {
  	margin-top: 25px;
  	}
  	 	
	.left0{ width:7%; width:80px; float:left; position:relative; /*background-color:pink;*/} 
	.logozusatz0 { width:30%; width:340px; margin-top:1%; float:left; position:relative; /*background-color:gold;*/} 
	.claim0 {  width:39%; width:300px; float:left; position:relative; /*background-color:lightgrey;*/}  	 
	.right0 { /*width:15%; float:left;*/ position:absolute; right:80px;} 
  
 
 .www {
  display: block;
  cursor: pointer;
  font-size: 18px;
  line-height: 50px;
  background-image: url("../userfiles/buttons/www.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  padding-top: 0px;
  padding-left: 60px;
}
 .www2 {
  display: block;
  width:50%;
  float:left;
  cursor: pointer;
  font-size: 18px;
  line-height: 50px;
  background-image: url("../userfiles/buttons/www.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  padding-top: 0px;
  padding-left: 60px;
  text-align:left;
 /* background-color:gold;*/
  margin-bottom:5px;
}
  
  /* *********************************
   Team
  ********************************** */
  
  .team, .teambox {
  	border-bottom: solid 2px;
  	float: left;
  	margin-bottom: 35px;
  	padding-bottom: 35px;

  	}
  
  .teambild {
  	width: 30%;
	height: auto;
	float: left;
	clear: left;
	margin-right: 3%;
	padding-bottom: 10px;
  	}
  	
  .teambild img {
  	width: 100%;
  	}
  	
  .teamtext {
  	float: left;
  	width: 67%;
  	}
  
  .teamtext p{
  	text-align: left;
  	}
  .teamtext h2{
  	text-align: left;
  	}
  
  .teamtext .sound, .teamtext span{
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	margin-top: 0px;
	border-bottom:solid 2px #000;
	display:block;
  } 

  .teamtext .sound
{

padding-right: 30px;
  background-image: url("../userfiles/images/meta/sound.svg");
  background-repeat: no-repeat;
  background-position: right center;
} 
  	/*-------end team-------*/
  	
  /* *********************************
   Referenzen
  ********************************** */	
  	
  	.referenz {
  		width: 29%;
  		margin-right: 2%;
  		margin-left: 2%;
  		border-bottom: solid 2px;
	  	float: left;
	  	margin-bottom: 10px;
	  	padding-top: 10px;
	  	padding-bottom: 10px;
  		}
  		
  	 .trenner {
  	 	background-image: url("../userfiles/images/meta/trennlinie.svg");
  		background-position: bottom center;
  		background-repeat: no-repeat;
  		}
  	
  	  .trenner p{
  	  	padding-bottom: 40px;

  	  	}
  	
  	
  	/*-------end referenzen-------*/
  
  	
  /* *********************************
   Musik
  ********************************** */	
  
 
 .shop
{ 	
  padding-right: 30px;
  background-image: url("../userfiles/images/meta/shop.svg");
  background-repeat: no-repeat;
  background-position: right center;
  display:block;
  	height: 25px;



}  	


  	/*-------end musik-------*/
  
   /* *********************************
   Pinnwand
  ********************************** */	
  	
  	.newsbox {
  		text-align: center;
  		padding-bottom: 25px;
  		margin-bottom: 25px;
  		border-bottom:solid 2px #000;
  		}
  
  	
  	/*-------end Pinnwand-------*/ 	
  	
  .sliderbox2 img{
  	/*
  	width:100%;
  	height:auto;
  	*/
  }
.sliderbox2{
	background-color:pink;
  	width:100%;
  	height: 500px;
  	/*padding-right:20px;*/
  	
  }
  
.hintergrundbox {
 /* position: absolute;*/
  width: inherit;
  height: inherit;
  width: 100%;
  height: 500px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}  
  
  
  
/* *********************************
   Some Style Overrides on Bootstrap
  ********************************** */
.navbar-inverse {
  background: rgba(62, 195, 246, 0);
  border-bottom: none;
}

.navbar-inverse .navbar-toggle {
  border: 1px solid #333;
  border-color: rgba(255, 255, 255, 0.7);
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  border-color: transparent;
}
@media (max-width: 767px) {
  .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    background: rgba(255, 255, 255, 0.75);
  }
}

.navbar-inverse .navbar-nav > li > a {
  color: black;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  color: #22F;
}
.navbar-nav > li > a {
	padding-top: 0px;
  padding-bottom: 0px;
}
.navbar-nav > li {
	background-color: #999;
	float:none;
	width:100%;
}
.navbar-nav {
	background-color: #999;
	float:none;
	width:100%;
	/*display: none;*/
}
.collapse {
  /*display: none;*/
}



/* *********************************
           Toolbar Logo
  ********************************** */
.small-logo-container {
  padding-top: 50px;
  padding-left: 10px;
  height: 50px;
  overflow: hidden;
  position: absolute;
}

.small-logo {
  color: white;
  font-size: 2.5em;
  padding-bottom: 2px;
}

/* *********************************
           Big Logo
  ********************************** */
 #nav1 {
	margin-top: 0px;
}
#nav1 ul {
	list-style-type: none;
	padding-left: 0px;
	margin-left: 0px;
}
#nav1 ul li {
	font-size: 40px;
	line-height: 60px;

	margin-top: 6px;
	margin-bottom: 6px;
	color: white;
	text-shadow: #333 0.05em 0.05em 0.1em;
	margin-left: 0px;
}
#nav1 ul li:hover  a{
		background-image: url(../userfiles/buttons/weiter_button_aktiv.png);
}


#nav1 ul li a {
	font-family: 'Oswald', sans-serif;
	font-style: normal;
 	 font-weight: 700;
	display:block;
	/*background-color: #999;*/
	color: #FFF;
	text-decoration: none;
	background-image: url(../userfiles/buttons/weiter_button.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-left: 75px;
} 
.nav0 .col-xs-12 {
	/*
		margin-right: 0px;
    margin-left: 0px;
    */
}
#nav3 .nav {
	list-style-type: none;
	padding-left: 0px;
	margin-left: 0px;
	width:auto;
	float: right;
	}
#nav3 .nav li {float:left; padding:0px; margin:0px;}
#nav3 .nav li a {color:#FFF;display:block; padding:0px; margin:0px 5px;}
#nav3 .nav li a:hover {color:#000;}


/* Start Einzelseiten */

.container-fluidXX {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-bottom:0px;
  margin-left: auto;
}

.container.detail h1 {
	text-align: left;
	}
	
.container.detail p {
	text-align: left;
	
	}
	
/*.container.detail img {
	width:200px;
	height: auto;
	float: left

	}*/
	
.icon
{
  background-image: url("../userfiles/images/meta/icon_2.svg");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 20px auto;
  height: 20px;
  width: 20px;
  margin-left: 5px;
  display: inline-block;
}

.i1
{
  background-image: url("../userfiles/images/meta/download.svg");
}
.i2
{
  background-image: url("../userfiles/images/meta/sound.svg");
}
.i3
{
  background-image: url("../userfiles/images/meta/shop.svg");
}
/* Ende Einzelseiten */	
	
#collapseExample2 .container {
  padding-right: 0px;
  padding-left: 0px;
}

#nav1b {
	font-family: 'Raleway', sans-serif;
	/*font-family: 'Old Standard TT', serif;*/
	font-weight: 400;
	list-style-type: none;
	padding-left: 0px;
	margin-left: 0px;
	/*height:100px;*/
	margin-top: 20px;
	margin-bottom: 26px;
	width:100%;
	text-align: left;



}
#nav1b li {
	position:relative;

	font-size: 19px;
	line-height: 30px;
	margin-top: 0px;
	margin-left: 0px;

	margin-bottom: 2px;
	margin-left: 0px;
	padding-left: 15px;
	/*background-color: #333;*/
	
	padding-left: 2%;
	
}
#nav1b .m2 {
	display:inline-block;
	/*background-color: gold;*/
	width:32.33%;
	padding-left: 45px;
	padding-left: 4%;
	line-height: 26px;
	margin-bottom: 0px;
	
}
#nav1b li:hover, #nav1b .current {
	background-color: #333;
	background-color: rgba(0,0,0,0.5);
}

#nav1b li a {
	color: #FFF;
	text-decoration: none;
} 
#nav1b ul li ul {
	background-color: rgba(0,0,0,0.2);
}
.adress{
	color: #FFF;
}

.pdf{
	display:block;
	cursor:pointer;
	font-size: 18px;
	line-height: 50px;
	background-image: url(../userfiles/buttons/pdf.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	/*background-size: auto 100%;*/
	padding-top: 0px;
	padding-left: 60px;
}


#kontakt {
	list-style-type: none;
	padding-left: 0px;
	margin-left: 0px;
	/*height:100px;*/
	margin-top: 40px;
	margin-bottom: 6px;
}
#kontakt li{
	cursor:pointer;
	font-size: 18px;
	line-height: 22px;
	float:left;
	width:30%;
	width:auto;
	width:100%;
	margin-left: 0px;
	margin-right: 30px;
	margin-top: 0px;
	margin-bottom: 20px;

}
#kontakt li a{
	display:block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-top: 15px;
	padding-left: 50px;
	min-height:60px;
		
	
}
#kontakt .tel a{
	background-image: url(../userfiles/images/meta/kontakt_telefon.svg);
}

#kontakt .mob a{
	background-image: url(../userfiles/images/meta/kontakt_mobile.svg);
}

#kontakt .mail a{
	background-image: url(../userfiles/images/meta/kontakt_email.svg);
}
#kontakt .adr a{
	background-image: url(../userfiles/images/meta/kontakt_maps.svg);
}
#kontakt .oef a{
	background-image: url(../userfiles/images/meta/kontakt_oeff.png);
}
#kontakt li a{
	color: #FFF;
	text-decoration: none;	
}
.full {
	position:relative;/**/
	width:96%;
	max-width: 900px;
	height:auto;
  	padding-right: 2%;
  	padding-left: 2%;
  }
.big-logo-row2 {
 	background-image: url(../userfiles/images/fof-startbild.jpg);
}  
 
.big-logo-row, .big-logo-row1, .big-logo-row2 {	
	margin-top:50px;
	background-image: url(../userfiles/images/logobild.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover; 
}
.big-logo-row {
	/*height: 542px;*/
	  height: 500px;
	/*background-position: center top;*/
}
.big-logo-row1{
	
	height: 400px;
}
.last{
	background-color:white;
	height:160px;
}
.big-logo-row3{
	box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.4);
	/*
	position: fixed;
	left: 0px;
	bottom: 0px;*/
	width:100%;
	min-height:60px;
	padding-top:5px;
	margin-top:50px;
	background-color:#4098d4;
}
.big-logo-row {
	 background-position: 60% 0px;
} 
.big-logo-row .big-logo-container {
  padding-top: 50px;
}
.big-logo-row h1 {
  font-size: 4em;
  margin: 0;
  padding: 0 0 15px 0;
}

.anker {
	background-color: white;
	height: 5px;
	width: 10px;	
	position: relative;
	top:-55px;	
	left:-100px;
}

/*ANIMATIONEN*/

.flims-container {
	text-align: center;
	background-color:#323C45;
	position: relative; 
	overflow: hidden; 
	width: 100%;
	height: auto;
	margin-bottom:10px;
} 
iframe {
  max-width: 100%;

}  

.flims-container iframe {
	 width: 1024px;
	 margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	height: 706px;
}
.khr-container iframe {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;
}




.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
  margin-bottom:10px;


}
.embed-container iframe {

  position: absolute; 
  top: 0px; 
  left: 0px; 
  width: 100%; 
  height: 100%; 

}
 .black-container {
 text-align: center;
 background-color:#000;
  position: relative; 
  overflow: hidden; 
	width: 100%;
  height: auto;
  margin-bottom:10px;
} 
.black-container iframe {
	 width: 1024px;
	 margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	height: 706px;
} 

.scrollbox{
	/*border:solid 1px red;*/
	overflow: auto;
	/*height: calc(100vh - 60px);*/
	
	
}
.sp50 {
	width: 50%;
	float:left;
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 73.6%;
}  

@media only screen and (min-width: 992px) and (max-width: 1200px) {

	.slider, .sliderbox2, .hintergrundbox {height: 500px;}
	#logo {}
	.claim0{  /*width:55%; left: 90px;*/ }  	 

}

@media only screen and (min-width: 768px) and (max-width: 992px) {

	.slider, .sliderbox2, .hintergrundbox {height: 400px;}
	.detail{min-height:882px;  }
	#logo {  }
	.claim0{  /*width:45%; left: 20px;*/  background-color:red; display: none;}  
	.big-logo-row, .big-logo-row1, .big-logo-row2 { border-left:solid 1px red; }
	/*
	background-image: url(../userfiles/images/hg/header_mirari_walkin.jpg);	 
	*/
	#nav1b .m2 { width:45%; padding-left: 5%; /*background-color:pink;*/}
}

@media only screen and (min-width: 320px)  and (max-width: 767px) {		
	#logozusatz {/*background-color: red;*/ width: 150px; margin-left: 30px; top:10px;}
	.claim0{ display: none; }
	#telefon a {/*background-color: blue;*/ height:50px; width:50px; top:10px; right: -40px; }
	#nav1b .m2 { width:90%; padding-left: 10%; /*background-color:gold;*/}
	.scrollbox{
		height: calc(100vh - 60px);
	}
	
 .left0 {width:15%;width:60px;  float:left; position:relative; } 
 .logozusatz0 {  width:60%; height:50px; margin-top:10px;  /*background-color:gold;*/ } 

 	 
 .right0{ /*width:15%; float:left; position:relative; background-color:grey;*/right:50px;} 
	
	.www2 {  width:100%; /*background-color:gold;*/ background-size:30px auto; font-size: 16px; line-height:30px; padding-top: 0px;
  padding-left: 40px; margin-bottom:5px;}
	.sp50 { width: 100%; padding-left:15px;}	
}
@media only screen and (min-width: 320px)  and (max-width: 511px) {		

}
/* Smartphone Portrait und Landscape */
@media only screen and (min-width: 600px) and (max-width: 767px) {
	#logobox { margin-left: 15px; height: 70px;}
	#logo {width: 55px;}
	#logozusatz {width: 200px;  left: 20px;}
	#telefon { top:0px; }
	.claim {font-size: 25px; top: 22px; }
	#telefon a{ height:50px; width:50px; top:10px; }
	.small-logo img { margin-left: 15px;}
	.slider, .sliderbox2, .hintergrundbox {height: 300px;}
	.left0{ width:15%; float:left; position:relative; } 
	.center0 {text-align:center; width:70%; float:left; position:relative;}
	.claim0{ display: none;  /*width:35%; left:20px;*/}  
	
	
	
		 

}







@media (min-width: 400px) {
  .big-logo-row h1 {
    font-size: 4.5em;

  }
}
@media (min-width: 440px) {
  .big-logo-row h1 {
    font-size: 5.5em;
  }
}
@media (min-width: 500px) {
  .big-logo-row h1 {
    font-size: 6.5em;

  }
}
@media (min-width: 630px) {
  .big-logo-row h1 {
    font-size: 7.5em;
  }
}
@media (min-width: 768px) {
  .big-logo-row h1 {
    font-size: 9em;
    padding-bottom: 30px;
  }
}
@media (min-width: 1200px) {
  .big-logo-row h1 {
    font-size: 12em;
  }
}
@media print{
	.linkbox2 .link2 { display: block; width: 48%; margin-right:2%; float:left; background-image: none; padding:0px;}
	.linkbox2 .bild2 { display: inline-block; margin:0px; }
	.linkbox2 .linktext {position:absolute; bottom:20px; left:120px;}
	
.content1 .vcard, .pdf  { display:none;}
#header { display:none;}
.content1 .pdf  { display:none;/**/border:solid 1px red;}

}