@CHARSET "UTF-8";
html, body {
        width: 100%;
        height: 100%;
        
        margin: 0;
        padding: 0;
      }

      body {
        position: relative;

        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        
        background-color: white;

        box-sizing: border-box;

      }

      .app-bar {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        
        width: 100%;
        height: 60px;

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

        position: fixed;
        
        top: 0;
        left: 0;

        background-color: white;
      }

      .app-bar.open {
        -webkit-transform: translate(150px,0);
        transform: translate(150px,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-actions  {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
      }

      .app-bar button {
        width: 240px;
        height: 60px;
        
        background-image: none;
        background-color: transparent;
        
        border: none;

        padding: 0;
        margin: 0;

        -webkit-transition: background-color 0.2s ease-out;
        transition: background-color 0.2s ease-out;
      }

      .app-bar button img {
        width: 240px;
        height: 60px;
      }

      .app-bar button:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      .app-bar button:focus {
        background-color: rgba(255, 255, 255, 0.2);
        outline: 0;
      }

      .app-bar button:active {
        background-color: rgba(255, 255, 255, 0.4);
      }

      .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;
      }

      @media all and (min-width: 1000px) {
        
        body {
          padding: 0px;
        }
        
        .app-bar {
          display: block;
          
          height: 50px;
          
          padding: 0 16px;
          margin-bottom: 16px;
          
          box-sizing: border-box;
          
          background-color: transparent;
        }
        
        .app-bar .logo {
          float: left;
          
          margin: 0;
          
          line-height: 50px;
        }
        
        .app-bar-actions {
          float: right;
          
          margin: 35px 0;
        }
        
        .app-bar:after {
          content: ' ';
          
          display:block;
          height: 0;
          overflow: hidden;
          
          clear: both;
        }
        
        button.menu {
          display: none;
        }
        
        nav {
          display: block;

          margin-top: 50px;
        }
      }

      .navdrawer-container {
        position: fixed;
        top: 0;
        width: 150px;
        height: 100%;
        
        background-color: #f0f0f0;
        
        color: #24a2dc;

        -webkit-transform: translate(-150px,0);
        transform: translate(-150px,0);
      }

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

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

	  .navdrawer-container ul {
        list-style-type: none;
        margin-top: 20px;
      }

      .navdrawer-container ul li a {
        display: block;
        
        height: 20px;
        
        padding: 0 10px;
        
        line-height: 20px;
        
        text-decoration: none;

        color: #7d4a27;

        -webkit-transition: background-color 0.2s ease-out;
        transition: background-color 0.2s ease-out;
      }

      .navdrawer-container ul li {
        margin: 0 10px;
      }

      .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: 1000px) {
        .navdrawer-container {
          position: relative;
          
          width: 100%;
          height: auto;
          
          margin-top: 0;

          -webkit-transform: none;
          tranform: none;
          
          -webkit-transition: none;
          transition: none;
         -moz-transform: translate(0,0);
         background-color: white;
        }

        .navdrawer-container ul {
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          width: 960px;
          margin: 0 auto;
          -ms-flex-direction: row;
          -webkit-flex-direction: row;
          flex-direction: row;
        }
        
        .navdrawer-container ul li {
          border: none;
          margin: 0 auto;
        }
        
        
      }
      	
      @media all and (max-width: 1000px) {
		.main-content {
			margin-top: 70px;
		}
    	
    	#page-caroussel {
			display: none;
		}
      }