div.aboutPageWrap{
    margin: 0 auto 0 300px;
    max-width: 960px;
    font-family: 'Gill Sans', 'Open Sans', sans-serif;
    font-size: 0;
    padding-bottom: 20px;
    padding: 0 10px 20px 10px;
}

div.contentsWrap{
  position: fixed;
  top: 30px;
  left: 0;
  width: 300px;
  height: calc(100vh - 30px);
  padding: 70px 10px 10px 10px;
  box-sizing: border-box;
  overflow-y: scroll;
}

p.bodyText>span {
  border: none;
}

h1 {
  padding: 10px 0;
  font-size: 40px;
}

h2 {
  padding: 10px 0;
  font-size: 30px;
}

h3 {
  padding: 10px 0;
  font-size: 20px;
}

.rid:not(.markerIcon), .sec:not(.markerIcon), .g:not(.markerIcon) {
  border: none;
}

div.aboutMarkerRow {
  width: 100%;
  min-height: 100px;
  font-size: 0;
}

div.markerWrap.aboutMarker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 49px;
  height: 47px;
  transform: translate(-50%, -50%);
}

div.markerWrap.aboutMarker>div.markerIcon {
  top: 0;
  left: 0;
}

div.aboutMarkerWrap, div.aboutMarkerTextWrap {
  display: inline-block;
  vertical-align: middle;
}

div.aboutMarkerWrap {
  width: 100px;
  min-height: 100px;
  position: relative;
}

div.aboutMarkerTextWrap {
  width: calc(100% - 100px);
  height: auto;
  min-height: 100px;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}

div.aboutMarkerTextWrap>p.bodyText {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

ul.contentsList, ul.aboutList {
  font-family: 'Gill Sans', 'Open Sans', sans-serif;
  font-weight: 300;
  list-style-type: disc;
  font-size: 18px;
  padding-left: 25px;
  margin: 10px 0;
}

ul.contentsList li>a {
  text-decoration: none;
}

ul.contentsList li>a:hover {
  color: #ff9900;
}

ul.contentsList li>a.rid:hover, a.ridLink:hover {
  color: #e87e04;
}

ul.contentsList li>a.sec:hover, a.secLink:hover {
  color: #2980b9;
}

ul.contentsList li>a.g:hover, a.medLink:hover {
  color: #27ae60;
}

ul.contentsList li {
  list-style: none;
}

ul.contentsList>li>a {
  font-size: 28px;
  text-decoration: none;
  color: #333333;
}

ul.contentsList>li>ul>li>a {
  font-size: 24px;
  color: #7f8c8d;
}

ul.contentsList>li>ul>li>ul>li>a {
  color: #95a5a6;
  font-size: 22px;
  font-style: italic;
}

ul.aboutList {
  list-style-type: none;
}

ul.aboutList li {
  padding: 5px 0;
  min-height: 25px;
  line-height: 25px;
}

ul.aboutList>li>span {
  border: none;
}
@media only screen and (max-device-width: 880px) {
  div.aboutMarkerWrap{
    display: block;
  }
  div.aboutMarkerTextWrap{
    min-height: 0;
    width: 100%;
  }
  div.aboutMarkerTextWrap>p.bodyText {
     position: static;
     top: initial;
     transform: none;
  }
}
@media only screen and (max-device-width: 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
  div.contentsWrap>h1{
    font-size: 35px;
  }
  div.contentsWrap{
    width: 200px;
    z-index: 1;
  }
  div.aboutPageWrap{
    margin-left: 200px;
    z-index: -1;
  }
}
@media only screen and (max-device-width: 480px) {
  div.contentsWrap>h1{
    font-size: 40px;
  }
  div.contentsWrap{
    position: static;
    height: auto;
    width: auto;
    padding: 0;
  }
  div.aboutPageWrap{
    margin: 0 auto;
    padding-top: 25px;
  }
}