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

.app-bar.open {
-webkit-transform: translate(0px,0);
transform: translate(0px,0);
}

.app-bar-actions  {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
        
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}

/* menutrigger button */

.app-bar button, .bottom-bar button {
width: 46px;
height: 44px;
background:#fff;        
border-style: solid;
border-color:#fff;
padding: 8px;
margin-top: 8px;

-webkit-transition: border 300ms ease-in,background 300ms ease-in;
transition: border 300ms ease-in,background 300ms ease-in;

-webkit-tap-highlight-color: transparent;
}

.app-bar button.menu {
position: relative;
}

.app-bar button.menu img {
position: absolute;

width:18px;
height:auto;

top: 12px;
left: 15px;
}

      .app-bar button.menu .menu-icon {
        opacity: 1.0;
      }

      .app-bar button.menu .close-icon {
        opacity: 0.0;
      }

      .app-bar.open button.menu .menu-icon {
        opacity: 0.0;
      }

      .app-bar.open button.menu .close-icon {
        opacity: 1.0;
      }

      .app-bar button:hover, .bottom-bar button:hover {
        border-color: transparent;
        background-color: rgba(254, 254, 254, 0);
      }

      .app-bar button:focus, .bottom-bar button:focus {
        border-color: transparent;
        outline: 0;
        background-color: rgba(254, 254, 254, 0);
      }

      .app-bar button:active, .bottom-bar button:active {
        border-color: transparent;
        background-color: rgba(254, 254, 254, 0);
      }

   
.navdrawer-container {
position: fixed;
top:60px;        
width: 100%;
height: 100%;
background-image:url("/images/grafik/top-bg.png");
color: #fff;

-webkit-transform: translate(-100%,0);
transform: translate(-100%,0);

z-index: 2;
      }

      .navdrawer-container.open {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
      }

      .navdrawer-container ul {
        list-style-type: none;
      }

      .navdrawer-bg {
        position: fixed;

        width: 100%;
        height: 100%;

        left: 0;
        top: 0;

        background-color: black;

        /** Unfortunately this is the best way
        to get no paints in Chrome **/
        opacity: 0.0000001;

        z-index: 1;

        pointer-events: none;
      }

      .navdrawer-bg.open {
        opacity: 0.5;
      }

      .app-bar, .navdrawer-container {
        -webkit-transition: -webkit-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
      }

      .navdrawer-bg {
        -webkit-transition: opacity 0.3s ease-out;
        transition: opacity 0.3s ease-out;
      }

.navdrawer-container h3 {
margin-left:-20px;
}

#mobilmenu .navdrawer-container ul li a {
display: block;
height: auto;
padding-left:0px;
padding-bottom:12px;
line-height: 16px;
text-decoration: none;
color: #eee;
margin-left:-70px;
      }

      .navdrawer-container ul li a:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }

      .navdrawer-container ul li a:focus {
        background-color: rgba(255, 255, 255, 0.3);
        outline: 0;
      }

      .navdrawer-container ul li a:active {
        background-color: rgba(255, 255, 255, 0.4);
      }

      @media all and (min-width: 1200px) {
        .navdrawer-container {
          position: initial;
          
          width: 100%;
          height: auto;
          
          -webkit-transform: translate(0,0);
          transform: translate(0,0);
          
          -webkit-transition: none;
          transition: none;

          pointer-events: auto;
        }

        .navdrawer-container ul {
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          
          -ms-flex-direction: row;
          -webkit-flex-direction: row;
          flex-direction: row;
        }
        
        .navdrawer-container ul li {
          border: none;
        }

        .navdrawer-bg, .navdrawer-bg.open {
          opacity: 0;

          pointer-events: none;
        }
      }

      .promote-layer {
        /*
        This may promote the layer to a composited
        layer.

        Replace with will-change when available

        #perfmatters
        */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }