@charset "UTF-8";

section.overview ul, section.overview li, section.overview h3, section.overview h1, section.overview p  {
  margin: 0;
  padding: 0;
/*  word-break: break-word;*/
}

section.overview h1 {
  font-weight: 700;
}

section.overview li {
  font-weight: 400;
  list-style: none;

}

.join,
.up::after,
.down::before {
  background-position: 50% 50%;
}

.up::after,
.down::before {
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 20px;
}

.up::after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjQiIHZpZXdCb3g9IjAgMCA3IDQiPjxwYXRoIGZpbGw9IiM1NjZjN2YiIGQ9Ik0xIDRWM2gxVjJoM3YxaDF2MWgxVjJINlYxSDVWMEgydjFIMXYxSDB2MiIvPjwvc3ZnPg==);
}

.down::before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI3cHgiIGhlaWdodD0iNHB4IiB2aWV3Qm94PSIwIDAgNyA0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3IDQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiM1NjZjN2YiIHBvaW50cz0iNiwwIDYsMSA1LDEgNSwyIDIsMiAyLDEgMSwxIDEsMCAwLDAgMCwyIDEsMiAxLDMgMiwzIDIsNCA1LDQgNSwzIDYsMyA2LDIgNywyIDcsMCAiLz48L3N2Zz4=);
}

.join {
  background-repeat: repeat-y;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxcHgiIGhlaWdodD0iMXB4IiB2aWV3Qm94PSIwIDAgMSAxIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxIDEiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1NjZjN2YiIGQ9Ik0wLDBoMXYxSDBWMHoiLz48L3N2Zz4=);
}

.thin,
.thick {
  background: #ffffff;
}

.thin {
  border: 1px solid #b3b7c8;
  padding: 0.5em;
}

.thick {
  border: 3px solid #b3b7c8;
  padding: 0.5em;
  color: #566c7f;
  font-size: 1.25rem;
}

.main {
  text-align: center;
}
.main ul {
  display: block;
  width: 150px;
  margin: 1em auto 0 auto;
}

ul.row {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
ul.row li.page {
  flex: 1;
  margin: 0 0.5em;
  min-width: 280px;
}
ul.row li.page.stretch {
  align-self: stretch;
}
ul.row li.page:first-child {
  margin-left: 0;
}
ul.row li.page:last-child {
  margin-right: 0;
}
ul.row li.page h3 + ul.content {
  margin-top: 1.5em;
}
ul.row li.page ul.content li {
  border-top: 1px solid #b3b7c8;
  padding: 2px 5px;
}
ul.row li.page ul.content li.level-2 {
  padding: 2px 17px;
}
ul.row li.page ul.content li ul.section li {
  border-top: none;
  padding: 0;
}
ul.row li.page ul.content li ul.section li:before {
  content: "― ";
}

section.overview {
  background: #fafcff;
  transition: max-width 400ms ease-in-out;
/*  height: 100vh;*/
  padding: 20px;
  margin: auto;
  z-index: 99;
}
section.overview .thin h3 {
  will-change: auto;
  transition: transform 400ms ease-in-out;
  transform-origin: 0 50%;
}
section.overview .thin b {
  display: block;
  padding: 2px 5px;
}
section.overview .thin ul.content {
  transition: opacity 200ms ease;
  opacity: 1;
}

@media (max-width: 1480px) {
ul.row li.page {
  margin: 0 0;
}
}