/* normalize */
html {
  font-family: sans-serif; 
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%; 
}

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block; 
  vertical-align: baseline; 
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

a { text-decoration: none; background-color: transparent; }

a:active, a:hover { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

.title { border-bottom: 3px solid #1EAE1E }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img, dialog { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 1em 40px; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

pre { overflow: auto; }

code, kbd, pre, samp {
  font-family: "Lucinda Console", Courier, monospace;
  font-size: 1em;
  padding: 0.5em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"],input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea { overflow: auto; }

optgroup { font-weight: bold; }



/* style */

.main {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-column-end: auto;
  max-width: 1920;
  margin: 2em auto;
}

div { 
/*	padding: 1em; */
/*	border: 1px dotted black  */
}

.cs1 { grid-column-end: span 1 }
.cs2 { grid-column-end: span 2 }
.cs3 { grid-column-end: span 3 }
.cs4 { grid-column-end: span 4 }
.cs5 { grid-column-end: span 5 }
.cs6 { grid-column-end: span 6 }
.cs7 { grid-column-end: span 7 }
.cs8 { grid-column-end: span 8 }
.cs9 { grid-column-end: span 9 }
.cs10 { grid-column-end: span 10 }
.cs11 { grid-column-end: span 11 }
.cs12 { grid-column-end: span 12 }

.c1 { grid-column-start: col-start 1 }
.c2 { grid-column-start: col-start 2 }
.c3 { grid-column-start: col-start 3  } 
.c4 { grid-column-start: col-start 4 }
.c5 { grid-column-start: col-start 5 }
.c6 { grid-column-start: col-start 6 }
.c7 { grid-column-start: col-start 7 }
.c8 { grid-column-start: col-start 8 }
.c9 { grid-column-start: col-start 9 }
.c10 { grid-column-start: col-start 10 }
.c11 { grid-column-start: col-start 11 }
.c12 { grid-column-start: col-start 12 }

.r1 { grid-row-start: 1 }
.r2 { grid-row-start: 2 }
.r3 { grid-row-start: 3 }
.r4 { grid-row-start: 4 }
.r5 { grid-row-start: 5 }
.r6 { grid-row-start: 6 }
.r7 { grid-row-start: 7 }
.r8 { grid-row-start: 8 }
.r9 { grid-row-start: 9 }
.r10 { grid-row-start: 10 }
.r11 { grid-row-start: 11 }
.r12 { grid-row-start: 12 }

.rs1 { grid-row-end: span 1 }
.rs2 { grid-row-end: span 2 }
.rs3 { grid-row-end: span 3 }
.rs4 { grid-row-end: span 4 }
.rs5 { grid-row-end: span 5 }
.rs6 { grid-row-end: span 6 }
.rs7 { grid-row-end: span 7 }
.rs8 { grid-row-end: span 8 }
.rs9 { grid-row-end: span 9 }
.rs10 { grid-row-end: span 10 }
.rs11 { grid-row-end: span 11 }
.rs12 { grid-row-end: span 12 }
.re { grid-row-end: -1 }

html { font-size: 80% }

body {
  font-size: 1.5em; 
  line-height: 1.6;
  font-weight: 400;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; 
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }

h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p { margin-top: 0; }

a { color: #1EAE1E; }
a:hover { color: #0FA00F; }

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
  display: inline-block;
  height: 1.5em;
  padding: 0 0.5em;
  color: #555;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 0.1em;
  border: 0.04em solid #bbb;
  cursor: pointer;
  box-sizing: border-box; 
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; 
}

.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C333;
  border-color: #33C333; 
}

.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAE1E;
  border-color: #1EAE1E; 
}

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
  height: 1.5em;
  padding: 0.4em 0.8em;
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 0.1em;
  box-shadow: none;
  box-sizing: border-box; 
}

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; 
}

textarea {
  min-height: 2.8em; 
  padding-top: 0.4em;
  padding-bottom: 0.4em; 
}

input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  border: 1px solid #33C333;
  outline: 0; 
}

label, legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}

fieldset {
  padding: 0;
  border-width: 0; 
}

input[type="checkbox"], input[type="radio"] { display: inline; }

label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; 
}

ul { list-style: circle inside; }
ol { list-style: decimal inside; }
ol, ul { padding-left: 0; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; 
}
li { margin-bottom: 1rem; }
menu > li { 
	list-style: none; 
	border-radius: 0.3em;
	border: 1px dotted black; 
	text-align: center;
	vertical-align: baseline;
}
menu > li:hover { background-color: #f0f0f0 }

code {
  font-size: 90%;
  background: #FAFAFA;
  color: black;
  border: 1px solid #E1E1E1;
  border-radius: 0.3em; 
}

pre > code {
  width: 60rem;
  white-space: pre-wrap;
  display: block;
  padding: 1rem 1.4rem;
}

table {
  border-collapse: collapse;
  border-spacing: 0em;
}
th, td {
  padding: 0.3rem 0.8rem;
  text-align: right;
  border-bottom: 1px solid #E1E1E1; 
}


th { background-color: #f0f0f0 }

button, .button { margin-bottom: 1rem; }
input, textarea, select, fieldset { margin-bottom: 1.5rem; }
pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2.5rem; }

hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; 
}

.main:after,
.row:after {
  content: "";
  display: table;
  clear: both; 
}


.right {
  float: right;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

@media (min-width: 400px) {
  .main { width: 85%; padding: 0; }
}

@media (min-width: 550px) {
  .main { width: 80%; }
  .grid:first-child { margin-left: 0; }
}

@media (min-width: 750px) {
  .main { width: 90% }
  .grid:first-child { margin-left: 0; }
}
@media (min-width: 1000px) {
  .main { width: 95% }
  .grid:first-child { margin-left: 0; }
}
@media (min-width: 1200px) {
  .main { width: 95% }
  .grid:first-child { margin-left: 0; }
}