/* 
 
-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 


bootstrap > clears row container

   .row{margin-right:-15px;margin-left:-15px}
   .row:before,.row:after{display:table;content:" "}
   .row:after{clear:both}
*/
 @charset "UTF-8";

/*
 @font-face {
    font-family: 'entypo';
    src: url('../_media/fonts/entypo.eot');
    src: url('../_media/fonts/entypo.eot?#iefix') format('embedded-opentype'),
         url('../_media/fonts/entypo.woff') format('woff'),
         url('../_media/fonts/entypo.ttf') format('truetype'),
         url('../_media/fonts/entypo.svg#entypo') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'entypo-social';
    src: url('../_media/fonts/entypo-social.eot');
    src: url('../_media/fonts/entypo-social.eot?#iefix') format('embedded-opentype'),
         url('../_media/fonts/entypo-social.woff') format('woff'),
         url('../_media/fonts/entypo-social.ttf') format('truetype'),
         url('../_media/fonts/entypo-social.svg#entypo-social') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/


/* source-sans-pro-regular - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-italic - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
  src: url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}



/* source-sans-pro-600 - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600.eot'); /* IE9 Compat Modes */
  src: url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-600italic - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
  src: url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600italic.eot'); /* IE9 Compat Modes */
  src:  url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_media/sys_fonts/source-sans-pro-v14-latin-ext_latin-600italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

 

/* measrue */
#screensize{
position: absolute;
top:10px;
right:20px;
color:#666;
z-index: 9999;
display: none;
}

.measure{
color:#ff0000;
color:#666;
}





/* general  ------------------------------------------------*/

fieldset, img { border: 0 solid; }

	* {
			margin:0;
			padding:0;
			outline: none; 	/* prevent safari borders */
			}

 

html, body {
 margin:0px; padding:0px; width: 100%;  
		overflow-x: hidden;
			 
			font-family: 'Source Sans Pro', sans-serif;
			font-weight: 400;
		font-size: 15px;
		line-height:1.5;
		color: #222;
	 font-style: normal;
 	  background-color: #f5f5f5;
	}	


/*  fixed footer (mainpge without aktuell)
 */

.mainpage #wraper{
min-height: calc(100vh - 45px);
}
 


		
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


.hyphenate {
 -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}




 /* images positionierung responsive
*/
img{
margin:0;
padding:0;
display: block;
border:none;

max-width: 100%;
height: auto !important;
-ms-interpolation-mode: bicubic; 

/*
 image-rendering: optimizeQuality;
 image-rendering: optimize-contrast;
 image-rendering: -webkit-optimize-contrast;
 */
}


.italic, i, em {
font-style: italic;
}

.bold, b, strong {
font-weight: 600;
}

		a,
		a:visited{
		color:#333333;
		text-decoration: none;
		}	
 
		a:hover,
		a:active{
		color:#265f5a;
		}	


		#content a,
		#content a:visited
		{
		color:#333333;
		text-decoration:none;
		border-bottom:1px dotted #888;
		border-bottom:1px dotted #265f5a;
		}

		#content a:hover,
		#content a:active
		{
		color:#265f5a;
		text-decoration:none;
		border-bottom:1px dotted #265f5a;
		}



blockquote {
  border-left: 0px solid  #7b8d8a;
 color:#7b8d8a;

  margin:20px 0px;
  padding:0px;
  quotes: "\201C""\201D""\2018""\2019";
   font-size:15px;
   font-style:italic;
}


blockquote:before {
 color:#7b8d8a;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}


/**/
blockquote:after {
 color:#7b8d8a;
   content: open-quote;

  font-size: 4em;
  line-height: 0.1em;
  margin-left:0.20em;
  vertical-align: -0.5em;
}

blockquote p {
  display: inline;
}

ul {
padding:0px 0px 0px 30px;
}






/** colors
*/

.bgwhite{
background-color:#fff;
}
.bggrey {
background-color:#eee;
	background-color:#efefef;
	background-color:#f5f5f5;

}



.black{
color:#333;
}
.white{
color:#ffffff;
}

.lightgrey{
color:#999;
}


.grey, .grey a, .grey a:visited{
	 color:#6b6b6b;
}
	.grey a:hover,
		.grey a:active{
		color:#c4c42b;
		}	

.mint{
color:#00716b;
}

 
/* headlines 
	color:#0c6059;
	*/
		h1, h2, h3 {
 				font-family: 'Source Sans Pro', sans-serif;
 					font-weight:400;
				margin:0px;
					margin:0px;
			line-height: 1.1;
	 	color:#222;
			}

 

h1 {
	font-size:30px;
	line-height: 1.2;
	color:#00716b;	
}
 

h2 {
	font-size:24px;
	line-height: 1.2;
}
.h2sub{
		font-size:18px;
color:#444;
}


h3 {
	font-size:18px;
	line-height: 1.2;
font-weight:400;
color:#333;
}

h4 {
				font-size: 14px;
				line-height: 1.1;
				margin:0px 0px 8px 0px;

 font-weight:400;
color: #333;
}

.spotcolor1{
	 	color:#265f5a;

}



p, pre{
margin:20px 0px;


}

.inner > p:first-child{
margin-top:0px;
}

 


.header + p{
margin-top:3px;
}


h1 + h1
{
margin-top:0px;
margin-bottom:40px;
}

 
h1 + h2
{
margin-top:0px;
margin-bottom:20px;
}


.archiv h1 + h2
{
margin-bottom:5px;
}


h2 + h4{
margin-top:5px;
}
h1 + h4{
margin-top:5px;
}


h1 + p {

}

h2 + p,
h3 + p,
h4 + p
{
margin-top:5px;
}


.archiv h2 + p {
margin-bottom:30px;
margin-top:5px;
}


h1 + img,
h2 + img,
h3 + img,
h4 + img
{
margin-top:10px;
}


p + h1,
p + h2,
p + h3{
margin:20px 0px 0px 0px;
}




/*
h1.header:last-child
{
margin-bottom:10px;
}
*/

.wide {
letter-spacing:0.2em;
 letter-spacing:2px;
}

.logo {
letter-spacing:0.2em;
color:#333;
}
 

 
h2.bar {
color: #c4c42b;
line-height:1;
font-weight:400;
padding-bottom:5px;
margin:35px 0px 20px 0px;
border-bottom:3px solid #c4c42b;
font-size:15px;
}

h2.bar.right{
text-align: right; 
}

h2.bar:first-child{
margin:0px 0px 20px 0px;
}

h2.bar + .article{
padding-top:0px;
}

.article:last-child{
}


 


/* slideopen content */
 
.js .slidecontent div{
display: none;
}


/*
.slidemore 
 {
color: #5e9e99;
 text-decoration: none;
 border:1px solid #ddd!important;
 padding:3px 10px;
				 cursor: pointer;
				 cursor: hand;
}
 */
 #content a.slidemore 
 {
font-weight:600;
color: #5e9e99;
font-size: 16px;
}






/* 
seperator
*/
.seperator-line,
.seperator-line2{
border-top: 1px solid #ccc;
height:	1px;
line-height:1px;
margin:16px 0px;
}
.seperator-line + p{
margin-top:0px;
}

 
.seperator-line2 {
border-top: 1px solid #ddd;
}


.seperator-bar{
border-top:3px solid #ccc;
height:	1px;
line-height:1px;
margin:16px 0px;
}

 .seperator-bar.spotcolor1{
border-top:6px solid  #0c6059;

}

.seperator-bar + p,
.seperator-bar + .article{
margin-top:0px;
padding-top:0px;
}
 

 

.credits {
margin-top:5px;
font-size: 14px;
font-style: italic;
color:#999;
}






 /************************************************** mainpage logo + nav


.mainpage #logo {
position:absolute;
top:100px;
left:115px;
z-index: 998;
}

.mainpage #logo a{
				display:block;
	height:280px;
	width:800px;
text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 background: #fff url('../_media/sys_pics/tanzist-logomint-800.png') no-repeat;
  background-size: 800px 280px;
		}


#mainlogo-wrap {
position: relative;
width: 100%;
 max-width:915px;
z-index: 998;
text-align: right;
}
*/
 
#mainlogo-wrap {
position: relative;
width: 100%;
max-width:820px;
z-index: 998;
text-align: right;
}

#mainlogo {
width:100%;
height: auto;
max-width:800px;
padding-top:7%;
display: inline-block;
}





/* subpages logo + nav */
#logo {
position:absolute;
top:28px;
left:0px;
z-index: 998;
}

.mainpage #logo{
	display: none;
}


			#logo a{
				display:block;
	height:98px;
	width: 280px;
text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 background: #fff url('../_media/sys_pics/tanzist-logomint-560.png') no-repeat;
  background-size: 280px 98px;
		}


 
	#nav {
		padding:0px;
		 position: absolute;
	 left:145px;
	 top:125px;
	 	margin:0;
	 	z-index: 999;
	 	background:#fff;
	
			}



		.mainpage #nav {
		padding:0px;
		 position: absolute;
	left:auto;
	 top:auto;
		 right:-10px;
	 bottom:-15px;
 
	 	margin:0;
	 	z-index: 999;
	 	background:#fff;
	 	height:40px;
			}
 
	 
	  #nav li{
	display: inline;
 
 	 font-size: 18px;

	float: left;
width:auto;
color: #333;
}



/* 	padding:7px 12px 0px 12px; */
#nav li a{
	display: block;
	overflow: hidden;
height:35px;
line-height: 33px;
padding:0px 9px;
	color: #333;
	text-decoration:none;
	width: auto;
}


#nav ul{
	padding:0px!important;
}
#nav li ul{
	position:absolute;
	left:0px;
	top:30px;
	display: block;
	z-index:999;
}
#nav li ul a{
	color: #333;
}


/*
#nav li a:hover,
#nav li a.current{
	background: transparent;
	border-bottom: solid #333 0px;
	background: #fff;

}
 */


#nav li a:hover {
color:#333;
border-bottom: solid #00716b 4px;
}

 
#nav li a.current {
background: transparent;
border-bottom: solid #00716b 4px;
color:#333;
}
 


/* mobile nav

 
#mobilenav-wraper{
display: none;
position: relative;
border-bottom:9px solid #ccc;
}

#mobilenav-open{
display: none;
position: absolute;
top:54px;
right:10px;
}
*/



/* mobile nav
*/
#mobilenav-wraper{
display: none;
position: relative;
}

#mobilenav-wraper{
  background: #f5f5f5;
    
}

 
#mobilenav-open{
display: none;
position:absolute;
top:10px;
right:0px;
z-index: 999;
width:auto;
 
}
 

#mobilenav{
text-align: left;
background:inherit;
display: none;
    position:relative;
    overflow:visible;
    font-size:18px;
    padding-top:20px;


}

#mobilenav ul{
 	color: #222;
 	list-style: none;
  margin:0px 20px;
  padding:0px 0px 20px 0px;
 	    border-bottom:4px solid #00716b;
 
}

 #mobilenav ul  li{
 padding-left:30px;
 
}
 
 
#mobilenav  ul li a{
  display: block;
  overflow: hidden;

height:40px;
line-height: 40px;
  padding:0px;
  text-decoration:none;
    font-size:18px;
 	color: #222;
 
}


#mobilenav  ul li a:hover {
color:#00716b;
}

 
#mobilenav  ul li a.current {
color:#00716b;
padding-left:20px;

}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding:15px 0px 10px 20px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }



    /*
   * Slider Reverse
   */
.hamburger--slider-r .hamburger-inner {
  top: 2px; }
  .hamburger--slider-r .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; }
  .hamburger--slider-r .hamburger-inner::after {
    top: 20px; }

.hamburger--slider-r.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(-45deg); }
  .hamburger--slider-r.is-active .hamburger-inner::before {
    transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
    opacity: 0; }
  .hamburger--slider-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(90deg); }








 /* containers, structural elements  ------------------------------------------------*/


.linethrough {
    text-decoration: line-through;
}


 .alert{
color:#bd0232;
}



/* subpages header mit logo u. nav */
#header {
position: relative;
height: 145px;
background:#ffffff;
margin-bottom:50px;
}
 
.heroimg #header {
margin-bottom:0px;
}


.mainpage #header {
position: relative;
height:auto;
margin-bottom:0px;
}





/* diagonal border below header */


/* img based 
#diagonal2{
	width: 100%;
	height: 45px;
position: absolute;
top:160px;
left:0px;
z-index:998;

 background: transparent url('../_media/sys_pics/diagonal2600.png') no-repeat top left;
background-size: 100% 100%;
}
*/

/* rotate

#diagonal{
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);


width:100%;
position: absolute;
top:-100px;
left:-5px;
z-index: 99;
height:280px;
background: #fff;

 
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
translateZ(0);
-webkit-perspective: 1000;
}

.mainpage #diagonal{
width: 101%;
position: relative;
top:auto;
left:-5px;
margin-top:-50px;
z-index: 99;
height:130px;
min-height: 0px;
}
*/
#diagonal{
width:100%;
position: absolute;
top:-100px;
z-index: 99;
 
overflow:hidden;
height:320px;
}
#diagonal .rotate{
display: block;
height:280px;
width:101%;
margin-left:-5px;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);

outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
translateZ(0);
-webkit-perspective: 1000;
background: #fff;
}


.mainpage #diagonal{
position: relative;
top:auto;
margin-top:-50px;
z-index: 99;
height:170px;
min-height: 0px;
}
.mainpage #diagonal .rotate{
height:130px;
min-height: 0px;
}



/* masterwraper for content area */
#content {
width:100%;
position: relative;
margin-top:0px;
min-height:300px;
text-align: left;
}

.mainpage #content {
min-height:100px;
}


/* containerwraper
- 100% width to stretch bg color
- global padding left/right possible

 */
.container-wraper{
clear:both;
padding:0px 45px;
}
.container-wraper.offset1{

}

.container-wraper.pad1x0{
padding-top:20px;
padding-bottom:0px;
}
.container-wraper.pad1x1{
padding-top:20px;
padding-bottom:20px;
}
.container-wraper.pad1x2{
padding-top:20px;
padding-bottom:40px;
}

.container-wraper.pad2x1{
padding-top:40px;
padding-bottom:20px;
}
.container-wraper.pad2x2{
padding-top:40px;
padding-bottom:40px;
}

/* container for widht and centering */
.container {
position: relative;
margin: 0 auto;
max-width:1300px;
width:100%;
}


#header .container{
position: relative;
margin: 0 auto;
max-width:1500px;
width:100%; 
}
.mainpage #header .container{
position: relative;
margin: 0 auto;
max-width:1300px;
width:100%; 
}

#footer .container{
position: relative;
margin: 0 auto;
max-width:1500px;
width:100%;
}



.container:before, .container:after { content: " "; display: table; }
.container:after { clear: both; }
.container { *zoom: 1; }
 


 /* row - clearfix container for cols */
.row{
}
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; }








/* COLS
2019 basic cols
*/

.col-main{
max-width: 680px;
margin-left:270px;
}

.extrabreit .col-main{
max-width:1100px;
margin-left:130px;
}


.gallery .col-main{
max-width:720px;	
}


/* zweispalter */
.col-left,
.col-right{
position: relative;
float:left;
text-align:left;
}


.col-left .inner,
.col-right .inner {
position: relative;
text-align:left;
overflow:visible;
padding:0px;
}


.col-left{
width:270px;
}

.col-right{

max-width: 720px;
}
.col-right.offset{
margin-left:270px;
}
 




/* OLD COLS
*/

.cleft, .cright{
position: relative;
text-align:left;
}
.cleft{
float:left;
}

.cleft.offset1{
margin-left:45px;
}

.cright{
float:right
}



/* COLS PERCENTAGE
3er raster


.col-13, .col-23{
position: relative;
float:left;
text-align:left;
}
*/

.col-13, .col-23{
position: relative;
float:left;
text-align:left;
}



.col-13 {
width:33%;
}
.col-23 {
width:66%;
}
 
.col-13 img, .col-23 img{
width:100%;
}




/* COLS
4er raster
*/
.col-14, .col-24, .col-34, .col-44 {
position: relative;
float:left;
text-align:left;
}


.col-14 {
width:25%;

}
.col-24 {
width:50%;
}
.col-34 {
width:75%;
}
.col-44 {
width:100%;
}

.col-14 img, .col-24 img, .col-34 img, .col-44 img{
width:100%;
}


.col-offset-00{
margin-left:0%;
}
.col-offset-14{
  margin-left: 25%;
}
.col-offset-24{
  margin-left: 50%;
}
.col-offset-34{
  margin-left: 75%;
}





/* limit cols */
.aktuell .col-24,
.aktuell .col-sm-24,
.aktuell .col-xm-24  {
max-width:320px;
}

 


/* margin:0px 10px; 
- use padding to keep bg color if any
*/
.inner {
position: relative;
text-align:left;
overflow:visible;
padding:0px 3%;
}
 
.col-34 .inner{
max-width: 640px;
}

.limit700 .col-34 .inner{
max-width:691px;
}
 
 
 

.col-24 .inner{
padding:0px 10px 0px 0px;
}

.prodetail img{
max-width:520px;
}

.sepRight {
border-right:1px solid #ddd;
}



 
 




			#footer {
		position: relative;
			text-align: left;
				clear:both;
background: #00716b;
color:#f5f5f5;
height: 45px;
line-height: 45px;
font-size:14px;
 
}
.push{
height: 45px;
}


	
	#footer  a,
		#footer a:visited{
		color:#f5f5f5;
		text-decoration: none;
		}	
 
		#footer a:hover,
		#footer a:active{
		color:#9cd3d0;
		}	




 
#footer .sm{
float:right;
line-height:normal;
padding-top:8px;
}
#footer .sm div{
float:left;
}

 
a.nlsubscribe,
	#footer a.nlsubscribe{
color:#02534f;
 background:#b3d5d3;
 background-color:rgba(255,255,255,0.7);
 height:28px;
 line-height: 28px;
 width: 150px;

 
font-weight: normal;
font-size: 14px;
 
border: none!important;
 
display: inline-block;
text-align: center;
vertical-align: middle;
}

a.nlsubscribe:hover,
	#footer a.nlsubscribe:hover{
 background-color:#fff;
}

/*
a.fbook{
background: #3b918c url('../_media/sys_pics/fbookF.png') no-repeat 6px 6px;
display: block;
margin-left: 10px;
  height:28px;
 width:28px;
line-height:28px;
 }

 a.fbook:hover{
background-color:#02534f;
 }

 */


a.fbook{
background: transparent url('../_media/sys_pics/fbook-white.png') no-repeat 2px 2px;
background-size: 23px;
display: block;
margin-left: 12px;
  height:28px;
 width:28px;
line-height:28px;
 }

 
 
a.insta{
background: transparent url('../_media/sys_pics/insta-white.png') no-repeat 0px 0px;
background-size: 27px;
display: block;
margin-left: 10px;
  height:28px;
 width:28px;
line-height:28px;
 }

 

/* icons 

  .social{
   position: relative;
 font-family: "entypo-social";
 
 color:#b3d5d3!important;
 background:#3b918c;

 display: inline-block;

  height:28px;
 width:28px;
 line-height:28px;
  font-size: 36px;

  overflow: hidden;
text-align: center;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.social a{
 color:#b3d5d3!important;
}

 
 .pict-fb{
display: inline-block;
 }

 .pict-fb:before{
  content: "\F30C";
 content:"";
}
 
 a.social:hover {
   background:#fff;
   color:#02534f!important;
}
 */
 







 /* PAGES   ------------------------------------------------*/





/* mainpage */

.mainpageintro{
position: relative;
text-align: right;
max-width:975px;
max-width:1025px;
margin:0px 0px 40px 0px;
color: #222;
line-height: normal;
}
.mainpageintro hr{
display: none;
text-align: center;
	border: none;
    outline: none;
border-top:3px solid #00716b;
width:20px;
height:0px;
margin:30px auto 20px auto;
}

.mainpageintro i{
padding-left:5px;
font-weight: 600;
}

 .major-intro{
 display: inline-block;
vertical-align: bottom;
border-right:0px solid #3b918c;
text-align: right;
padding-right:60px;
 
 }





  .major-intro .titel{
  	font-size: 36px;
 }
  .major-intro .date{
  	font-size: 24px;
  	color: #00716b;
 }
  .major-intro a.btn{
  display: inline-block;
  height:30px;
  line-height: 30px;
  padding:0px 25px;
  color: #f5f5f5!important;
  background: #3b918c;
  margin-top:10px;
 }
.major-intro a.btn:hover{
background: #299e98!important;
}


.minor-intro{
 display: inline-block!important;
padding-left:20px;
text-align: left;
width:230px;
}
  .minor-intro .titel{
  	font-size: 24px;
 }
  .minor-intro .date{
  	font-size: 20px;
  	color: #00716b;
 }


.mainpage .label{

}

  .minor-intro a.btn{
  display: inline-block;
  height:30px;
  line-height: 30px;
  padding:0px 25px;
  color: #f5f5f5!important;
  background: #3b918c;
  margin-top:10px;
 }
.minor-intro a.btn:hover{
background: #299e98!important;
}
 

/* FESTIVAL */

.hero-img {
position:   relative;
display: block;
margin:0px;
margin-top:0px;
padding:0px;
height:700px;
 
 background-color: transparent;
 background-position: center center;
 background-repeat: no-repeat;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 


 .hero-img .caption {
color:#222;
background: rgba(255,255,255,0.5);
font-size: 13px;

position: absolute;
bottom:20px;
right:20px;
height:23px;
line-height: 23px;
width:auto;
padding:0px 5px;
}

/* programmschiene 



/* header programmschiene 
 . header {
font-weight:400;
font-size:22px;


color: #00716b;
color:#333;

line-height: 1.4;
margin:40px 0px 0px 0px;
}


.header {
font-weight:400;
font-size:18px;
text-transform: uppercase;
color: #00716b;
line-height: 1.4;
margin:40px 0px 20px 0px;
}

*/


h1.header {
font-weight:400;
font-size:22px;
color:#265f5a;
color:#00716b;
margin-bottom:20px;
}






/* programmübersicht */


/*
.programmintro .header{
display: inline-block;
color:#222;
font-size:20px;
margin:30px 0px 0px 0px;
border-bottom:5px solid #444;
padding-bottom:5px;
}
*/


.programmintro .header{
display: inline-block;
color:#00716b;
font-size:20px;
margin:30px 0px 0px 0px;
border-bottom:4px solid #00716b;
padding-bottom:5px;
}
 
.programmintro hr{
	border: none;
    outline: none;
border-top:2px solid #00716b;
width:20px;
height:0px;
}


.programm-item{
margin:0px;
padding:20px 0px 20px;
border-bottom:0px solid #ddd;
line-height:1.2;
}


.programm-item a {
text-decoration: none;
border: none!important;
}
 
		.programm-item a:visited{
		color:#222;
		text-decoration: none;
		}	
 
		.programm-item a:hover,
		.programm-item a:active{
		color:#222;
		text-decoration: none;
		}
 
 
.programm-item .date{
display: block;
font-size:15px;
color:#222!important;
margin-bottom:4px;
}


.programm-item .cie{
display: block;
font-size:17px;
color:#00716b;
font-weight:600;
}

 
.programm-item .titel{
display: block;
font-size:17px;
font-weight:600;
color:#333;
}






/* programmdetail 

.programmdetail .header{
line-height: 1.4;
 
 
 letter-spacing:2px;
font-size:26px;
font-weight: 400;

color: #0c6059;
color:#00716b;
color:#222;

 
}
 
*/
.programmdetail .header{
display: inline-block;
font-weight: 400;

margin:60px 0px 10px 0px;
padding-bottom:5px;

font-size: 28px;
color:#222;
color:#00716b;
border-bottom:5px solid #00716b;
}
.programmdetail .header:first-child{
margin-top:10px;
}


.programmdetail hr{
	border: none;
    outline: none;
border-top:2px solid #00716b;
width:100%;
height:0px;
margin:60px 0px 20px 0px;
}

.ticketBtn,
.programmdetail a.btn{
  display: inline-block;
  height:30px;
  line-height: 30px;
  padding:0px 10px;
  color: #ffffff!important;
  background: #3b918c;
  background: #31817c;
letter-spacing: 1px;
  margin-top:10px;
  margin-right:5px;

font-size: 14px;
  text-transform: uppercase;
 }


.ticketBtn:hover,
.programmdetail .btn:hover{
  background: #3b918c;
   background: #00716b;
 }



 /* HIDE TICKETBUTTON YET */
.programmdetail .ticketBtn{
 
}




h3.date-header {
	font-size:18px;
	line-height: 1.4;
	color:#444;
border-top:0px solid #ccc;
margin-top:10px;
padding-top:10px;
margin-bottom:20px;
}


.programmdetail h1{
font-weight: 600;
font-size: 22px;
color:#00716b;
}
.programmdetail h2{
font-weight: 600;
font-size: 20px;
color:#555;
}
.programmdetail h2 .sub{
color:#666;
font-weight: 400;
}

/*
border-top:5px solid #00716b;
*/


 
/* gallery
 ------------------------------------------------*/

 
.xlimitGallery .col-34 .inner{
 max-width:760px;
}



.matrix{
display: block;
margin-top:0px;
overflow: hidden;
}

.matrix .item{
	position: relative;
display: inline-block;
vertical-align: top;
padding: 0px;
margin-right:1%;
margin-bottom:1%;

width:24%;
line-height:1.1;
}


.matrix .item .caption  {
padding:5px 0px 20px 0px;
}

.matrix .item .caption .cie{
color:#31817c;
color:#265f5a;
}

.matrix .item .caption .title{
color:#333;
}

	 	

	 	
/* max-width:165px!important; */
.matrix .item  img{
display: block;
border:none;
margin:0;
padding:0;
width: 100%;
}

.matrix .item .tmb{
position: relative;
display: block;
margin:0px;
}
 

.matrix .item a{
border:none!important;
text-decoration: none;
color:#222;
}

.matrix .item.yearlabel img{
background:#a2b9b7;
background: rgba(38,95,90,0.4); /* color:#2c3c4c; */
}

.matrix .item.yearlabel .caption{
		position: absolute;
	top: 10px;
	right:10px;

		font-weight: 400;
		font-size:26px;
		line-height: 30px;
		font-style: italic;
		color:#f5f5f5;
		color:rgba(256,256,256,0.80);
}
 




/* fotogal (no caption)
 ------------------------------------------------*/

.matrix.nocaption .item .tmb{
margin:0px;
}

.matrix.nocaption .item {
margin-bottom:1%;
}

 
/* newsletter related styles */
 
input, textarea{
border:0;
margin:0;
margin-top:5px;
 
width:95%;

height:30px;
line-height: 30px;

color: #000;
background-color:#fff;
border:1px solid #eee;
 
margin-bottom:1px;



  box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}


input[type=radio], input[type=checkbox]{
	width:auto!important;
	height:auto!important;	
	
}

input.alert{
padding:0px 2px 0px 2px;
color:#E60841;
color: #000;
border:1px solid #E60841;
border-right:5px solid #E60841;
}

select.alert{
color: #fff;
background-color:#E60841;
border-color:#E60841;
}

.nlFormset span{
width:100px;

border:0;
margin:0;
text-align:left;
float:left;
padding-top:4px;
}


		.nlFormset span.minor{
		color:#999;
			}	


/*
input.btnSubmit{
	
	border:0;
	border:none;

	text-align:left;


	font: normal 11px verdana, arial, helvetica, sans-serif;
		color: #E60841;
		background-color:#fff;
		width:auto;
}
input.btnSubmit:hover{
		color: #fff;
	background-color:#333;
}


#36817b
#3b5452
*/

.btnSubmit{
color:#fff;
background: #3b918c;
 height:28px;
 line-height: 28px;
 width: 150px;

 
font-weight: normal;
font-size: 14px;
 
border: none!important;
 
display: inline-block;
text-align: center;
vertical-align: middle;
}


 
.btnSubmit.on,
.btnSubmit:hover{
 
color:#fff;
background: #299e98!important;
}

 

/*
 .ticketBtn{
background: #31817c;
color:#fff!important;
 
margin:10px 0px;
padding:4px 10px 6px 10px;
font-weight: normal;
font-size: 13px;
 
border: none!important;



-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;

-webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);

width:auto;
display: inline-block;
text-align: center;
vertical-align: middle;
}

*/


.alertbox{
	margin-top:20px;
padding:8px;
color:#E60841;
border:1px solid #E60841;
max-width:600px;
}


.nlPubliclists{
margin-top:20px;

}

.nlPubliclists input{
float:left;
}
.nlPubliclists .descr{
margin-left:30px;
margin-bottom:10px;
width:400px;
}
.nlPubliclists .header{
font-weight:bold;
margin-bottom:10px;

font-size:22px;
line-height: 1.1;
}				







 /* ELEMENTS   ------------------------------------------------*/


/* articles */

.article {
position: relative;
margin-bottom:0px;
line-height:1.4;
}
.mainpage .article {
margin-bottom:30px;
}
 
.article .tmb{
}
.article .tmb img{
width:100%;
max-width:260px;
max-width:340px;
max-width:375px;
margin:0px;
}





.article .imgwrap a,
.article .tmb a,
.article .tmb a img{
	padding:0;
	margin:0;
	border:0!important;
}

.article .tmb + h2,
.article .tmb + h3{
margin-top:15px;
}

/*
.article h2{
font-size:16px;
font-weight: 600;
margin-bottom:5px;
color: #00716b;
}
*/
  .article h2{
font-size:18px;
font-weight: 400;
margin-bottom:5px;
color: #00716b;
}

.gallery .article h2{
font-size:22px;
font-weight: 400;
margin-bottom:5px;
color: #00716b;
}
 

.article h3{
font-size:15px;
margin-bottom:5px;
}


.article:first-child {
padding-top:0;
}

.article:last-child {
border-bottom:none;
}


.article p{
margin-bottom:0px;
}


.article p > a.btnMore{
 
}


/* button more 
 #1abb9c;
#17a78b;

-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;





a.btnMore{
color: #fff;
background: #c4c42b;
  background:#aaa;
   background: #31817c;
 background:#7b8d8a;
 
margin:10px 0px;
padding:4px 10px 6px 10px;
font-weight: normal;
font-size: 13px;
 
border: none!important;



-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;

-webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);


display: inline-block;
text-align: center;
vertical-align: middle;
}


a.btnMore.low{
 background:#7b8d8a;
}


a.btnMore:hover{
background: #31817c;
color:#fff;
}


 h1 + a.btnMore{
 }
 */





/*
streaming button
*/
.streamBtn{
  display: inline-block;

  padding:10px;

   border: 1px solid #a3d1ce!important;
   border:none!important;
     border-radius:5px;

color:#00716b!important;
 background:#b3d5d3;

 
font-weight: normal;
font-size:28px;

 text-decoration: none;
 
 }

 .streamBtn.offline{
 font-size:20px;
 color:#bd0232!important;
color:#00716b!important;

background:#eee; 
 }

 .streamBtn.offline .playbtnsvg path{
 fill: #00716b;
 fill: #aaa;
}


.streamBtn .small{
	font-size:15px;
	display: block;
	margin-top:10px;
}

 
a.streamBtn:hover {
   background: #00716b;
     background: #3b918c;
   color:#ffffff!important;
 }

 
.playbtnsvg  {
width:50px;
display: inline-block;
margin-right:10px;
vertical-align: middle;
}

.playbtnsvg path{
 fill: #00716b;
}
 
 
a.streamBtn:hover .playbtnsvg path{
fill: #fff;
}



/* small streamin button mainpage article
background: transparent;
text-align: center;
*/
.article .streamBtn{
	font-size:18px;
	display:  block;
}
 

  
.article .playbtnsvg  {
width:35px;
display: inline-block;
margin-right:10px;
vertical-align: middle;
}



/*
responsive video
- responsive iframe content (statt jquery fitvids)
*/
.vplayer,
.plyr {
margin-top:0px;
margin-bottom:20px;
}
.vplayer .mejs-mediaelement{
}


.xternalvplayer {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}


.xternalvplayer iframe,
.xternalvplayer object,
.xternalvplayer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*
wraperelement audioplayer
*/
.audioplayer{
margin:0px;
padding:0;
}


/* csstricks for medialements
always shows video within 16:9 container;

.mejs-container {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}
*/

 



/* stretches selfhosted video (mediaelements) to 100% of container 
note: not working if ration not 16:9 > shifts size on startup

video {
max-width:100%;
height: auto !important;
}
*/


video {
max-width:100%;
height: auto !important;
}





/* RESPONSIVE *********************************************/

/* ------------------------------------------------ 
responsive
*/





@media only screen and (max-width:1100px) {
.extrabreit .col-main,
.col-main{
margin-left:130px;
}


.col-left{
width: 100%;
}
 
.col-right{
margin-left:130px;
}

.col-right.offset{
margin-left:130px;
}

.hero-img {
height:600px;
}

}

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

.extrabreit .col-main,
.col-main{ 
margin:0px auto;
}

}


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

.col-sm-offset-00 {
margin-left:0%;
}
.col-sm-14 {
width:25%;
}
.col-sm-24 {
width:50%;
}
.col-sm-34 {
width:75%;
}
.col-sm-44 {
width:100%;
}


.col-sm-13 {
width:33%;
}
.col-sm-23 {
width:66%;
}

/*
.showtop{
display:none;
}
.showbottom{
display:block;
}
*/
}








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

 
.container-wraper{
clear:both;
padding:0px 20px;
}


.hero-img {
height:500px;
}

}



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

.matrix .item{
margin-right:1%;
width:32%;
}

}



/* mobile hamburger nav */
@media only screen and (max-width:630px) {

 
.col-main{ 
padding:0px;
}

 .hero-img {
height:400px;
}
 

 #logo {
position:absolute;
top:15px;
left:0px;
z-index: 998;
}
			#logo a{
				display:block;
	height:82px;
	width: 235px;
text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 background: #fff url('../_media/sys_pics/tanzist-logomint-560.png') no-repeat;
  background-size: 235px 82px;
		}

#mainlogo-wrap{
	display: none;
}

.mainpage #logo{
	display: block;
}



#header,
.mainpage #header {
position: relative;
height: 100px;
background:#ffffff;
margin-bottom:10px;
}
 
 /*
 width: 101%;
position: absolute;
top:-170px;
left:-5px;
z-index: 99;
height:280px;
margin-top:0px;
*/
 
#diagonal,
.mainpage #diagonal{
top:-170px;
margin-top:0px;
height: 300px;
width:100%;
position: absolute;
}

.mainpage #diagonal .rotate{
height:280px;
}

.mainpageintro{
margin:40px 0px 0px 0px;
}




#nav{
  display: none;
}

 
 #mobilenav-open,
#mobilenav-wraper{
display:block;
}


a.nlsubscribe{
padding:0px 10px;
 width:auto;
}
}



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



.col-xm-14,
.col-xm-24,
.col-xm-34{
width:100%;
}

.article{
 max-width:400px;
margin: 0px auto 50px;
}
/*
.article .tmb {
text-align: center;
}
.article .tmb img{
	display: inline-block;
}
*/


.mainpage .label{
	text-align: center;
}

 
 
.mainpageintro hr{
display:block;
}
.major-intro,
.minor-intro{
 display: block;
 width: 100%;
 text-align:center;
padding:0px;
border: none;
}


 }




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

.matrix .item{
margin:1%;
width:48%;
}



 

}




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

.container-wraper{
clear:both;
padding:0px 10px;
}


#footer a.nlsubscribe{
padding:0px 10px;
 width:auto;
}
 
}