/*       tw-screen-160317        */




/*   ALT  */

body {
font-family: 'Open Sans',Tahoma,Helvetica,sans-serif;

  line-height: 1.429;
  margin: 0px;

  text-align: left;
  background:black;
}


 html, body#white{

  	margin: 0px;
	padding: 0px;
	height: 100%;background-color:white;

}





/*   NEU  */































.thumb img a {

  /*	max-width:1100px;*/    /* Maximale-Breite > Fix */
	width:200px;
    height: auto;
    -webkit-transition: width .75s ease-out; /* animate the width */
    border: 3px solid red;

}






/*   Anderes  */

.wrapper {        /* Hauptcontainer schwarz */

  /*	max-width:1100px;*/    /* Maximale-Breite > Fix */
	width:950px;    /* Feste Breite für Demo  */
    -webkit-transition: width .75s ease-out; /* animate the width */
    padding-right:0;
    padding-left:0;
	margin:0px auto;/*Mittig!!!*/
    background:none;

}

  .yepp {        /* ganze hoehe */

min-height: 100%;
height:auto !important;
background-color: green;
height: 100%;


}



.wrapper_w {        /* Hauptcontainer weiss */

min-height: 100%;
height: auto !important;
background-color: white;
height: 100%;

	width:950px;

    position: relative;
    -webkit-transition: width .75s ease-out; /* animate the width */
    padding-right:0;
    padding-left:0;
	margin:0px auto;/*Mittig!!!*/

}



#wrapper2 {         /* Hauptcontainer 100 perc. weiss */

min-height: 100%;
height: auto !important;
background-color: #ECE2C6;
height: 100%;

	width:650px;    /* Feste Breite für Demo  */
    position: relative;
    -webkit-transition: width .75s ease-out; /* animate the width */
    padding-right:0;
    padding-left:0;
	margin:0px auto;/*Mittig!!!*/
    /*border: 4px solid grey;  */

}




 /***************************  Startseite aus tw02.css ************************************************/




#box_left{ /*  */
width:50%;
height:2000px;
background: #FFFFFF;

float:left; /* !!!!!! (wird sonst nicht aufgefüllt!!!!!*/
position:relative; /* !!! */
}


#box_right{ /*  */
width:50%;
height:2000px;
background: #000000;

float:left; /* !!!!!! (wird sonst nicht aufgefüllt!!!!!*/
position:relative; /* !!! */
}


 #box_w { /* weiss */

width: auto;
height: 99px;
margin:80px 0px 0px 33px;
text-align:left;
clear:both;
 position: relative;

}

 #box_w img{ /* weiss */

width: auto;
height: auto;


}


#box_t{ /* tommy */

width: auto;
height: 200px;
margin:80px 20px 0px 0px;
text-align:right;
position: relative;

}


#box_t img{ /* tommy */

width: auto;
height: auto;


}


#box_eye{ /* Auge */

width: auto;
height: 200px;
padding:70px 20px 0px 0px;
text-align:right;
position:relative;

}

#box_ear{ /* ohr */
border:7px solid red;
width: auto;
height: 200px;
margin:190px 0px 0px 35px;
text-align:left;
position:relative;
}




#box_nav_float{ /* Mini-Navigation */
	WIDTH: auto;
	height: 40px;
	margin:4px 0px 0px 5px;
	text-align:left;
	position:fixed;
	z-index:11;
	left: 2px;
	top: 1px;


}


#pageContainer{
width:100%;
padding:0px 0px 0px 0px;/
height:auto;
margin:0px auto;
text-align:center;
float:left;
position:relative; }



#box_nav{ /* mini-navi */
	Z-INDEX: 8;
	LEFT: 10px;
	WIDTH: 150px;
	POSITION: absolute;
	Bottom: 10px;
	HEIGHT: 15px;
	visibility: visible;
	text-align:left;
}



.achtpt a{/* arrow */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	color: #999999;
	text-align:left;
	line-height:10pt;
	}




img #box_eye, #box_ear{
  border: none;
}








/***************************  // Startseite ************************************************/


.box_flash_01 {
 background: yellow;
 border: 4px solid blue;
}


#box_samples{

width: 300px;
height:400px;
margin-left:36%;
text-align:center;
clear:both;



}


 /***************************  Aus tw.css ************************************************/

#box_infotext{

width: auto;
height:200px;
margin:19px 0px 0px 22px;
text-align:center;
clear:both;


}



	.arrow_design {/* import: skill-index arrow */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:1.2em;
	color: #999999;
	display:block;
	clear:both;
	width:auto;
	padding:0px 0px 5px 12px;
	text-align:left;
	line-height:13pt;

    	background:  url(images/arrow_01_w2.gif) no-repeat 0px 5px;


	}

	.arrow_design a {

	text-decoration:none;
	}

	.arrow_design a:hover {
	text-decoration:underline;
	color:red;
   /* background:  url(images/arrow_02_w2.gif) no-repeat 0px 5px;*/


	}






/* =========================== ========= Headings ========  =========================== */

p {
  margin:0;
}
/* 22px */

h2 {
  font-size: 1.571em;
}
/* 22px */



h3 {
/*  font-size: 1.429em;*/
  font-size: 1.571em;
}
/* 20px */

h4 {
  font-size: 1.286em;
}
/* 18px */

h5 {
  font-size: 1.143em;
}
/* 16px */

h6 {
  font-size: 1em;
}
/* 14px */

h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: .8em;
}
/* =========================== ======= Anchor style ======  =========================== */

a {
  outline: 0; text-decoration: none;
}

a img {
  border: 0px;
  text-decoration: none;
}

a:link, a:visited {


  text-decoration: none;
}

a:hover, a:active {

  text-decoration: none;
}






/*  #############################################
Navicon-Test
 ################################################  */


#navicon{
background:yellow;
display:block;
width:77px;
height:44px;
position: absolute;
top: 55px;
left: 5px;}





/*  #############################################
Auge Ohr 2015
 ################################################  */


header{

  background:none;
  height: auto;
  text-align:center;}


header img{
    margin-top:16px;
max-width:100%; height:auto;}


  nav{
	  background: skyblue;
      display: none;
	}

      nav ul li{
	  background: red;
      float:left;
      display:block;
      padding-left:54px;
	}

       nav ul {
	  background: green;
      display:block;
      padding-left:0px;
	}


	footer{

      font-size:0.5em;
      color: #777777;
      background:none;
      text-align:center;
      margin-top:20px;
	}




.copyright{

      font-size:0.8em;
      color: #777777;
      background:none;
      text-align:center;
      margin-top:0px;
	}





	.wupp{

font-family: 'Open Sans',Tahoma,Helvetica,sans-serif;
	font-size:1em;
	color: #999999;
	display:block;
    margin-left:30%;
    margin-right:30%;

	clear:both;
	width:40%;
	padding:0px 0px 5px 12px;
	text-align:left;
	line-height:13pt;
	background:none;
	}


	.datenschutz{

font-family: 'Open Sans',Tahoma,Helvetica,sans-serif;
	font-size:1em;
	color: #999999;
	display:block;
    margin-left:20%;
    margin-right:20%;

	clear:both;
	width:60%;
	padding:0px 0px 5px 12px;
	text-align:left;
	line-height:13pt;
	background:none;
	}

 	.datenschutz p strong{

    display:block;
    margin-top:20px;
    margin-bottom:5px;

	}





/*  #############################################
Termin
 ################################################  */

 .termin {
margin-top:10px;
display:block;
height:auto;
width:100%;
background:black;
padding:3px;

position:relative;
}



/*Piano-Home > Nav bottom  */

.footerbox {
margin-top:10px;
display:block;
height:144px;
width:100%;
}

.footerbox ul{
display:block;
width:350px;
margin:0px auto;
}


.footerbox ul li{
display:block;
float:left;
padding-left:8px;
}


.footerbox  a:link, a:visited {
display:block;
font-size:0.8em;
color:#777777;
}








	main{

	}



	article{

	}


	section{

	}


	aside{
	  border: 2px solid tomato;
      display:none;
	}



/*  Inhaltsboxen*/



.kw_left{
	  width:50%;
      padding: 32px 0px 0px 0px;
      float:left;
	  background:black;
      text-align:center;
}


.kw_right{
  	  background:black;
	  width:48%;
      padding: 8px 0px 0px 0px;
      float:right;
      text-align:center;
      position:relative; /* wichtig für Linkbox absolute!*/
}

.kw_right img{
	  width:100%;
}

.kw_right a{
text-decoration:none;
color:#AEAFB2;
transition:all 0.1s ease;
font-size: 0.9em;
}

.kw_right a:hover{

color: #DEBA7C;
transition:all 0.5s ease;
font-size: 1.3em;
}
 /*Rechter Block mit integriertem Link in absoluter Positionierung.
Wichtig: Das ABSOLUTE-Objekt bleibt nur im umgebenden Objekt, wenn dieses RELATIVE positioniert ist!*/

.linkbox{
text-decoration:none;
background:none;
position:absolute;right:25px;bottom:20px;
z-index:3;
display:block;

}


.livehoeren {
  display:block;
  position: absolute;
  right:25px;
  top:0px;
  background:yellow;

width:165px;
height:auto;

}




.bpic2  {
clear:both;
background:none;
display:block;
padding-top:10px;
padding-bottom:15px;
text-align:center;
margin:0px auto;
height:auto;
width:100%;
overflow: hidden;
}





.bpic2 img{
width:100%;
height:auto;

}


.bpic_video  {
clear:both;
background:none;
display:block;
padding-top:10px;
padding-bottom:15px;
text-align:center;
margin:0px auto;
height:auto;
width:100%;
overflow: hidden;
border: none;
}





.bpic_video img{
width:100%;
height:auto;

}






.bpic  {
clear:both;
background:none;
display:block;
padding-top:10px;
padding-bottom:15px;
text-align:center;
margin:0px auto;
height:auto;
width:100%;
overflow: hidden;
}





.bpic img{
width:100%;
height:auto;

}


.bpic_2 img{
width:100%;
height:auto;
}

  .bpic_softline   {

  margin:0px auto;
height:auto;
width:90%;
overflow: hidden;

border: none;

}


 .bpic_softline img  {

border: none;
width:80%;
height:2px;
}



  .bpic_softline_vid_a   {

  margin:0px auto;
    margin-bottom:-8px;
height:auto;
width:90%;
overflow: visible;



}

  .bpic_softline_vid_b   {

  margin:0px auto;
    margin-top:-19px;
height:auto;
width:90%;
overflow: visible;



}


 .bpic_softline_vid_a img,  .bpic_softline_vid_b img  {


width:80%;
height:2px;
margin-left:-33px;


}







 .logo img  {

border:none;
max-width:90%;
 /*visibility: hidden;*/
}





video   {
clear:both;
background:none;
display:block;
padding-top:0px;
padding-bottom:0px;
text-align:center;
margin:0px auto;

height:auto;
width:100%;
overflow: hidden;
background: none;
}





.clear{ display:block; clear:both;}

.clear img{ display:block; margin:0px auto;}


.tp_nbo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    color: #aeafb2;
    line-height: 23px; }


.tp_nbo_light {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    font-weight:  100;
    color: #aeafb2;
    line-height: 23px; }




.tp_nbo  a:link, a:visited {
color:#AEAFB2;
transition:all 0.2s ease;
}

.tp_nbo  a:hover {
color: #DEBA7C;
font-size:130%;
transition:all 0.5s ease;
}

.tp_nbo2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    font-weight: bold;
    color: #DEBA7C;
    line-height: 30px;
}

/*Zurück-Links    */


.back{
text-decoration:none;
background:none;
position:absolute;left:25px;top:22px;
z-index:1;
display:block;

}

.back  a {
background: url(tw_img/pfeil_links_2_fre_w2.gif) no-repeat 0px 7px;
padding-left:14px;
font-size:0.8em;
}


.back  a:hover {
color: #DEBA7C;
transition:all 0.5s ease;
text-decoration: underline;
}

.back  a:link, a:visited {
color:#AEAFB2;
transition:all 0.2s ease;
}


/*Top-Links    */



.topbox{

font-size: 1.2em;
background: url(tw_img/line_geyblack.gif) no-repeat 0px 7px;
display:block;
width:100%;
clear:both;
padding-top:22px;
text-align:center;

}

.topbox img{
width:100%;
height:auto;
margin:0px auto;

}




.top{
text-decoration:none;
display:block;
width:90px;

margin:0px auto;/*Mittig!!!*/

}

.top  a {
background: url(tw_img/pfeil_top_2_fre_w2.gif) no-repeat 0px 7px;
padding-left:14px;
font-size:0.8em;

}


.top a:link, a:visited {
color:#AEAFB2;


}


.top  a:hover {
color: #DEBA7C;
transition:all 0.5s ease;
text-decoration: underline;
}



/*B-Nav    */



.b-nav{


position: absolute;
bottom: 0px;
right: 0;
color: #696969;
font-size:0.8em;
background: none;
display:block;
width:100%;
clear:both;
padding-top:22px;
text-align:center;
margin:0px auto;/*Mittig!!!*/


}

.b-nav img{
    display:block;

width:auto;
height:auto;
margin:5px auto;

}


.b-nav  a {
background: none;
padding:0px 7px 0px 4px;

}


.b-nav a:link, a:visited {
color:#707070;


}


.b-nav  a:hover {
color: #DEBA7C;
transition:all 0.5s ease;
text-decoration: none;
}



 /*B-Nav Design    */



.b-nav_design{

position: absolute;
bottom: 0px;
right: 0;
color: #696969;
font-size:0.8em;
background: none;
color: #696969;
/*margin-top:300px; */
font-size:0.9em;
display:block;
height:auto;
width:100%;
clear:both;
padding-top:0px;
text-align:center;
margin:0px auto;/*Mittig!!!*/

}

.b-nav_design img{
    display:block;

width:auto;
height:auto;
margin:5px auto;

}


.b-nav_design  a {
background: none;
padding:0px 7px 0px 4px;

}


.b-nav_design a:link, a:visited {
color:#707070;


}


.b-nav_design  a:hover {
color: red;
transition:all 0.5s ease;
text-decoration: none;
}






/*T-Nav    */



.t-nav{

color: #777777;
background: none;
display:block;
width:100%;
clear:both;
padding-top:12px;
text-align:center;
margin:0px auto;/*Mittig!!!*/
margin-bottom: -5px;
font-size:0.8em;



}

.t-nav img{
    display:block;

width:650px;
height:auto;
margin:5px auto;
 opacity: 0.5;

}


.t-nav a:link, a:visited {
background: none;
padding:0px 7px 0px 16px;

color:#707070;
 text-transform:  uppercase;
  letter-spacing:  0.4em;

}





.t-nav  a:hover {
color: #DEBA7C;
transition:all 0.5s ease;
text-decoration: none;
}





/*T-Nav    */



.t-nav_design{

color: #777777;
background: none;
display:block;
width:100%;
clear:both;
padding-top:12px;
text-align:center;
margin:0px auto;/*Mittig!!!*/
margin-bottom: -5px;
font-size:1.0em;



}

.t-nav_design img{
    display:block;

width:650px;
height:auto;
margin:5px auto;
 opacity: 0.5;

}


.t-nav_design a:link, a:visited {
background: none;
padding:0px 7px 0px 16px;

color:#777777;
 text-transform:  uppercase;
  letter-spacing:  0.4em;

}





.t-nav_design  a:hover {
color: red;
transition:all 0.5s ease;
text-decoration: none;
}



/************** Softline ********************/




.softline  {
background:green;
display:block;
padding-top:10px;
text-align:center;
margin:0px auto;
height:auto;
width:100%;
 border:  4px solid red;
}



.divider  {
clear:both;
background:none;
display:block;
padding-top:0px;
padding-bottom:15px;
text-align:center;
margin:0px auto;
height:20px;
width:100%;
 border: none;
 overflow: hidden;
}

.divider img {

height:auto;
width:100%;
position: relative;
}




/************** Tabellen ********************/


 /* Tabellen-Container */

.tab  {
background:none;
display:block;
padding-top:45px;
text-align:center;
margin:0px auto;
height:auto;
width:95%;
}





.tabhead {
    color: #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;
     text-align: left;
  /*   border-bottom:1px solid #CCCCCC;  */
     padding-bottom:4px;
     margin-bottom:22px;
}



.tabhead2 {
    color: #CCCCCC;
    font-stretch:condensed;
font-family: 'Source Sans Pro', sans-serif;
/* font-family: 'Open Sans Condensed', sans-serif;*/
 font-weight:300;
    font-size: 1.1em;
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.5em;
          display:block;
          height: 33px;
     padding:0px 0px 0px 0px;
     margin-bottom:15px;
  /*   background:   url(img/softline.gif) no-repeat 0px 30px;
     background-position:  center 30px;       */
}




.tab a {
    color: #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
     text-align: left;
}


.tab table  {
  display:block;
  width:70%;
  height:auto;
background:none;
margin:0px auto;

}



.tab table img {
max-width:100%;
height:auto;
}


.pian_03 {
    color: #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    text-align: left;
    display:block;
    padding:0px 100px;
}





/*Keine Tabellen in Presse*/

.presse {

width:800px;

position:relative;

}

.presse img {
  text-align:center;
 max-width:100%;
 height:auto;
  float:none;
 display:block;
margin:0px auto;
 padding:0px 12px 22px 0px;

}


/*Home-Piano*/



.box_audio {
 width:100%;
 text-align:center;
}




/*###################################################################################################################
#####################################################################################################################
#####################################################################################################################
Media Queries 1
#####################################################################################################################
#####################################################################################################################
##################################################################################################################### */


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




 html, body#white{

 background-color:green;

}




 #box_samples{


margin-left:30%;


}



 .tp_nbo2 {



}





body {



}

 .wrapper {

	max-width:100%;
    -webkit-transition: width .75s ease-out; /* animate the width */
}


 .wrapper_w {

	max-width:100%;
    background: white;
    -webkit-transition: width .75s ease-out; /* animate the width */
}




.tab table  {

  width:100%;


}


.kw_left{

      padding: 22px 0px 0px 0px;
}




.kw_right{
      padding: 43px 0px 0px 0px;
}

.footerbox{

height:110px;
}

.footerbox img {

width:100%;
}




.presse {

width:100%;


}


.bpic img {
width:160%;
height:auto;
margin-left:-30%;


}



.bpic2 img {
width:160%;
height:auto;
margin-left:-30%;


}



 } /*sauwichtige klammer!*/




/*###################################################################################################################
#####################################################################################################################
#####################################################################################################################
Media Queries 2
#####################################################################################################################
#####################################################################################################################
##################################################################################################################### */


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


/*  #############################################
xxxxxxxxxxxxxxxxxxxxxxxxxx
 ################################################  */



  html, body#white{

 background-color: none;
 width:100%;
 border: none;

}




 .wrapper_w {
   border:none;
    background:white;
   width:100%;
   max-width:100%;


}



#box_t img{
top:114px;
position:absolute;
left:25px;
width: 86%;
height: auto;
}


 #box_w img{

position:absolute;
top:110px;
left:-20px;
width: 75%;
height: auto;
border:none;
}




#box_eye img{ /* Auge */
position:absolute;
top:0px;
left:25px;
width: 75%;
height: auto;

}

#box_ear img{ /* ohr */

position:absolute;
top:-80px;
left:-20px;
width: 100%;
height: auto;

}




















.b-nav_design{

position: relative;
bottom: 0px;
right: 0;
color: #696969;
font-size:0.8em;
background: none;
color: #696969;
/*margin-top:300px; */
font-size:0.9em;
display:block;
height:auto;
width:auto;
clear:both;
padding-top:0px;
text-align:center;
margin:0px auto;/*Mittig!!!*/

}

.b-nav_design img{


width:80%;


}


.b-nav_design  a {
background: none;


}


.b-nav_design a:link, a:visited {



}


























 	.datenschutz{

    width:90%;
    margin-left:5%;
    margin-right:5%;

	}









 	.wupp{

    width:60%;
    margin-left:20%;
    margin-right:20%;

	}









 	.arrow {/* import: skill-index arrow */

	font-size:1.2em;
    	line-height:12pt;
	color: #999999;

	}




 #box_samples{


margin-left:22%;


}





 .tp_nbo {

 display: block;
 width:96%

}



body {

}





.back{
position:absolute;left:5px;top:2px;
font-size:80%;
}

.back  a {
background: url(tw_img/pfeil_links_2_fre_w2.gif) no-repeat 0px 5px;
padding-left:9px;
}


.kw_left{
	  width:100%;
      padding: 0px;
      float:left;
	  background:black;
      text-align:center;
}


.kw_right{
	  width:100%;
      padding: 0px;
      float:right;
      text-align:center;
      position:relative; /* wichtig für Linkbox absolute!*/
}


.bpic img{
margin-top:30px;
margin-bottom:19px;
transition:all 0.7s ease;


}




.bpic2 img {
margin-top:30px;
margin-bottom:19px;
transition:all 0.7s ease;


}


/*Piano-Home MQ 500 */


.footerbox{

margin-left:-15px;
transition:all 0.7s ease;
}

.footerbox ul{
width:auto;

}



.footerbox ul li{
display:block;
float:left;
padding-left:3px;
}

 .pian_03 {

    padding:0px 0px;
}



.t-nav{

color:  #777777;
font-size:0.7em;




}


.t-nav a:link, a:visited {


color:#AEAFB2;
letter-spacing:  0.2em;
padding:0px 2px 0px 10px;

}



.t-nav_design{


}




.t-nav_design a:link, a:visited {
background: none;
padding:0px 2px 0px 10px;
font-size:0.8em;
  letter-spacing:  0.2em;

}




.t-nav img{
    display:block;

width:100%;
height:auto;
margin:5px auto;
 opacity: 0.5;

}



.b-nav{

color:  #696969;

font-size:0.9em;



}




.bpic  {
clear:both;
background:none;
display:block;
padding-top:0px;
padding-bottom:0px;
text-align:center;
margin-bottom:-40px;
margin-top:-40px;
height:auto;
width:100%;
overflow: hidden;
}



.bpic img {
width:180%;
height:auto;
margin-left:-40%;



}



.divider img {

height:auto;
width:190%;
margin-left:-50%;
}
































 } /*sauwichtige klammer!*/






 /*###################################################################################################################
#####################################################################################################################
#####################################################################################################################
Media Queries 2
#####################################################################################################################
#####################################################################################################################
##################################################################################################################### */


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


/*  #############################################
xxxxxxxxxxxxxxxxxxxxxxxxxx
 ################################################  */






 } /*sauwichtige klammer!*/