/*!
 * Course Website Design
 * @author Alvin Wan
 * @site alvinwan.com
 * @license MIT
 */
* {
  font-family: 'Work Sans'; }

.wrap-container {
  text-align: center; }

.wrap {
  max-width: 60em;
  width: 80%;
  text-align: left;
  display: inline-block; }

.animate-3 {
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  transition: 0.3s ease; }

.animate-5 {
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  transition: 0.5s ease; }

.draft {
  color: red; }

header {
  padding: 2em 0; }
  header .header-title {
    margin: 0;
    padding: 0; }
    header .header-title a {
      color: #000;
      font-family: 'Raleway';
      font-size: 0.9em;
      font-weight: 300; }
  header nav {
    float: right; }
    header nav ul {
      float: right;
      padding: 0.5em 0; }
      header nav ul li {
        float: left;
        list-style: none; }
        header nav ul li a {
          font-family: 'Raleway';
          text-transform: uppercase;
          color: #000;
          letter-spacing: 0.05em;
          cursor: pointer; }
        header nav ul li a:hover {
          text-decoration: none;
          border-bottom: 1px dotted #000;
          color: #000; }
      header nav ul li + li {
        margin-left: 1em; }
  header .bars {
    width: 1.5em;
    display: inline-block; }
    header .bars .bar {
      height: 1px;
      width: 100%;
      background-color: #000;
      display: inline-block; }
    header .bars .bar + .bar {
      margin-top: 3px; }

aside.drawer {
  overflow: scroll;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  padding: 5em;
  box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.3); }
  aside.drawer h3 {
    font-size: 2em;
    font-weight: 300;
    font-family: 'Raleway';
    color: #000;
    margin-bottom: 1.5em; }
    aside.drawer h3 a {
      color: inherit;
      border-bottom: 1px dotted #000; }
    aside.drawer h3 a:hover {
      border-bottom: 1px solid #000;
      text-decoration: none; }
  aside.drawer ul li {
    color: #888;
    font-size: 1.1em;
    padding: 0.5em 0; }
    aside.drawer ul li a {
      border-bottom: 1px dotted #888; }
    aside.drawer ul li a:hover {
      color: #000; }

aside.drawer.active {
  top: 0;
  margin-top: 0; }

.x-container {
  height: 5em;
  z-index: 150; }

.x {
  float: left;
  clear: both;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 5em;
  height: 5em;
  margin-bottom: 0em;
  cursor: pointer; }
  .x .bar {
    height: 2px;
    width: 5em;
    background-color: #000;
    display: inline-block; }
  .x .outer.bar {
    margin-top: 2.5em; }
  .x .inner.bar {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg); }

.x:hover {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  transform: rotate(225deg); }

.notification {
  color: #fff;
  background-color: #7d9abc;
  width: 100%;
  text-align: center;
  padding: 2em 3em; }
  .notification p {
    margin: 0; }
  .notification a {
    color: inherit;
    border-bottom: 1px dotted #FFF; }
  .notification a:hover {
    border-bottom: 1px solid #FFF;
    text-decoration: none; }

footer.footer-links {
  padding: 3em 0 5em 0; }
  footer.footer-links h3 {
    font-size: 1.5em;
    font-weight: 300;
    font-family: 'Raleway';
    color: #000;
    margin-bottom: 1em; }
    footer.footer-links h3 a {
      color: inherit;
      border-bottom: 1px solid transparent; }
    footer.footer-links h3 a:hover {
      border-bottom: 1px solid #000;
      text-decoration: none; }
  footer.footer-links ul li {
    color: #888;
    font-size: 1em;
    padding: 0.25em 0; }
    footer.footer-links ul li a {
      border-bottom: 1px solid transparent; }
    footer.footer-links ul li a:hover {
      color: #000; }

.page-head {
  margin: 3em 0 2em 0; }
  .page-head p {
    margin-bottom: 0; }
  .page-head .head-subtitle {
    font-family: 'Work Sans';
    font-size: 1.2em; }
  .page-head .head-title {
    font-family: 'Raleway';
    font-weight: 300;
    font-size: 3em;
    padding: 0;
    margin: 0.25em 0; }
  .page-head .head-people {
    margin: 2em 0; }

div.person {
  padding: 0;
  float: left; }
  div.person .person-info, div.person .person-thumbnail, div.person .person-text {
    float: left; }
  div.person .person-thumbnail {
    width: 8em; }
    div.person .person-thumbnail .person-avatar {
      overflow: hidden;
      border-radius: 50%;
      height: 6em;
      width: 6em;
      margin: 1em 2em 1em 0; }
    div.person .person-thumbnail .person-image {
      height: 100%;
      width: 100%;
      display: inline-block; }
  div.person .person-name {
    font-size: 1.5em;
    font-family: 'Raleway';
    color: #888;
    font-weight: 300;
    margin-bottom: 0.25em; }
    div.person .person-name span {
      color: #000; }
    div.person .person-name a {
      border-bottom: 1px dotted #000;
      color: #000;
      font-weight: inherit; }
    div.person .person-name a:hover {
      border-bottom: 1px solid #000;
      text-decoration: none; }
  div.person .person-text {
    width: calc(100% - 9em); }
    div.person .person-text p {
      color: #888;
      font-size: 1.1em;
      margin: 0.1em 0; }
      div.person .person-text p span {
        color: #000; }

.row {
  width: 100%; }

.highlighted-text {
  margin: 2em 0; }
  .highlighted-text .wrap {
    position: relative;
    width: 100%;
    padding: 3em;
    background-color: #f6f6f6; }
  .highlighted-text .highlighted-subtitle {
    letter-spacing: 0.35em;
    color: #9e9e9e;
    text-transform: uppercase;
    font-size: 0.9em; }
  .highlighted-text .highlighted-title {
    text-transform: uppercase;
    font-weight: 300;
    font-family: 'Raleway';
    color: #000;
    font-size: 2.5em;
    margin: 0.5em 0 0.35em 0; }
  .highlighted-text .highlighted-byline {
    color: #999;
    margin: 0; }
  .highlighted-text .dividing-bar {
    height: 2px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin: 2em 0;
    color: #666; }
  .highlighted-text .prev, .highlighted-text .next {
    position: absolute;
    z-index: 50;
    font-size: 2em;
    background-color: #f6f6f6;
    margin: -1em -0.5em;
    top: 3.5em;
    cursor: pointer;
    color: #ccc; }
  .highlighted-text .prev:hover, .highlighted-text .next:hover {
    color: #999; }
  .highlighted-text .prev {
    left: 0;
    padding: 0.75em 0.75em 0.75em 1em; }
  .highlighted-text .prev:hover {
    left: -0.25em; }
  .highlighted-text .next {
    right: 0;
    padding: 0.75em 1em 0.75em 0.75em; }
  .highlighted-text .next:hover {
    right: -0.25em; }

.highlighted-text.inactive {
  display: none; }

.standard-text {
  margin: 0; }
  .standard-text .standard-title {
    padding-top: 1em;
    font-weight: 300;
    font-family: 'Raleway';
    font-size: 2.5em;
    margin: 0 0 0.25em 0;
    width: 100%; }
    .standard-text .standard-title a {
      color: #000; }
    .standard-text .standard-title a:hover {
      text-decoration: none; }
  .standard-text .standard-title + p {
    margin-bottom: 2em; }
  .standard-text h3 {
    font-family: 'Raleway';
    font-weight: 300; }
  .standard-text .standard-title + p, .standard-text .copy p {
    font-size: 1.1em;
    line-height: 150%; }
  .standard-text blockquote {
    font-size: 1em; }
  .standard-text .extra p {
    margin: 0;
    color: #999; }
    .standard-text .extra p span {
      color: #666; }

.staff-page .standard-title {
  float: left; }

ul.lists {
  padding: 0;
  overflow: hidden; }
  ul.lists li {
    color: #000;
    padding: 0.2em 0;
    font-size: 1.1em;
    list-style: none;
    margin: 0; }
    ul.lists li a {
      color: inherit;
      border-bottom: 1px dotted #000; }
    ul.lists li a:hover {
      text-decoration: none;
      border-bottom: 1px solid #000; }
  ul.lists li.inactive {
    color: #ccc; }

.trigger {
  width: 100%;
  background-color: #f6f6f6;
  padding: 1em 2em;
  color: #666;
  text-transform: uppercase;
  text-align: center; }

.trigger:hover {
  background-color: #eee;
  color: #333;
  cursor: pointer; }

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .highlighted-text div.wrap {
    padding: 3em 5em;
    width: 80%; } }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .lists.two-col {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2; } }

/* Large devices (large desktops, 1200px and up) */
.live-bar {
  background-color: #000;
  color: #fff;
  width: 100%;
  height: 3em;
  overflow: hidden;
  padding: 0.5em 0;
  font-size: 1em;
  line-height: 2em; }
  .live-bar li {
    display: inline-block;
    margin: 0 2em; }