/* VARIABLES */
/* MIXINS */
/* --- GLOBAL --- */
body {
  background: #ffffff;
}
/* For modern browsers */
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.col {
  min-width: 243px;
}
/* LINKS */
a {
  color: white;
  background-color: rgba(51, 51, 51, 0.9);
}
a:hover {
  text-decoration: underline;
}
a.red-link,
a.red-link > * {
  color: white;
  background-color: rgba(102, 0, 0, 0.65);
}
p a,
#TOC a,
#headline a {
  display: inline-block;
  padding: 0 3px;
}
span.note a {
	display: inline;
	padding: 4px;
}
#TOC ul li a {
  color: white;
  display: inline-block;
  background-color: rgba(51, 51, 51, 0.9);
  border-bottom: 1px solid #FFF;
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
#TOC ul li a:after {
  content: " ";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border-bottom: 1px solid #555;
}
#TOC ul li:last-child a {
  border-bottom: none;
}
#TOC ul li:last-child a:after {
  border-bottom: none;
}
/* TYPOGRAPHY */
body {
  font-family: "ff-meta-web-pro", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 48px 0px 24px 0px;
}
h1 {
  font-size: 32px;
  letter-spacing: 1px;
  line-height: 48px;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child {
  margin-top: 0px;
}
h2 {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 24px;
}
h3 {
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 24px;
}
h4 {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 24px;
}
p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 24px;
}
.note {
  color: #555;
  font-style: italic;
  font-size: 11.200000000000001px;
}
/* BX SLIDER */
#text blockquote {
  width: 100%;
  height: auto;
}
.bx-prev {
  margin-right: 100px;
}
.bx-pager {
  margin-bottom: 3px;
}
a.pager-link {
  color: #000;
  margin-right: 7px;
  background: none;
}
a.pager-link.pager-active {
  color: #FFF;
  background: rgba(51, 51, 51, 0.9);
}
/* ====================
    MOBILE
   ==================== */
#header {
  position: relative;
  min-height: 112px;
  z-index: 400;
  border-bottom: 1px solid #000;
  padding: 0px 2% 24px 2%;
}
#header h3 {
  margin: 0px;
}
#wordmark {
  width: 100%;
  height: auto;
}
#scroller {
  height: 225px;
  border-bottom: 1px solid #000;
  z-index: 300;
  overflow: hidden;
}
#scroller .bx-wrapper,
#scroller .bx-window {
  height: 225px !important;
}
.main-index {
  width: 96%;
  padding: 0px 2%;
  z-index: 200;
}
.index-child {
  background: #FFF;
  list-style: none;
  float: left;
  width: 100%;
  height: 225px;
  margin-top: 24px;
  position: relative;
}
.index-child h1 {
  position: absolute;
  bottom: 0px;
}
#TOC {
  float: left;
  width: 96%;
  padding: 0px 2%;
  margin-top: 1em;
  clear: both;
}
#floating_contents {
  background: #ffffff;
  width: inherit;
}
#content {
  margin-top: 24px;
  padding-bottom: 72px;
  background: #ffffff;
  float: left;
}
#text {
  float: right;
  width: 96%;
  padding: 0px 2%;
}
#margin {
  width: 96%;
  padding: 0px 2%;
  margin-top: 1em;
  float: left;
}
#text img {
  width: 100%;
  height: auto;
}
#text blockquote img.portrait {
  height: 500px;
  width: auto;
  margin: auto;
}
@media only screen and (min-width: 464px) {
  /* TWO COLUMN */
  #container {
    width: 474px;
    margin: 0px auto;
  }
  #header {
    padding: 0px;
  }
  #TOC,
  #text,
  #margin {
    margin: 0px;
    clear: both;
    width: 474px;
    padding: 0px 0px;
  }
  #TOC,
  #margin {
    margin-top: 24px;
  }
  .main-index {
    width: 100%;
    padding: 0px;
  }
  .index-child {
    width: 225px;
    margin-left: 24px;
  }
  .index-child:first-child {
    margin-left: 0px;
  }
  .index-child:nth-child(2n + 1) {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 703px) {
  /* THREE COLUMN */
  #container {
    width: 723px;
    margin: 0px auto;
  }
  #wordmark {
    width: 225px;
    margin-right: 24px;
    float: left;
    clear: none;
  }
  #headline {
    float: right;
    width: 474px;
  }
  #TOC {
    width: 225px;
    margin-right: 24px;
  }
  #floating_contents {
    position: fixed;
  }
  #text blockquote {
    width: 474px;
    height: auto;
  }
  #text blockquote img {
    position: static;
    right: auto;
  }
  #text .bx-wrapper,
  #text .bx-window {
    width: 474px !important;
    /* max-height:344px; */
  }
  .index-child:nth-child(2n + 1) {
    margin-left: 24px;
  }
  .index-child:nth-child(3n + 1) {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 942px) {
  /* FOUR COLUMN */
  #container {
    width: 972px;
    margin: 0px auto;
  }
  #headline {
    width: 723px;
    margin-top: 16px;
  }
  #margin {
    margin-top: 0px;
    width: 225px;
    margin-right: 24px;
    clear: none;
  }
  .note {
    position: absolute;
    left: 0px;
    width: 225px;
  }
  .index-child:nth-child(3n + 1) {
    margin-left: 24px;
  }
  .index-child:nth-child(4n + 1) {
    margin-left: 0px;
  }
  #content {
    position: relative;
  }
  #text img {
    width: 723px;
    height: auto;
    position: relative;
    right: 249px;
  }
  #text blockquote {
    width: 723px;
  }
  #text .bx-wrapper {
    position: relative;
    right: 249px;
  }
  #text .bx-wrapper,
  #text .bx-window {
    width: 723px !important;
    min-height: 474px;
  }
}