html, body, article, header, div, h1, h2, h3, p, blockquote, address, img, cite, ol, ul, dd, dl, dt, ul, li, fieldset, form, legend, table, tr, th, td, figure, figcaption {
  vertical-align:top;
  border:0em none;
  font-family:Inter, "Helvetica Neue", Helvetica, sans-serif;
  font-size:18px;
  line-height:27px;
  font-style:normal;
  color:#000;
  margin:0px;
  padding:0px;
  clear:none;
}

body {width:100%; height:100%; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#fff;}
header {width:100%; margin:0px 0px 24px; padding:0px 16px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center;}v
header a:link, header a:visited {color:#000;  border-bottom:0px none;}
header a:hover, header a:active {color:#666; border-bottom:0px none;}

article {width:100%; margin:0px 0px; padding:0px 16px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center;}
article {margin:6px auto;}
article.black {background:#000; padding:20px 16px 10px;}



h1, h2, h3, p, blockquote, ul, outline {width:100%; max-width:720px; margin:0px auto 16px; box-sizing:border-box;}
img {max-width:720px; margin:0px auto 16px;}
h1 {margin:0px auto 32px; text-align:center; font-size:38px; line-height:44px;}
h2 {margin:16px auto 4px; text-align:center; font-size:28px; line-height:40px;}
h3 {margin:0px auto 4px; text-align:center; font-size:20px; line-height:32px;}

ul, ol {margin:-5px 0px 16px 0px; padding:0px 0px 0px 40px;}
li {width:100%; margin:0px 0px 10px 0px;}

.video {width:100%; max-width:720px; margin:0px auto 16px; box-sizing:border-box;}

.desktop {display:block;}
.mobile {display:none;}

.comment {color:#999; font-size:0.8em; box-sizing:border-box;}
.center {text-align:center;}
.right {text-align:right;}

.red {margin:0px auto 16px; padding:20px; box-sizing:border-box; background:#f9ecf4; border-radius:8px;}
.green {margin:0px auto 16px; padding:20px; box-sizing:border-box; background:#eef6f5; border-radius:8px;}
.yellow {margin:0px auto 16px; padding:20px; box-sizing:border-box; background:#fdfbe7; border-radius:8px;}
.blue {margin:0px auto 16px; padding:20px; box-sizing:border-box; background:#ecf5f9; border-radius:8px;}
.gray {margin:0px auto 16px; padding:20px; box-sizing:border-box; background:#f0f0f0; border-radius:8px;}

.white {color:#fff;}
.white a {text-decoration:none; color:#fff; border-bottom:1px solid #fff;}
.white a:link {color:#fff;  border-bottom:1px solid #fff;}
.white a:visited {color:#fff; border-bottom:1px solid #fff;}
.white a:hover, .white a:active {color:#d00; border-bottom:1px solid #d00;}

button {width:auto; margin:0px 0px; padding:8px 20px; border:0px none; border-radius:4px; background:#ffdb4d;  color:#333; line-height:22px; font-size:16px; cursor:pointer;}
button:hover, button:active {background:#fd0; color:#000;}

button.gray {background:#fff;}
button.gray:hover {background:#e3e3e3; color:#000;}


ul.header {width:100%; list-style:none; padding:8px 0px; margin:0px; border-bottom:1px solid #000; float:left; position:relative;}
ul.header li {width:auto; padding:2px 0px; margin:0px; float:right; position:relative; white-space:nowrap; font-size:17px; line-height:20px; font-family:Georgia, "serif";}
ul.header li.button {float:right; padding:2px 0px 2px 10px;}
ul.header li.button button {margin:0px;}
ul.header li.hamburger {position:absolute; top:8px; right:0px;}
ul.header li.logo {padding:2px 0px 2px 46px; min-width:160px; border:0px none; float:left;}
ul.header li.logo img {position:absolute; top:2px; left:-2px;}
ul.header li.logo span {font-weight:bold; font-size:20px;}


.nav {width:100%; list-style:none; padding:8px 0px; margin:0px auto; border-bottom:1px solid #000; display:flex; flex-direction:row; justify-content:space-around; align-items:center;}
.nav li {width:auto; padding:2px 0px; margin:0px; white-space:nowrap; font-size:17px; line-height:20px; font-family:Georgia, "serif";}


ul.flex {width:100%; list-style:none; padding:0px 0px; margin:16px 0px; display:flex; flex-direction:row; justify-content:space-between;}
ul.flex li {width:32%; padding:10px 0px; margin:0px 0px; float:left; background:#fff; color:#000; border-radius:5px; display:flex; flex-direction:column; justify-content:center; align-items:center;}
ul.flex li button {font-size:1.2em; line-height:1.2em; display:block; position:relative; margin:0px auto 10px; padding:10px 24px;}

dl {width:100%; list-style:none; padding:0px 0px; margin:-12px 0px 0px; flex-direction:column; justify-content:center; align-items:center;}
dl dt {width:94%; padding:18px 0px 0px; margin:0px 3%; font-size:0.9em; line-height:1.8em;}
dl dd {width:94%; padding:0px 0px; margin:0px 3%; font-size:0.9em; line-height:1.8em;}

div.menu {display:none; position:absolute; top:18px; right:20px; padding:8px 16px; background:#fff; border-radius:4px; box-shadow:-1px 1px 7px rgba(0, 0, 0, .2); z-index:3;}
div.menu ul {list-style:none; padding:16px 0px; margin:0px; display:block;}
div.menu ul li {padding:0px 0px 0px 10px; margin:10px 0px; display:block; float:left; clear:both;}
div.menu ul li button {display:block; position:relative; margin:0px auto;}


#menu__toggle {display:none; opacity: 0;}
.menu__btn {display:none; align-items:center; position:absolute; top:10px; right:12px; width:26px; height:26px; cursor:pointer;}
.menu__btn > span, .menu__btn > span::before, .menu__btn > span::after {display:block; position:absolute; width:100%; height:2px; background-color:#000;}
.menu__btn > span::before {content:''; top:-8px;}
.menu__btn > span::after {content:''; top:8px;}
.background span {display:none; width:100%; height:100%; position:fixed; top:0px; left:0px; background:#999; z-index:2;}


@media (max-width:752px) {
  .desktop {display:none;}
  .mobile {display:block;}
  
  h1 {text-align:center; font-size:28px; line-height:38px; margin:0px 0px 20px;}
  h2 {text-align:center; font-size:24px; line-height:34px; margin:16px 0px 4px;}
  h3 {margin:0px auto 4px; text-align:center; font-size:18px; line-height:28px;}
  img {max-width:100%; margin:0px auto 16px;}
  ul, ol {margin:-5px 0px 16px 0px; padding:0px 0px 0px 32px;}
  li {margin:0px 0px 10px 0px;}
  
  #menu__toggle:checked ~ div.menu {display:block; right:2.5%;}
  #menu__toggle:checked ~ .background span {display:block; opacity:0.3;}
  
  .menu__btn {display:flex;}
  .menu .menu__btn > span {transform:rotate(45deg);}
  .menu .menu__btn > span::before {top:0; transform:rotate(0);}
  .menu .menu__btn > span::after {top:0; transform:rotate(90deg);}

  ul.flex {display:flex; flex-direction:column; justify-content:center;}
  ul.flex li {width:96%; min-width:300px; padding:10px 0px; margin:16px 2%;}
}