.app-bar {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        /* mobil kucukken ust menu genisligi */
        width: 100%;
        height: 60px;

        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;

        position: fixed;

        top: 0;
        left: 0;
		/* mobil kucukken ust menu rengi transparent ti onceden rgba(17, 17, 17, 0.8)   #0095b7; */
		background-color: rgba(17, 17, 17, 0.8);

        z-index:2;
      }

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

      .app-bar .logo {
        -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        
        font-size: 20px;
        line-height: 60px;
        
        margin: 0 16px;
        
        color: #fefefe;

        float: none;
        max-width: none;
      }

      .app-bar .logo a {
        text-decoration: none;
        color: inherit;
        font-weight: normal;
      }

      

      .app-bar button {
        width: 44px;
        height: 44px;
        
        background-image: none;
        background-color: transparent;
        
        border-style: solid;
        border-radius: 100%;
        border-color: rgb(254, 254, 254);

        padding: 8px;
        margin: 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 img {
        width: 28px;
        height: 28px;
      }

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

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

        top: 7px;
        left: 7px;
      }

      .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 {
        border-color: transparent;
        background-color: rgba(254, 254, 254, 0.4);
      }

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

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

      

      

      @media all and (min-width: 600px) {
        
        body {
          padding: 16px;
        }
        
        .app-bar {
          display: block;
          
          position: initial;

          height: 130px;
          
          padding: 0 16px;
          margin-bottom: 16px;
          
          box-sizing: border-box;
          
          background-color: transparent;

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

          -webkit-transition: none;
          transition: none;
        }

        .app-bar.open {
          -webkit-transform: translate(0,0);
          transform: translate(0,0);
        }
        
        .app-bar .logo {
          float: left;
          
          margin: 0;
          
          font-size: 100px;  
          line-height: 130px;
        }
        
        
        
        .app-bar:after {
          content: ' ';
          
          display:block;
          height: 0;
          overflow: hidden;
          
          clear: both;
        }
        
        
        
        button.menu {
          display: none;
        }
        
        
      }

      .navdrawer-container {
        position: fixed;
        
        width: 250px;
        height: 100%;
        /* mobil kucukken ust menu rengi transparent ti onceden rgba(17, 17, 17, 0.8)   #0095b7; */
        background-color: rgba(17, 17, 17, 0.8);
        
        color: #fefefe;

        -webkit-transform: translate(-250px,0);
        transform: translate(-250px,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 ul li {
        border-bottom-style: solid;
        border-width: 1px;
        border-color: white;
      }
	  
      .navdrawer-container ul li a {
        display: block;
        
        height: 60px;
        
        padding: 0 20px;
        
        line-height: 60px;
        
        text-decoration: none;
        color: white;
		
		
      }

      .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: 600px) {
        .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;
      }