html, body, .container {
  height: 100%;
}
/*Reset*/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
html, body, p, a, div, section {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 100%;
  color: #FFF;
  font: inherit;
}
/*basic style: max-480*/
h1 {
  margin: 0.2em 0;
  font-family: 'Finger Paint', cursive;
  color: #FFF;
  line-height: 46px;
  font-size: 200%; 
  font-weight: 100;
}
#textblock blockquote {
  display: block;
  width: 90%;
  margin: 1.8em auto;
  padding: 0.1em 0.6em;
  font-family: "Cantarell", sans-serif; 
  font-size: 100%;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.3);  
  color: #FFF;
}
.motto {font-family: 'Architects Daughter', cursive;font-weight: 100;text-align: right;font-size: 90%;font-style: italic;}
hr {margin-left: 30%;border: none;background-color: #FFF;color: #FFF;height: 1px;}
p {margin: 20px 0;}
/*Layout*/
.container {display: table;padding: 0px;width: 100%;}
.content {display: table-cell;padding: 2em 0;vertical-align: top;text-align: center;}
.button {
  display: inline-block;
  margin: 0.5em 0 0;
  padding: 5px 30px; 
  color: #FFF;
  border-radius: 3px;
  font-family: 'Finger Paint', cursive;
  font-weight: 100;
  font-size: 140%;
  font-style: italic;
  text-decoration: none;
  text-align: center;
  background-color: #D37430;  
}
.button:hover,
.button:active {background-color: #5AA339;  
  -webkit-transition: color 0.8s ease-in;
  transition: color 0.8s ease-in;
}
* {margin: 0;padding: 0;}
* {
  -webkit-box-sizing: border-box;/*Sf, Chr*/
  -moz-box-sizing: border-box;/*Fx*/
  box-sizing: border-box; /*IE, Opera*/
}
#menu {width: 12em;margin: 0 auto;text-align: center;}
ul {list-style:none;margin:0;padding:0;margin:0 auto;}
ul li label {
  background: #D37430;
  border-top: 0.1em solid #D37430;
  font-size: 120%;
  color: #fff;
  text-shadow: 0 1px 1px #000;
  letter-spacing: 0.09em;
  background-color: rgba(0, 0, 0, 0.3); 
  transition: all 0.8s ease;
}
ul li label {display:block;padding:2px;}
ul li label:hover {
  background: #656565;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#656565), to(#D37430));
  background: -webkit-linear-gradient(top, #656565, #D37430);
  background: -moz-linear-gradient(top, #656565, #D37430);
  background: -ms-linear-gradient(top, #656565, #D37430);
  background: -o-linear-gradient(top, #656565, #D37430);
}
ul li a {display:block;color:#FFF;text-decoration: none;}
@media only screen and (max-width: 20.0em) {/*max-320*/
h1 {line-height: 40px;font-size: 170%;}
#textblock blockquote {display: block;max-width: 300px;}  
}
@media only screen and (min-width: 30.063em) and (max-width: 40em) {/*min-481 max-640*/
h1 {margin: 0.4em 0;font-size: 260%;}
#textblock blockquote {max-width: 18em;line-height: 26px;}
.content {padding: 0.5em 0 1.2em 0;}
.button {margin: 0.6em 0 0;font-size: 140%;}
#menu {width: 14em;}
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {/*min-641 max-1024*/
h1 {margin: 0.4em 0;font-size: 280%;}
#textblock blockquote {max-width: 20em;margin: 1.4em auto;line-height: 26px;}
.content {padding: 0.6em 0 1.2em 0;}
.button {margin: 0.2em 0 0;font-size: 160%; }
#menu {width: 16em;}
}