@charset "utf-8";

/*
font-family: 'Roboto', sans-serif;
*/

/* CSS Reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* Globals */
html { font-size: 62.5%; /* 10px */ height: 100%; }
html, body, #wrapper, header, #header-container, nav, main, footer, #logo { position: relative; }
body { min-height: 100%; font-family: 'Roboto', sans-serif; font-size: 1.8em /* 18px */; color: #555; background: #DDD; font-weight: 400; line-height: 1.5; }
#wrapper, header, #header-container, nav, nav ul, footer, .footer-links ul { display: -webkit-box; display: -ms-flexbox; display: flex; }
#wrapper, header, nav, footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#header-container, nav ul, .footer-links ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#header-container, nav, footer { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
header, nav, footer { width: 100%; }
h1, h2, h3, h4, h5, h6 { color: #444; font-weight: 500; }
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }
p { margin-bottom: 1.4rem; }
a { color: #06C; text-decoration: none; }
a:hover { color: #222; }
strong, bold { font-weight: 700; }
.italic { font-style: italic !important; }
.uppercase { text-transform: uppercase !important; }
.center { text-align: center; }
.centered { margin: 0 auto; }
img.autosize { width: 100%; height: auto; }
img.max-autosize { width: auto; max-width: 100%; height: auto; }

/* CSS Document */
header { background: #F6F6F6; }
#header-container { height: 100px; }
#logo { line-height: 0; }
#logo a, .footer-logo a { display: inline-block; }
#logo img { width: auto; max-height: 60px; }
.footer-logo img { width: auto; max-height: 30px; }
nav { height: 50px; background: #EEE; }
nav li, .footer-links li { margin: 0 1rem; }
nav a, #menu a, .footer-links a { color: #555; }
nav a:hover, #menu a:hover, .footer-links a:hover { color: #06C; }
#menu { display: none; font-size: 1.4em; }
main { width: 80%; padding: 2rem 0; }
#wrapper { background: #FFF; }
footer { padding: 4rem 0; background: #DDD; font-size: 1.6rem; }
.footer-links { margin: .5rem 0; }
#copyright { font-size:  1.4rem; }
#copyright ul li { display: inline-block; margin: 0 1rem; }

/* Toggle */
nav .toggle-off-nav { display: none; }
footer .toggle-off-footer { display: none; }

/* Media Queries */
@media screen and (max-width : 600px) {
  #menu { display: inherit; }
  #header-container, main { width: 90%; }
  #header-container { justify-content: flex-start; }
  #logo { flex: 1; }
  #logo img { max-height: 40px; }
  nav { display: none; }
  .footer-links ul { flex-wrap: wrap; }
}