@charset "utf-8";
/* CSS Document */

/* Fonts -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
h1 { font-size: 22px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h2 { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333333; margin: 0px }
h3 { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h4 { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin: 0px }
h5 { font-size: 20px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h6 { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #555555; margin: 0px }
h7 { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #aaaaaa; margin: 0px }

tbfont1 { font-size:14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin:0px }
tbfont2 { font-size:16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #666666; margin:0px }
strong { font-weight:700 }

#nav1 a { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000; margin: 0px; text-decoration: none; text-underline: none }
#nav1 a:hover { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-decoration: none; text-underline: none }
#nav1 a:active { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000; margin: 0px; text-decoration: none; text-underline: none }
#nav2 a { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #444; margin: 0px; text-decoration: none; text-underline: none }
#nav2 a:hover { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-decoration: none; text-underline: none }
#nav2 a:active { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #444; margin: 0px; text-decoration: none; text-underline: none }
#nav3 a { font-size: 28px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }
#nav3 a:hover { font-size: 28px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-shadow: 1px 1px 2px #222; text-decoration: none; text-underline: none }
#nav3 a:active { font-size: 28px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }
#nav4 a { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888; margin: 0px; text-decoration: none; text-underline: none }
#nav4 a:hover { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-decoration: none; text-underline: none }
#nav4 a:active { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888; margin: 0px; text-decoration: none; text-underline: none }

.footnav1 a { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #999; margin: 0px}
.footnav1 a:hover { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px}
.footnav1 a:active { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #999; margin: 0px}
.footnav2 a { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333; margin: 0px}
.footnav2 a:hover { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px}
.footnav2 a:active { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333; margin: 0px}

li_foot { list-style-type:none; text-decoration:none; line-height: 1.3; }

/* Foot Menü ------------------------------------------------------------------- */
.btn_home { background: url('../menu/home1b.png') bottom }
.btn_home:hover { background-position: 0 0 } 
.btn_home:active { background-position: 0 center }  

.btn_email1 { background: url('../menu/email1b.png') bottom }
.btn_email1:hover { background-position: 0 0 } 
.btn_email1:active { background-position: 0 center } 

.btn_login { background: url('../menu/login1b.png') bottom }
.btn_login:hover { background-position: 0 0 } 
.btn_login:active { background-position: 0 center } 

.btn_fbook { background: url('../menu/fbook1b.png') bottom }
.btn_fbook:hover { background-position: 0 0 } 
.btn_fbook:active { background-position: 0 center } 

.btn_gplus { background: url('../menu/gplus1b.png') bottom}
.btn_gplus:hover { background-position: 0 0 } 
.btn_gplus:active { background-position: 0 center } 

.btn_twitter { background: url('../menu/twitter1b.png') bottom}
.btn_twitter:hover { background-position: 0 0 } 
.btn_twitter:active { background-position: 0 center } 

.btn_youtube { background: url('../menu/youtube1b.png') bottom}
.btn_youtube:hover { background-position: 0 0 } 
.btn_youtube:active { background-position: 0 center } 

.btn_in { background: url('../menu/in1b.png') bottom}
.btn_in:hover { background-position: 0 0 } 
.btn_in:active { background-position: 0 center } 

.btn_xing { background: url('../menu/xing1b.png') bottom}
.btn_xing:hover { background-position: 0 0 } 
.btn_xing:active { background-position: 0 center } 

.btn_scloud { background: url('../menu/scloud1b.png') bottom}
.btn_scloud:hover { background-position: 0 0 } 
.btn_scloud:active { background-position: 0 center } 

.btn_deezer { background: url('../menu/deezer1b.png') bottom}
.btn_deezer:hover { background-position: 0 0 } 
.btn_deezer:active { background-position: 0 center } 

.btn_spotifly { background: url('../menu/spotifly1b.png') bottom}
.btn_spotifly:hover { background-position: 0 0 } 
.btn_spotifly:active { background-position: 0 center } 

.btn_amazon { background: url('../menu/amazon1b.png') bottom}
.btn_amazon:hover { background-position: 0 0 } 
.btn_amazon:active { background-position: 0 center } 

.btn_itunes { background: url('../menu/itunes1b.png') bottom}
.btn_itunes:hover { background-position: 0 0 } 
.btn_itunes:active { background-position: 0 center } 

.btn_gplay { background: url('../menu/gplay1b.png') bottom}
.btn_gplay:hover { background-position: 0 0 } 
.btn_gplay:active { background-position: 0 center } 

.btn_pmusic { background: url('../menu/pm1b.png') bottom}
.btn_pmusic:hover { background-position: 0 0 } 
.btn_pmusic:active { background-position: 0 center } 

.btn_neptun { background: url('../menu/neptun1b.png') bottom}
.btn_neptun:hover { background-position: 0 0 } 
.btn_neptun:active { background-position: 0 center } 

.btn_insta { background: url('../menu/insta1b.png') bottom}
.btn_insta:hover { background-position: 0 0 } 
.btn_insta:active { background-position: 0 center } 

.btn_tel1 { background: url('../menu/telefon1b.png') bottom;
 position:relative; display:none; width:60px; height:60px; background-size:60px; margin:0 auto}
.btn_tel1:hover { background-position: 0 0 } 
.btn_tel1:active { background-position: 0 center } 


.btn_anker { top:0px; left:0px; background: url('../menu/anker1b.png') bottom}
.btn_anker:hover { background-position: 0 0 } 
.btn_anker:active { background-position: 0 center }

.btn_size,.btn_home,.btn_email1,.btn_login,.btn_fbook,.btn_gplus,.btn_twitter,.btn_youtube,.btn_in,.btn_xing,.btn_scloud,.btn_deezer,.btn_spotifly,.btn_amazon,.btn_itunes,.btn_gplay,.btn_pmusic,.btn_anker,.btn_neptun,.btn_insta{
 position: relative;
 display: block;
 width: 60px; height: 60px;
 background-size:60px; margin:0 auto }

.fb-box1{ position:absolute; width:360px; height:180px; left:20px }
.fb-box2{ position:absolute; right:20px }
.fl-box1{ position:absolute; left:520px }
.fl-box2{ position:absolute; left:700px }

.webdesign{ position:absolute; bottom:10px; left:520px }

/* Musik Menü ------------------------------------------------------------------- */

.btn_backto1 { display: block; width: 360px; height: 100px; background: url('../menu/backto1a.png') bottom; background-size:360px; margin:0 auto }
.btn_backto1:hover { background-position: 0 center } 
.btn_backto1:active { background-position: 0 0 }
.btn_backto2 { display: block; width: 360px; height: 100px; background: url('../menu/backto2a.png') bottom; background-size:360px; margin:0 auto }
.btn_backto2:hover { background-position: 0 center } 
.btn_backto2:active { background-position: 0 0 }

.btn_youtube2 { display: block; width: 360px; height: 100px; background: url('../menu/youtube2b.png') bottom; background-size:360px; margin:0 auto }
.btn_youtube2:hover { background-position: 0 center } 
.btn_youtube2:active { background-position: 0 0 }

.btn_youtube3 { display: block; width: 480px; height: 100px; background: url('../menu/youtube3a.png') bottom; background-size:480px; margin:0 auto }
.btn_youtube3:hover { background-position: 0 center } 
.btn_youtube3:active { background-position: 0 0 }


dd { position:relative; display:none; text-align:center; margin:0px auto;}
titlebox { position:relative; text-align:center; margin:0px auto; }

.btn_amazon2a { background: url('../menu/amazon1a.png') top }
.btn_amazon2a:hover { background-position: 0 center } 
.btn_amazon2a:active { background-position: 0 bottom } 
.btn_amazon2b { background: url('../menu/amazon2a.png') top }
.btn_amazon2b:hover { background-position: 0 center } 
.btn_amazon2b:active { background-position: 0 bottom }  
.btn_itunes2 { background: url('../menu/itunes1a.png') top }
.btn_itunes2:hover { background-position: 0 center } 
.btn_itunes2:active { background-position: 0 bottom } 
.btn_google2 { background: url('../menu/google1a.png') top }
.btn_google2:hover { background-position: 0 center } 
.btn_google2:active { background-position: 0 bottom } 
.btn_play2 { background: url('../menu/play2a.png') top }
.btn_play2:hover { background-position: 0 center } 
.btn_play2:active { background-position: 0 bottom } 
.btn_ytube2 { background: url('../menu/youtube2c.png') top }
.btn_ytube2:hover { background-position: 0 center } 
.btn_ytube2:active { background-position: 0 bottom } 
.btn_eye1 { background: url('../menu/eye1a.png') top }
.btn_eye1:hover { background-position: 0 center } 
.btn_eye1:active { background-position: 0 bottom }
.btn_pmusic2 { background: url('../menu/pm2a.png') top }
.btn_pmusic2:hover { background-position: 0 center } 
.btn_pmusic2:active { background-position: 0 bottom }
.btn_spotifly2 { background: url('../menu/spotifly2a.png') top }
.btn_spotifly2:hover { background-position: 0 center } 
.btn_spotifly2:active { background-position: 0 bottom }
.btn_deezer2 { background: url('../menu/deezer2a.png') top }
.btn_deezer2:hover { background-position: 0 center } 
.btn_deezer2:active { background-position: 0 bottom }
.btn_amurco2 { background: url('../menu/amurco2a.png') top }
.btn_amurco2:hover { background-position: 0 center } 
.btn_amurco2:active { background-position: 0 bottom }
.btn_neptun2 { background: url('../menu/neptun2a.png') top }
.btn_neptun2:hover { background-position: 0 center } 
.btn_neptun2:active { background-position: 0 bottom }
.btn_back1 { background: url('../menu/back1a.png') top }

.btn_back1:hover { background-position: 0 center } 
.btn_back1:active { background-position: 0 bottom }

.btn_amazon2a,.btn_amazon2b,.btn_itunes2,.btn_google2,.btn_play2,.btn_eye1,.btn_pmusic2,.btn_spotifly2,.btn_deezer2,.btn_amurco2,.btn_neptun2,.btn_back1,.btn_ytube2 {
 position: relative;
 display: block;
 width: 100%; height: 100%; background-size:100%; margin:0 auto }
 .btnbox1 { position:relative; display:block; width:120px; height:120px;}
 .btnbox2 { position:relative; display:block; width:80px; height:80px;}
 


/* Menü ------------------------------------------------------------------- */

/* @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); */
a { text-decoration: none; color: #f7f7f7; outline: none }
a:hover, a:focus { color: #fff; outline: none }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after { display: table; content: " " }
.clearfix:after { clear: both }
 
.btn_menu {
 position: absolute;
 display: block;
 top:0px; left:0;
 width: 80px; height: 80px;
 background: url('../menu/menu1b.png') bottom;
 background-size:80px; margin:0 auto }
.btn_menu:hover { background-position: 0 0 } 
.btn_menu:active { background-position: 0 160px }  

.mp-menu {
 position: absolute; /* we can't use fixed here :( */
 z-index: 100;
 top:0; left:0;
 width: 280px; height: 100%;
 -webkit-transform: translate3d(-100%, 0, 0);
 -moz-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) }

.mp-level {
 position: absolute;
 top:0; left:0;
 width:100%; height:100%;
 background: #aaaaaa;
 -webkit-transform: translate3d(-100%, 0, 0);
 -moz-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0) }

.mp-pusher { position:relative; left:0; height:100% }

/* overlays for pusher and for level that gets covered */
.mp-pusher::after,
.mp-level::after,
.mp-level::before {
 position: absolute;
 top:0; right:0;
 width:0; height:0;
 content:'';
 opacity:0 }

.mp-pusher::after,
.mp-level::after {
 background: rgba(0,0,0,0.4);
 -webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
 -moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
 transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s }

.mp-level::after { z-index: -1 }

.mp-pusher.mp-pushed::after,
.mp-level.mp-level-overlay::after {
 width: 100%; height: 100%;
 opacity: 1;
 -webkit-transition: opacity 0.3s;
 -moz-transition: opacity 0.3s;
 transition: opacity 0.3s }

.mp-level.mp-level-overlay { cursor:pointer }

.mp-level.mp-level-overlay.mp-level::before {
 width: 100%; height: 100%;
 background: transparent;
 opacity: 1 }

.mp-pusher,.mp-level {
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 transition: all 0.5s }

/* overlap */
.mp-overlap .mp-level.mp-level-open {
 box-shadow: 1px 0 2px rgba(0,0,0,0.2);
 -webkit-transform: translate3d(-40px, 0, 0);
 -moz-transform: translate3d(-40px, 0, 0);
 transform: translate3d(-40px, 0, 0) }

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
 box-shadow: none;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0) }

/* cover */
.mp-cover .mp-level.mp-level-open {
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0) }

.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
 -webkit-transform: translate3d(-100%, 0, 0);
 -moz-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0) }

/* content style */
.mp-menu ul { margin:0; padding: 0; list-style: none }

.mp-menu h2 {
 margin: 0;
 padding: 34px 0 0 32px;
 height:100px;
 border-bottom: 1px solid #fff;
 background: #ddd;
 color: rgba(0,0,0,0.3);
 font-weight:normal; font-family: 'Noto Sans', sans-serif; 
 text-shadow: 0 0 1px rgba(fff,fff,fff,1);
 font-weight: 300;
 letter-spacing:-0.4px;
 font-size: 28px }

.mp-menu.mp-overlap h2::before {
 position: absolute;
 top: 0; right: 0;
 margin-right: 8px;
 font-size: 75%;
 line-height: 1.8;
 opacity: 0;
 -webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
 -moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
 transition: opacity 0.3s, transform 0.1s 0.3s;
 -webkit-transform: translateX(-100%);
 -moz-transform: translateX(-100%);
 transform: translateX(-100%) }

.mp-menu.mp-cover h2 {
 text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 1px;
 font-size: 1em }

.mp-overlap .mp-level.mp-level-overlay > h2::before {
 opacity: 1;
 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
 -moz-transition: -moz-transform 0.3s, opacity 0.3s;
 transition: transform 0.3s, opacity 0.3s;
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 transform: translateX(0) }

.mp-menu ul li > a {
 display: block;
 padding: 0.7em 1em 0.7em 1.8em;
 outline: none;
 color:#444;
 box-shadow: inset 0 -1px rgba(0,0,0,0.2);
 text-shadow: 0 0 1px rgba(255,255,255,0.1);
 font-size: 16px;
 font-weight:normal; font-family: 'Noto Sans', sans-serif; 
 -webkit-transition: background 0.3s, box-shadow 0.3s;
 -moz-transition: background 0.3s, box-shadow 0.3s;
 transition: background 0.3s, box-shadow 0.3s }

/* > */
.mp-menu ul li::before {
 position: absolute;
 left: 10px;
 z-index: -1;
 color: rgba(0,0,0,0.4);
 line-height: 3.5 }

.mp-level > ul > li:first-child > a { box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2) }

.mp-menu ul li a:hover,
.mp-level > ul > li:first-child > a:hover {
	color:#FC3;
	background: rgba(0,0,0,0.3);
	box-shadow: inset 0 -1px rgba(0,0,0,0) }

.mp-menu ul li a:active,
.mp-level > ul > li:first-child > a:active {
	color:#fff;
	background: rgba(0,0,0,0.3);
	box-shadow: inset 0 -1px rgba(0,0,0,0) }

.mp-menu .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0) }

.mp-level > ul > li:first-child > a:hover,
.mp-level.mp-level-overlay > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);
} /* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */

.mp-back {
 background: rgba(0,0,0,0.7);
 outline: none;
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: normal;
 display: block;
 font-size: 14px;
 padding: 10px 0 10px 30px;
 position: relative;
 box-shadow: inset 0 1px rgba(0,0,0,0.1);
 -webkit-transition: background 0.3s;
 -moz-transition: background 0.3s;
 transition: background 0.3s;
 -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) }

.mp-back::after {
 font-family: 'linecons';
 position: absolute;
 content: "\e036";
 right: 10px;
 font-size: 18px;
 color: rgba(255,255,255,0.5) }

.mp-menu .mp-level.mp-level-overlay > .mp-back,
.mp-menu .mp-level.mp-level-overlay > .mp-back::after {
 background: transparent;
 box-shadow: none;
 color: transparent }

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
.no-csstransforms3d .mp-pusher,
.no-js .mp-pusher { padding-left: 300px }

.no-csstransforms3d .mp-menu .mp-level,
.no-js .mp-menu .mp-level { display: none }

.no-csstransforms3d .mp-menu > .mp-level,
.no-js .mp-menu > .mp-level { display: block }


/* Tablet Querformat --------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen 
  and (min-width: 901px)
  and (max-width: 1101px)
{
.fb-box1{ position:absolute; width:360px; height:180px; left:20px }
.fb-box2{ position:absolute; right:20px }
.fl-box1{ position:absolute; left:450px }
.fl-box2{ position:absolute; left:600px }

.webdesign{ position:absolute; bottom:10px; left:450px }

.btn_tel1 { display:none}

.btnbox1 { position:relative; display:block; width:100px; height:100px;}
.btnbox2 { position:relative; display:block; width:70px; height:70px;}
}	

/* Tablet Hochformat --------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen 
  and (min-width: 761px)
  and (max-width: 900px)
{
/* Fonts -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
h1 { font-size: 20px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h2 { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333333; margin: 0px }
h3 { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h4 { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin: 0px }
h5 { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h6 { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #555555; margin: 0px }
h7 { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #aaaaaa; margin: 0px } 

tbfont1 { font-size:12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin:0px }
tbfont2 { font-size:14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #666666; margin:0px }	

.btn_tel1 { display:none}
 		
.fb-box1{ position:absolute; width:360px; height:180px; left:10px }
.fb-box2{ position:absolute; right:10px }
.fl-box1{ position:absolute; left:400px }
.fl-box2{ position:absolute; left:550px }
    
#nav3 a { font-size: 26px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }
#nav3 a:hover { font-size: 26px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-shadow: 1px 1px 2px #222; text-decoration: none; text-underline: none }
#nav3 a:active { font-size: 26px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }

.webdesign{ position:absolute; bottom:10px; left:400px }

.btnbox1 { position:relative; display:block; width:100px; height:100px;}
.btnbox2 { position:relative; display:block; width:65px; height:65px;}
}	

/* Smartphone Querformat --------------------------------------------------------------------------------------- */
@media only screen 
  and (min-width: 581px)
  and (max-width: 760px)
{
/* Fonts -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
h1 { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h2 { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333333; margin: 0px }
h3 { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h4 { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin: 0px }
h5 { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h6 { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #555555; margin: 0px }	

tbfont1 { font-size:12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin:0px }
tbfont2 { font-size:14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #666666; margin:0px }
	
#nav1 a { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000; margin: 0px; text-decoration: none; text-underline: none }
#nav1 a:hover { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-decoration: none; text-underline: none }
#nav1 a:active { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000; margin: 0px; text-decoration: none; text-underline: none }
#nav3 a { font-size: 24px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }
#nav3 a:hover { font-size: 24px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-shadow: 1px 1px 2px #222; text-decoration: none; text-underline: none }
#nav3 a:active { font-size: 24px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }

.footnav1 a { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #999; margin: 0px}
.footnav1 a:hover { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px}
.footnav1 a:active { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #999; margin: 0px}	

.btn_size,.btn_home,.btn_email1,.btn_login,.btn_fbook,.btn_gplus,.btn_twitter,.btn_youtube,.btn_in,.btn_xing,.btn_scloud,.btn_deezer,.btn_spotifly,.btn_amazon,.btn_itunes,.btn_gplay,.btn_pmusic,.btn_anker,.btn_neptun,.btn_insta {
 position: relative;
 display: block;
 width: 50px; height: 50px;
 background-size:50px; margin:0 auto }
 
.btnbox1 { position:relative; display:block; width:100px; height:100px;}
.btnbox2 { position:relative; display:block; width:60px; height:60px;}
 
.btn_tel1 { display:none }

		
.fb-box1{ position:absolute; width:250px; height:200px; left:10px }
.fb-box2{ position:absolute; right:10px }
.fl-box1{ position:absolute; left:280px }
.fl-box2{ position:absolute; left:410px }

.webdesign{ position:absolute; bottom:10px; left:280px }
    
.btn_backto1 { display: block; width: 320px; height: 90px; background: url('../menu/backto1a.png') bottom; background-size:320px; margin:0 auto }
.btn_backto1:hover { background-position: 0 center } 
.btn_backto1:active { background-position: 0 0 }
.btn_backto2 { display: block; width: 320px; height: 90px; background: url('../menu/backto2a.png') bottom; background-size:320px; margin:0 auto }
.btn_backto2:hover { background-position: 0 center } 
.btn_backto2:active { background-position: 0 0 }
    
.btn_youtube2 { display: block; width: 320px; height: 90px; background: url('../menu/youtube2b.png') bottom; background-size:320px; margin:0 auto }
.btn_youtube2:hover { background-position: 0 center } 
.btn_youtube2:active { background-position: 0 0 }
    
.btn_youtube3 { display: block; width: 400px; height: 83px; background: url('../menu/youtube3a.png') bottom; background-size:400px; margin:0 auto }
.btn_youtube3:hover { background-position: 0 center } 
.btn_youtube3:active { background-position: 0 0 }  
    
}	

/* Smartphone Querformat --------------------------------------------------------------------------------------- */
@media only screen 
  and (min-width: 481px)
  and (max-width: 580px)
{
/* Fonts -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
h1 { font-size: 17px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h2 { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333333; margin: 0px }
h3 { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h4 { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin: 0px }
h5 { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h6 { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #555555; margin: 0px }
h7 { font-size: 10px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #aaaaaa; margin: 0px }

tbfont1 { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin:0px }
tbfont2 { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin:0px }
	
#nav1 a { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000; margin: 0px; text-decoration: none; text-underline: none }
#nav1 a:hover { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-decoration: none; text-underline: none }
#nav1 a:active { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000; margin: 0px; text-decoration: none; text-underline: none }
#nav3 a { font-size: 24px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }
#nav3 a:hover { font-size: 24px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-shadow: 1px 1px 2px #222; text-decoration: none; text-underline: none }
#nav3 a:active { font-size: 24px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }

.footnav1 a { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #999; margin: 0px}
.footnav1 a:hover { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px}
.footnav1 a:active { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #999; margin: 0px}	
.footnav2 a { font-size: 11px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333; margin: 0px}
.footnav2 a:hover { font-size: 11px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px}
.footnav2 a:active { font-size: 11px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333; margin: 0px}

.btn_size,.btn_home,.btn_email1,.btn_login,.btn_fbook,.btn_gplus,.btn_twitter,.btn_youtube,.btn_in,.btn_xing,.btn_scloud,.btn_deezer,.btn_spotifly,.btn_amazon,.btn_itunes,.btn_gplay,.btn_pmusic,.btn_anker,.btn_neptun,.btn_insta {
 position: relative;
 display: block;
 width: 50px; height: 50px;
 background-size:50px; margin:0 auto }
 
.btnbox1 { position:relative; display:block; width:70px; height:70px;}
.btnbox2 { position:relative; display:block; width:55px; height:55px;}	
 
 .btn_tel1 { background: url('../menu/telefon1b.png') bottom;
 position:relative; display:block; width:50px; height:50px; background-size:50px; margin:0 auto}
.btn_tel1:hover { background-position: 0 0 } 
.btn_tel1:active { background-position: 0 center } 
	
.fb-box1{ position:absolute; width:250px; height:200px; left:10px }	
.fb-box2{ position:absolute; right:10px }
.fl-box1{ display:none }
.fl-box2{ position:absolute; left:280px }

.webdesign{ position:absolute; bottom:10px; left:280px }
    
.btn_backto1 { display: block; width: 280px; height: 79px; background: url('../menu/backto1a.png') bottom; background-size:280px; margin:0 auto }
.btn_backto1:hover { background-position: 0 center } 
.btn_backto1:active { background-position: 0 0 }
.btn_backto2 { display: block; width: 280px; height: 79px; background: url('../menu/backto2a.png') bottom; background-size:280px; margin:0 auto }
.btn_backto2:hover { background-position: 0 center } 
.btn_backto2:active { background-position: 0 0 }
    
.btn_youtube2 { display: block; width: 280px; height: 79px; background: url('../menu/youtube2b.png') bottom; background-size:280px; margin:0 auto }
.btn_youtube2:hover { background-position: 0 center } 
.btn_youtube2:active { background-position: 0 0 } 
    
.btn_youtube3 { display: block; width: 400px; height: 83px; background: url('../menu/youtube3a.png') bottom; background-size:400px; margin:0 auto }
.btn_youtube3:hover { background-position: 0 center } 
.btn_youtube3:active { background-position: 0 0 }
}

/* Smartphone Hochformat ----------------------------------------------------------------------------------------*/
@media only screen 
  and (min-width: 280px)
  and (max-width: 480px)
{
/* Fonts -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
h1 { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h2 { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333333; margin: 0px }
h3 { font-size: 11px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h4 { font-size: 11px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin: 0px }
h5 { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000000; margin: 0px }
h6 { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #555555; margin: 0px }
h7 { font-size: 8px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #aaaaaa; margin: 0px }

tbfont1 { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin:0px }	
tbfont2 { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888888; margin:0px }	
	
#nav1 a { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000; margin: 0px; text-decoration: none; text-underline: none }
#nav1 a:hover { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-decoration: none; text-underline: none }
#nav1 a:active { font-size: 14px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #000; margin: 0px; text-decoration: none; text-underline: none }
#nav3 a { font-size: 22px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }
#nav3 a:hover { font-size: 22px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-shadow: 1px 1px 2px #222; text-decoration: none; text-underline: none }
#nav3 a:active { font-size: 22px; font-weight:700; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px; text-shadow: 1px 1px 3px #444; text-decoration: none; text-underline: none }
#nav4 a { font-size: 8px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888; margin: 0px; text-decoration: none; text-underline: none }
#nav4 a:hover { font-size: 8px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #f60; margin: 0px; text-decoration: none; text-underline: none }
#nav4 a:active { font-size: 8px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #888; margin: 0px; text-decoration: none; text-underline: none } 

.footnav1 a { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #aaa; margin: 0px}
.footnav1 a:hover { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px}
.footnav1 a:active { font-size: 13px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #aaa; margin: 0px}	
.footnav2 a { font-size: 11px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #555; margin: 0px}
.footnav2 a:hover { font-size: 11px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #fff; margin: 0px}
.footnav2 a:active { font-size: 11px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #555; margin: 0px}

.btn_size,.btn_home,.btn_email1,.btn_login,.btn_fbook,.btn_gplus,.btn_twitter,.btn_youtube,.btn_in,.btn_xing,.btn_scloud,.btn_deezer,.btn_spotifly,.btn_amazon,.btn_itunes,.btn_gplay,.btn_pmusic,.btn_anker,.btn_neptun,.btn_insta  {
 position: relative;
 display: block;
 width: 45px; height: 45px;
 background-size:45px; margin:0 auto }
 
.btnbox1 { position:relative; display:block; width:60px; height:60px;}
.btnbox2 { position:relative; display:block; width:50px; height:50px;}
 
.btn_tel1 { background: url('../menu/telefon1b.png') bottom;
 position:relative; display:block; width:45px; height:45px; background-size:45px; margin:0 auto}
.btn_tel1:hover { background-position: 0 0 } 
.btn_tel1:active { background-position: 0 center } 	
	
.fb-box1{ position:absolute; width:145px; height:235px; left:10px }	
.fb-box2{ position:absolute; top:0px; right:10px;}
.fl-box1{ position:absolute; top:0px; left:160px }	
.fl-box2{ position:absolute; top:136px; left:160px }

.webdesign{ display:none}
    
.btn_backto1 { display: block; width: 230px; height: 65px; background: url('../menu/backto1a.png') bottom; background-size:230px; margin:0 auto }
.btn_backto1:hover { background-position: 0 center } 
.btn_backto1:active { background-position: 0 0 }
.btn_backto2 { display: block; width: 230px; height: 65px; background: url('../menu/backto2a.png') bottom; background-size:230px; margin:0 auto }
.btn_backto2:hover { background-position: 0 center } 
.btn_backto2:active { background-position: 0 0 }
    
.btn_youtube2 { display: block; width: 230px; height: 65px; background: url('../menu/youtube2b.png') bottom; background-size:230px; margin:0 auto }
.btn_youtube2:hover { background-position: 0 center } 
.btn_youtube2:active { background-position: 0 0 } 
    
.btn_youtube3 { display: block; width: 300px; height:63px; background: url('../menu/youtube3a.png') bottom; background-size:300px; margin:0 auto }
.btn_youtube3:hover { background-position: 0 center } 
.btn_youtube3:active { background-position: 0 0 }

.mp-menu {
 position: absolute; /* we can't use fixed here :( */
 z-index: 100;
 top:0; left:0;
 width: 240px; height: 100%;
 -webkit-transform: translate3d(-100%, 0, 0);
 -moz-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) }
 
 .mp-menu h2 {
 margin: 0;
 padding: 34px 0 0 25px;
 height:100px;
 border-bottom: 1px solid #fff;
 background: #ddd;
 color: rgba(0,0,0,0.3);
 font-weight:normal; font-family: 'Noto Sans', sans-serif; 
 text-shadow: 0 0 1px rgba(fff,fff,fff,1);
 font-weight: 300;
 letter-spacing:-0.4px;
 font-size: 24px }
}