/* ibm-plex-serif-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  src: url('/font/ibm-plex-serif-v20-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: url('/font/ibm-plex-serif-v20-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/font/ibm-plex-serif-v20-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/font/ibm-plex-serif-v20-latin_latin-ext-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('/font/ibm-plex-serif-v20-latin_latin-ext-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('/font/ibm-plex-serif-v20-latin_latin-ext-regular.svg#IBMPlexSerif') format('svg'); /* Legacy iOS */
}


body {
font-family: 'IBM Plex Serif';
background: #eee;
}

hr {
display: none;
}

#page-content {
margin-top: 100px;
margin-left: 3%;
margin-right: 3%;
}

#page-head {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 17pt;
font-family: 'IBM Plex Serif';
flex-direction: column;
}

#page-head img {
width: 90%;
max-width: 600px;
height: auto;
border-radius: 30px;
}

.page-head-block {
text-align: center;
width: 100%
}

.page-chapter {
font-family: 'IBM Plex Serif';
font-size: 14pt;
}

@media (min-width: 1168px) {
  #page-head {
    flex-direction: row;
  }
  #phead-logo { order: 2; }
  #phead-1 { order: 1; }
  #phead-2 { order: 3; }
}

.rimg {
border-radius: 42%;
width: 100%;
max-width: 550px;
height: auto;
}

.imgtext-box {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.imgtext-s {
order: 2;
align-self: flex-start;
padding: 10px;
flex: 100%;
}

.imgtext-img, .imgtext-img-r {
order: 1;
text-align: center;
flex: 100%;
}

.imgtext-text, .imgtext-text-r {
order: 3;
text-align: left;
flex: 100%;
margin-bottom: 80px;
}

@media (min-width: 1168px) {
  .imgtext-img, .imgtext-img-r {
    flex: 29%;
  }
  .imgtext-s {
    flex: 2%;
  }
  .imgtext-text, .imgtext-text-r {
    flex: 66%;
    margin-bottom: initial;
  }
  
  .imgtext-img-r {
    order: 3;
  }
  .imgtext-text-r {
    order: 1;
  }
}

#nav {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
position: fixed;
align-items: center;
justify-content: center;
z-index: 200;
top: 0px;
left: 0px;
right: 0px;
background: #FFFFFFAA;
}

.navhead {
    display: inline;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 6px;
    margin-right: 8px;
    vertical-align: middle;
    padding: 0;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 22px;
    background: #8be;
    border-radius: 15px;
}

.navlink {
    display: inline;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: middle;
    padding: 0;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 20px;
    background: #8be;
    border-radius: 15px;
}

#nav a, .page-head-block a {
    color: #000;
    text-decoration: none;
}
#nav a:hover, .page-head-block a:hover {
    color: #52a;
    text-decoration: none;
}

#top-btn {
display: none;
position: fixed;
z-index: 201;
bottom: 25px;
right: 25px;
width: 64px;
height: 64px;
}

#top-btn img {
border-radius: 35%;
background: ##FF9200;
color: #FFF;
font-size: 50px;
}

@media screen {
#content-type img {
  filter: brightness(94%);
}
}

@media (max-width: 1000px) {
  #nav {
    position: static;
  }
  #top-btn {
    display: inline;
  }
}

@media print {
#nav {
display:none;
}
#top-btn {
display:none;
}
.navhead {
display:none;
}
.navlink {
display:none;
}
}