/*
    font-family: circe, sans-serif;
    z-index: 90 Kontakt; 80 Menü; 70 Buddy; 60 Header; 30 Footer
   
    grau: #757575 (Placeholder)
    dunkelorange: #710504 (Schrift); #AD4906 (Button); 
    Musikausbildung - orange: #F27405
    Musiklehrer - blau: #045BB0
    Musikwettbewerbe - grün: #2CA83E
    Musiktalente - violett: #BF49F2
    Meisterkurse - rot: #D80000
    Musikinstitutionen - türkis: #0AA4BF
    Musikwirtschaft - grau: #8190A3
*/


body { margin:0px;padding:0px; font-size:12px;line-height:12px; font-family: circe, sans-serif; font-weight: 400; font-style: normal; }
a { font-family: circe, sans-serif; font-weight: 400; font-style: normal; }

input:focus { 
    outline: none !important;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #8190A3; border-radius: 10px;   }
::-webkit-scrollbar-thumb:hover { background: #8190A3; }

#header { display:none }

h1, h2, h3, h4, h5, p { margin:0px;padding:0px;font-weight:normal;box-sizing:border-box }
div, input, textarea { box-sizing:border-box }
a { text-decoration:none;color:#F27405 }

.aPDF { border-top:solid 1px #000000;font-size:18px;line-height:18px;padding:17px 0px 18px 56px;background:url('../grafik/buttons/dokument@2x.png') 10px 16px no-repeat;display:block;margin:0px 0px 0px 0px;max-width:100%;overflow:hidden;margin-right:10px  }
a.aPDF:last-child { border-bottom:solid 1px #000000; }
a.aPDF:first-child { margin-top:30px; }
.kategorien_left .aPDF, .kategorien_left a.aPDF:last-child, .qa_info .aPDF, .qa_info a.aPDF:last-child { border-color:white }

.navigation .menu_logo_desk { height:35px } 

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.icon-scrolling {
    position: fixed;
    bottom: 50px;
    left: 50%;
    width: 16px;
    text-align: center;
    z-index: 29;
    font-size: 40px;line-height:40px;
    cursor:pointer
}  
.icon-scrolling .path1 {
  display:none
} 

.page .hideScroll { overflow:hidden; height:100%;position:absolute }


.footer { background-color:#F27405; text-align:center; padding:50px 0px 20px 0px; color:white; height:100%; font-size:19px;line-height:19px;position:relative;z-index:30; }
.footer img { width:66px;margin-bottom:15px }
.footer .social { margin-top:65px }
.footer .social span { font-size:30px;line-height:30px;color:white;display:inline-block;margin:0px 10px }
.footer .social a:nth-child(2) span { font-size:25px;line-height:25px; }
.footer a { color:white }
.footer .submenu { margin-top:66px }
.footer .submenu a { display:block;padding:5px 10px;font-size:22px;line-height:22px }


#header { position:fixed;top:0px;width:100%;height:80px;z-index:60;background-color:white;
          -webkit-box-shadow: 0px 7px 29px -1px rgba(0,0,0,0.23);
          -moz-box-shadow: 0px 7px 29px -1px rgba(0,0,0,0.23);
          box-shadow: 0px 7px 29px -1px rgba(0,0,0,0.23);
 }
#header .desk .logo { margin:27px 0px 0px 71px;float:left }
#header .middle { color:black;margin:0px auto;display:block;width:100px;text-align:center;font-size:40px;line-height:40px;padding-top:12px }
#header .middle .icon-menue-mitte { font-size:15px;line-height:15px }
.anfragen, .anmelden, .anmelde_link { float:right;border-radius: 24px;border:solid 1px transparent;padding:0px;cursor:pointer;padding:2px; }
.anfragen span, .anmelden span, .anmelde_link span { background-color:#F27405;display:inline-block; border-radius: 20px;padding:12px 18px 10px 18px;color:white;font-size:18px;line-height:18px;font-weight:bold; }
.anfragen:hover, .anmelden:hover, .anmelde_link:hover { border-color:#AD4906 }
.anfragen:hover span, .anmelden:hover span, .anmelde_link:hover span { background-color:#AD4906 }



/*.anmelden { float:right;background-color:#F27405; border-radius: 20px;padding:8px 18px 6px 18px;color:white;font-size:18px;font-weight:bold;margin-top:32px;margin-right:57px;cursor:pointer }*/
#header .mobile { display:none  }
#header .mobile .logo span { margin:15px 0px 0px 48px;float:left;font-size:30px;line-height:30px }
#header .mobile .logo span:before { color:#F27405; }
#header .mobile .right span { float:right;font-size:31px;line-height:31px;margin:15px 40px 0px 0px }
#header .mobile .right span:before { color:black; }

.icon-menue, .icon-schliessen, .icon-menue-links, .icon-menue-mitte, .menuicon, #menu .menu_close { cursor:pointer }
.menuicon { margin-top:18px;display:inline-block;margin-right:10px }
#menu { position:fixed;top:0px;bottom:0px;left:0px;right:0px;z-index:80;background-image:url('/grafik/bg-menue-dunkel-rpt.png');display:none }
#menu .menu_close { margin-top:25px;font-size:20px;color:#F27405;display:inline-block;margin-bottom:160px }
#menu .menu_close span, .menuicon span  { margin-right:10px }
#menu .menu_close div, .menuicon div { display:inline-block;font-size:14px }
#menu a { color:#F27405;display:inline-block }
#menu .menu_content { position:absolute;width: 340px; overflow:auto; right: 0px; background-color: white; height: 100%; }
#menu .menu_content > div { padding-left:70px;height:100%;min-height:500px;position:relative;width: 250px; }
#menu .main a { font-size:27px;line-height:27px;margin-bottom:30px;font-weight:bold; }
#menu .sub { width:100%;position:absolute;bottom:80px }
#menu .sub a { font-size:16px;line-height:16px;margin-bottom:13px; }
#menu .social span { font-size: 35px;color: #F27405;display: inline-block; }
#menu .social a:nth-child(2) span { font-size:30px;margin-right:10px;margin-left:4px }
#menu .social { position:absolute;bottom:260px;margin-left:-7px }

.ui-auto { position:relative }
.ui-helper-hidden-accessible { display:none }
.ui-menu { position:absolute;border:solid 1px black;list-style-type:none;outline:0px;margin:0px;padding:0px;max-height:300px;overflow:auto }
.ui-menu-item { padding:4px 10px;margin:0px }

.imagegray { width:260px; height:260px; position:relative; padding:5px;float:left;margin-right:39px }
.imagegray > div { position:absolute;left:9px;right:9px;top:9px;bottom:9px;border-radius: 50%;border:solid 2px #F27405;overflow:hidden; }
.imagegray > div > div { position:absolute; left:0px; right:0px;  top:0px; bottom:0px; border-radius: 50%; border:solid 5px white; overflow:hidden; }

.imagegray img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  width:230px;
  position:absolute;
}

.cookie_rolldown { position:fixed;z-index:100;bottom:0px;display:none;padding:30px 0px 10px 30px;width:100%;background-color: #EFF3F5;border-radius:20px 20px 0px 0px;border-top:1px solid #D3D3D4 }
.cookie_rolldown h3  { font-size:14px;line-height:22px;margin:5px 30px 20px 0px;max-width:750px;float:left }
.cookie_rolldown a { background-color: #F27405; padding: 10px 20px 6px 20px;margin-bottom:30px; color: white; font-size: 16px; line-height:16px; float:left;border-right:solid 2px white;margin-top:9px;border-radius:20px; }
.cookie_rolldown a.info_cookie { background-color:white;border:solid 1px #F27405;color:#F27405; padding: 9px 18px 5px 18px;margin-left:5px  }
.cookie_rolldown .ct_cookies { max-width:1010px;margin:0px auto }

.page { padding-top:40px }

.navigation { text-align:center;height:70px;padding-top:8px;top:0px;position:fixed;z-index:60;width:100%;background-color:white }
.navigation .icon-home { color:#F27405;font-size:30px; }
.navigation > a { position:absolute;left:50px;margin-top:12px }
.navigation > div:nth-child(2) { position:absolute;right:50px;top:12px; }
.navigation > div:last-child { padding-top:10px; }
.navigation .menu_logo_mobile { display:none } 
.navigation .menu_logo_mobile:before { color:#F27405 } 
.navigation .anmelden_img { border-radius:50% }
.navigation .anmelden_img span { padding: 12px 11px 10px 11px; }
.navigation .anmelden_img img { width:45px;height:45px;border-radius:50%;float:left }
.navigation .anmelden_user { border-radius:50% }
.navigation .anmelden_user span { border-radius:50%;width:40px;height:18px;padding:13px 0px 9px 0px;text-align:center;font-size:16px }

@media screen and (min-height: 1200px) {    
    .start_portale { padding-top:10% }
}

@media screen and (max-height: 900px) {
    .navigation { height:60px; }
    .navigation > a { left:30px; }
    .navigation > a { margin-top:7px }
    .navigation > div:last-child { padding-top:4px }
    .navigation > div:nth-child(2) { right:30px;top:4px }
}

@media screen and (max-height: 780px) {
    #menu .menu_close { margin-bottom:80px }
    #menu .main a { margin-bottom:25px }
    #menu .social { bottom:200px }    
    #menu .sub { bottom:40px; }
}

@media screen and (max-height: 600px) {
    #menu .menu_close { margin-bottom:50px }
    #menu .main a { margin-bottom:15px }
    #menu .social { bottom:160px; }    
    #menu .sub { bottom:20px; }
    #menu .social span { font-size:22px }
    #menu .social a:nth-child(2) span { font-size:20px }
}



@media screen and (max-width: 1199px) {
    #header { height:60px; }
    #header .desk .logo { margin:15px 0px 0px 35px;height:30px }
    #header .middle { font-size:30px;line-height:30px;padding-top:9px; }
    #header .middle .icon-menue-mitte { font-size:12px;line-height:12px; }
    #header .anmelden { margin-top:9px;margin-right:25px; }
    #header .anmelden span { font-size:16px;line-height:16px }
}



@media screen and (max-width: 900px) {
    .navigation .menu_logo_mobile { display:inline-block;height:30px;font-size:30px;margin-top:4px } 
    .navigation .menu_logo_desk { display:none } 
    .navigation > a .menu_logo_mobile { display:none }

    #header .middle { padding-left:150px }
}


@media screen and (max-width: 750px) {
    #header .mobile { display:block  }
    #header .desk { display:none  }
    
    #menu .menu_content { width:100% }
    .navigation { text-align:left; padding-left:80px}
    #menu .menu_close div, .menuicon div { display:none }
    .navigation > a { left:20px; }
    .navigation > div:nth-child(2) { right:20px }

    .icon-scrolling { bottom: 20px; } 
    .navigation > a .menu_logo_main { display:none }
    .navigation > a .menu_logo_mobile { display:block }
}


@media screen and (max-width: 420px) {
    .aPDF { text-overflow:ellipsis;padding:9px 0px 9px 28px;background-size:13px;background-position:5px;width:320px  }
}

@media screen and (max-width: 400px) {
    .navigation {  padding-left:70px}
    .navigation .menu_logo_mobile{ font-size:30px }
    #menu .menu_close span, .menuicon span { margin-right: 5px; }

    #header .mobile .logo span { margin-left:20px; }
    #header .mobile .right span { margin-right:25px; }
    .aPDF { width:280px  }
}

@media screen and (max-width: 350px) {
    .aPDF { width:240px  }
}