html,
body {width: 100%; height: 100%; margin: 0; padding: 0; position: relative; font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif; font-weight: 300; background-color: rgb(255, 255, 255); box-sizing: border-box; min-height: 100%}

body.open {overflow: hidden}

img:hover {filter:alpha(opacity=90); opacity:0.90; -moz-opacity:0.90; -khtml-opacity:0.90; -opera-opacity:0.90}

h6 {font-size:18px; font-weight:100; letter-spacing:4px; text-align:right}

.app-bar {display: block; width: 100%; position: fixed; top: 0; left: 0; background-color: rgba(240, 160, 50, 1); overflow: hidden; z-index: 1}

.app-bar-container {display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 60px; position: relative; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin: 0 auto}

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

.app-bar .logo {-webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 2em; line-height: 60px; margin: 0 16px; padding: 0; color: rgb(255, 255, 255); float: none; max-width: none; font-weight: 300; line-height: 60px}

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

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

.app-bar button {width: 60px; height: 60px; background-image: none; background-color: transparent; border: none; padding: 0; -webkit-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; -webkit-tap-highlight-color: transparent}

.app-bar button img {width: 60px; 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)}

button.menu img {height:24px; width: 24px}

.promote-layer {-webkit-backface-visibility: hidden; backface-visibility: hidden}
  /*This may promote the layer to a composited
  layer. Replace with will-change when available #perfmatters
  */
.base, p, ul, ol {font-size: 19px}

.navdrawer-container {z-index: 1; position: fixed; top: 0; bottom: 0; width: 250px; height: 100%; background-color: rgb(255, 209, 139); color: rgb(255, 255, 255); -webkit-transform: translate(-250px, 0); transform: translate(-250px, 0); overflow-y: auto}

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

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

.navdrawer-container h4,
.navdrawer-container ul li a {height: auto; padding: 17px 20px; line-height: 1.4}

.navdrawer-container h4 {background-color: white;color: rgba(240, 160, 50)}

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

.navdrawer-container ul li a {display: block; text-decoration: none; color: white; -webkit-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; white-space: nowrap}

.navdrawer-container ul li {border-bottom-style: solid; border-width: 1px; border-color: rgb(255, 255, 255); padding: 0}

.navdrawer-container ul li::before {content: none}

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

main {margin: 0 auto; /* Height of the header */padding: 60px 16px 16px 16px; min-height: 100%}

/** Larger Screens - desktops and tablets **/
@media all and (min-width: 990px) {.app-bar {position: relative}

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

.app-bar-container {display: block; height: 130px; max-width: 864px; padding: 0 16px; box-sizing: border-box; background-color: rgba(240, 160, 50)}

.app-bar .logo {float: left; margin: 0; padding: 0; line-height: 130px; font-size: 46px}

.app-bar-actions {float: right}

.app-bar::after {content: ' '; display: block; height: 0; overflow: hidden; clear: both}

button.menu {display: none}

nav {display: block; margin-top: 130px}

.navdrawer-container {position: relative; width: 100%; height: auto; margin-top: 130px; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: none; transition: none; overflow-y: auto}

.navdrawer-container h4 {display: none}

.navdrawer-container ul {display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 864px; margin: 0 auto; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row}

.navdrawer-container ul li {border: none}

main {max-width: 864px; padding-top: 0; min-height: initial}

body {overflow-y: scroll}

.navdrawer-container { position: relative; margin-top: 0}

@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 300; src: url(/fonts/RobotoCondensed-Light.eot); src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(/fonts/RobotoCondensed-Light.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Light.woff) format('woff')}

@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: url(/fonts/RobotoCondensed-Regular.eot); src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(/fonts/RobotoCondensed-Regular.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Regular.woff) format('woff')}

@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; src: url(/fonts/RobotoCondensed-Bold.eot); src: local('Roboto Condensed Regular'), local('RobotoCondensed-Bold'), url(/fonts/RobotoCondensed-Bold.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Bold.woff) format('woff')}

@font-face {font-family: 'Roboto Condensed'; font-style: italic; font-weight: 300; src: url(/fonts/RobotoCondensed-LightItalic.eot); src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'), url(/fonts/RobotoCondensed-LightItalic.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-LightItalic.woff) format('woff')}

@font-face {font-family: 'Roboto Condensed'; font-style: italic; font-weight: 400; src: url(/fonts/RobotoCondensed-Italic.eot); src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'), url(/fonts/RobotoCondensed-Italic.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Italic.woff) format('woff')}

@font-face {font-family: 'Roboto Condensed'; font-style: italic; font-weight: 700; src: url(/fonts/RobotoCondensed-BoldItalic.eot); src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'), url(/fonts/RobotoCondensed-BoldItalic.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-BoldItalic.woff) format('woff')}