body.chapters-show {
  section.container {
    background: image-url('chapter_bg.png');
    background-repeat: repeat-x;
    background-size: contain;
    padding-top: 0px;

    header {
      padding: 60px 0px 10px;
    }

    .inactive-notice {
      margin: 2em 1em;
      border: $pink solid 2px;
      background: #fff;
      padding: 10px;
      color: $lighter-base-font-color;
      font: normal 14px/22px $sans-serif;

      strong {
        display: block;
        margin-bottom: 0.5em;
      }
    }

    .title-wrapper {
      max-width: $maximum-width;
      width: 100%;

      .title {
        margin-right: 1.5em;
        margin-left: 1.5em;      
        border-bottom: 1px solid rgb(200,200,200); 
        padding-bottom: 10px;

        h1 {
          color: rgba(55,55,55, 1);
          font: 900 38px/44px $sans-serif;
          margin: 0px;
          text-transform: uppercase;
        }

        a.edit-chapter {
          @include button(rgb(240,240,240));
          margin: 6px;
          text-decoration: none;
          padding: 7px 12px 6px;
          font-size: 0.8em;
        }

        a.apply-chapter {
          @include button(pill, $button-pink);
          margin: 6px;
          text-decoration: none;
          padding: 7px 12px 6px;
          font-size: 0.8em;
        }

        a.external {
          background: transparent;
          display: block;
          height: 25px;
          margin: 6px;
          opacity: 0.7;
          position: relative;
          width: 25px;

          &:hover {
            opacity: 1;
          }

          &:active {
            top: 1px;
          }

          &.twitter {
            background: image-url('twitter.png');
          }

          &.facebook {
            background: image-url('fb.png');
          }

          &.email {
            background: image-url('mail.png');
          }

          &.blog {
            background: image-url('blog-2.png');
          }

          &.instagram {
            background: image-url('instagram.png');
          }
        }
      }
    }
  }
  
  .owl-stage {
    margin: 0 auto;
  }

  .owl-dots-wrapper {
    margin-top: 20px;

    .owl-dots{
      width: 100%;
    }

    .owl-dots, .owl-nav-round {
      text-align: center;
      -webkit-tap-highlight-color: transparent;
    }

    .owl-dots .owl-dot {
      display: inline-block;
      zoom: 1;
    }

    button.owl-dot {
      outline: 0 none;
      cursor: pointer;
      background: 0 0;
      color: inherit;
      border: none;
      padding: 0!important;
      font: inherit;
    }

    .owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span {
      background: #869791;
    }

    .owl-dots .owl-dot span {
      width: 10px;
      height: 10px;
      margin: 5px 7px;
      background: #D6D6D6;
      display: block;
      -webkit-backface-visibility: visible;
      transition: opacity 0.2s ease;
      border-radius: 30px;
    }
  }

}

.chapter-header-wrapper {
  position: relative;
  margin-top: 2em;
  margin-left: 1.5em;
  margin-right: 1.5em;

  &:hover {
    .owl-nav-round button {
      opacity: 1;
    }
  }
  
  .chapter-projects.touch-device {
      .owl-nav-round button {
        display: none !important;
      }
  }

  .owl-nav-round button {
    outline: 0 none;
    cursor: pointer;
    display: block;
    background: rgba(0,0,0, 0.6);
    background-position: center center;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 50px;
    height: 100px;
    width: 100px;
    opacity: 0;
    position: absolute;
    @include transition((opacity, background-color), 0.2s, ease-out);
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    z-index: 3;

    &:hover {
      background-color: rgba($pink, 1);
    }

    &.owl-nav-left {
      background-image: image-url('arrow_left.png');
      background-size: 50%;
      left: 60px;
    }

    &.owl-nav-right {
      background-image: image-url('arrow_right.png');
      background-size: 50%;
      right: -40px;
    }

    &.disabled {
      display: none;
    }
  }

  
  .chapter-projects {
    white-space: nowrap;
    overflow: hidden;

    .project {
      background: transparent;

      a {
        text-decoration: none;
      }

      .image-wrapper {
        height: 100%;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        width: auto;
        z-index: 1;

        .project-name {
          background: rgba(0,0,0, 0.5);
          @include box-sizing(border-box);
          padding: 10px;
          position: absolute;
          bottom: 0px;
          width: 100%;
          white-space: normal;

          h2 {
            color: rgb(255,255,255);
            font: normal 26px $sans-serif;
            margin: 0px;
            text-transform: uppercase;
          }

          span {
            color: rgba(255,255,255, 0.7);
            margin-right: 10px;
            font-size: 0.8em;
            line-height: 1.4em;
          }
        }

        &:hover {
          .project-name {
            background: rgba($pink, 1);

            span {
              color: $base-font-color;
            }
          }
        }

        img {
          display: block;
          margin: 0px;
          max-width: 100%;
        }
      }
    }
  }
}

.chapter-info {
  max-width: $maximum-width;
  width: 100%;
  margin-top: 40px;

  h2 {
    font: normal 18px/22px $sans-serif;
    margin-bottom: 15px;
    text-transform: uppercase;
  }

  .divider {
    border-bottom: 1px solid rgb(200,200,200);
  }

  .trustees {    
    padding-bottom: 40px;
    margin-left: 1.5em;
    margin-right: 1.5em;
    max-width: grid-width(12);
    border-bottom: 1px solid #c8c8c8;

    h2 {
      border-bottom: 1px solid rgb(200,200,200);
      padding-bottom: 15px;
    }
    
    ol {
      @extend .clearfix;
      margin: 0px;

      li {
        float: left;
        list-style: none;
        margin: 0 8px 16px 8px;
        max-width: grid-width(2);

        article.dean {
          div.hat {
            background: image-url('dean-hat.png');
            background-position: top center;
            background-repeat: no-repeat;
            height: 94px;
            left: -42px;
            position: absolute;
            top: -40px;
            width: 151px;
            z-index: 10;
          }
        }

        article.trustee {
          position: relative;

          a {
            text-decoration: none;

            div.avatar {
              @extend .user-avatar;
            }

            .trustee-details {
              background: rgba($pink, 0.9);
              border: 1px solid rgba($pink, 1);
              border-radius: 2px;
              box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3);
              opacity: 0;
              padding: 8px;
              position: absolute;
              top: 80px;
              max-width: grid-width(2);
              z-index: 3;

              h3 {
                color: rgb(255,255,255);
                font: 300 14px/16px $sans-serif;
                margin: 0px;
                text-transform: uppercase;
                text-align: center;
              }
            }

            &:hover {
              div.avatar {
                box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
                top: -5px;
              }

              div.hat {
                top: -45px;
              }

              .trustee-details {
                opacity: 1;
              }
            }
          }
        }

        &:nth-child(even) {
          a:hover {
            .trustee-details {
              left: -4px;
              @include transform(rotate(-10deg));
            }
          }
        }

        &:nth-child(odd) {
          a:hover {
            .trustee-details {
              left: -12px;
              @include transform(rotate(7deg));
            }
          }
        }
      }
    }
  }

  .description {
    margin-bottom: 40px;
    margin-left: 1.5em;
    margin-right: 1.5em;

    article {
      h2 {
        font: normal 18px/22px $sans-serif;
        margin-bottom: 15px;
        text-transform: uppercase;
      }

      p, li {
        color: $lighter-base-font-color;
        font: normal 14px/22px $sans-serif;
      }

      &.rss-feed {
        margin-top: 24px;
      }

      ul {
        margin-left: 1em;
      }
    }
  }

  ol.feed {
    margin: 0px;
    padding: 0px 0px 30px;

    li {
      list-style: none;
      margin-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;

      &:last-child {
        margin: 0px;
      }

      span.post-date {
        margin-right: 12px;
        font: normal 14px/20px $serif;
      }

      a {
        color: $lighter-base-font-color;
        font: normal 14px/20px $sans-serif;
        text-decoration: none;

        &:hover {
          color: $pink;
        }
      }
    }
  }
}

.chapter-apply {
  padding-top: 40px;
  max-width: $maximum-width;
  width: 100%;

  .apply-button {
    max-width: grid-width(6);
    width: 100%;

    a {
      @include button(pill, $button-pink);
      margin-left: 1.5em;
      margin-right: 1.5em;
      font: normal 18px/22px $sans-serif;
      max-width: 100%;
      display: block;

      text: {
        decoration: none;
        align: center;
        transform: uppercase;
      }
    }
  }
}

/**********************************************/
/*               Responsiveness               */
/**********************************************/

@media (max-width:31.1em) {
  .chapter-info {
    .trustees {
      ol {
        li {          
          transform: scale(0.9);
        }
      }
    }
  }
}

@media (max-width:21.8em) {
  .chapter-info {
    .trustees {
      ol {
        li {
          margin: 0px;
          transform: scale(0.8);
        }
      }
    }
  }
}