// PLEASE DON'T EDIT THIS FILE. EDIT custom.less INSTEAD.

/* General View Styles */
.view {
  .group,
  .views-field-edit-node {
    clear: both;
  }
  .view-header {
    margin-bottom: 20px;
  }
  .group {
    margin-bottom: 30px;
    overflow: hidden;
    h3 {
      .body-size-plus3;
      margin-top: 0;
    }
    .parent {
      .body-size-plus3;
      line-height: 1.16;
      margin-bottom: 4px;
    }
  }

  /* One column */
  .views-row {
    clear: both;
    // width: 100%;
    margin: 0 0 15px 0;
    overflow: hidden;

    // Clear fixes for Bootstrap grid classes to be used in the
    // Unformatted list settings in the view

    // 4-col
    &.col-sm-3, &.col-md-3, &.col-lg-3 {
      &:nth-of-type(4n+1) {
        clear: left;
      }
    }
    // 3-col
    &.col-sm-4, &.col-md-4, &.col-lg-4  {
      &:nth-of-type(3n+1) {
        clear: left;
      }
    }
    // 2-col
    &.col-sm-6, &.col-md-6, &.col-lg-6  {
      &:nth-of-type(2n+1) {
        clear: left;
      }
    }

  }

  /* Two column */
  /* Add row class 'two-column' under OTHER->CSS Class to use. */
  &.two-column .views-row {
    float: left;
    clear: none;
    width: 48%;
    margin-right: 4%;
  }

  &.two-column .views-row:nth-of-type(2n) {
    margin-right: 0;
  }
  &.two-column .views-row:nth-of-type(2n+1) {
    clear: both;
  }

  /* Three column */
  /* Add row class 'three-column' under OTHER->CSS Class to use. */
  &.three-column .views-row {
    float: left;
    clear: none;
    width: 31%;
    margin-right: 3.5%;
  }

  &.three-column .views-row:nth-of-type(2n) {
      margin-right: 0;
  }

  &.three-column .views-row:nth-of-type(2n+1) {
      clear: both;
  }

  /* Five column  */
  /* Add row class 'five-column' under OTHER->CSS Class to use. */
  &.five-column .views-row {
    float: left;
    clear: none;
    width: 48%;
    margin-right: 4%;
  }

  &.five-column .views-row:nth-of-type(2n) {
    margin-right: 0;
  }

  &.five-column .views-row:nth-of-type(2n+1) {
    clear: both;
  }

  /* List with alternating row colors */
  /* Add row class 'list' under OTHER->CSS Class to use */
  &.list .views-row {
    background: #fff;
    padding: 0;
    margin: 0 0 5px;
  }

  &.list .views-row:nth-of-type(even) {
    background: @pitt-tan;
  }
  .flexslider {
    position: relative;
    border: 0;
    background: transparent;
    margin: 0;
    box-shadow: none;
    a {
      color: @light-blue;
    }
    img {
      width: auto;
      margin: 0 auto;
      position: relative;
      top: 0;
      z-index: 1;
    }
  }
  // Home page Three Item Block slider
  &-slider {
    .flexslider {
      a {
        color: @bright-blue;
        &:hover {
          color: @pitt-blue;
        }
      }
    }
  }
  /* Home Page News & Events general */
  &-home-page-news-and-events {
    &.two-column {
      .views-row {
        width: 100%;
      }
    }
    .block-title {
      max-width: 350px;
      padding: 0;
      margin: 0 0 25px;
      .body-size-plus4;
      line-height: 1.2;
    }
    .view {
      &-news-story {
        margin-bottom: 40px;
      }
      &-events {
        .views-field {
          &-nothing {
            color: #fff;
            float: left;
            width: 36px;
            background: @brand-primary;
            padding: 3px 5px;
            text-align: center;
            .month {
              font-size: 11px;
              line-height: 1.14;
              text-transform: uppercase;
              position: relative;
              top: 2px;  
            }
            .date {
              .body-size-plus2;
              line-height: 1.25;
            }
          }
          &-event-mandatory {
            overflow: hidden;
            margin-left: 51px;
            div {
              float: left;
              clear: both;
              padding: 5px 8px;
              .body-size-minus;
                line-height: 1;
                color: #fff;
                text-transform: uppercase;
                background: @brand-danger;
              }            
            }
          &-title, &-edit-node {
            margin-left: 51px;
          }
        }
      }
    }
    /* Home Page News & Events two-column */
    &.two-column {
      > .view-content > .views-row {
        width: 100%;
        overflow: visible;
        > .views-field {
          &:before {
            content: "";
            display: inline-block;
            border-top: 10px solid @brand-primary;
            width: 100%;
          } 
        }
      }
      .view {
        &-header {
          display: none;
        }
        &-footer {
          .display;
          .body-size-minus;
          text-transform: uppercase;
          letter-spacing: 0.025em;
          font-weight: 400;
        }
      }
      .views-field {
        &-field-image {
          margin-bottom: 10px;
        }
      }
    }
    /* Home Page News & Events stacked */
    &.stacked {
      > .view-content > .views-row > .views-field {
        &:before {
          content: "";
          display: inline-block;
          border-top: 10px solid @brand-primary;
          width: 50%;
        } 
      }
      .view {
        &-header, &-content {
          padding: 0;
        }
        &-header {
          display: block;
          position: relative;
          float: right;
          top: -50px;
          margin-bottom: -22px;
          a {
            .display;
            .body-size-minus;
            line-height: 1;
            font-weight: 400;
            &:after {
              display: inline-block;
              margin-left: 2px;
              color: @brand-info;
              text-transform: uppercase;
            }          
          }
        }
        &-footer {
          display: none;
        }
      }
      .views-field {
        &-field-image {
          max-width: 350px;
          height: auto;
        }
      }
    }
    // Four Item Home Page Block
    &.four-items {
      margin-top: -9px;
      .view-header {
        margin-bottom: 0;
        top: 0;
        float: none;
        .field-body {
          margin: 20px 0 40px;
        }
      }
      .block-title {
        display: inline-block;
        margin: 0 0 20px;
        max-width: 100%;
        font-weight: 300;
        &:before {
          content: "";
          border-top: 10px solid #1c2b55;
          width: 100%;
          display: inline-block;
          padding-bottom: 7px;
        }
      }
      .views-field {
        border-top: none !important;
      }
      h3 {
        margin: 10px 0 10px;
        font-weight: 300;
      }
    }
  }
  /* Events view page */
  &-events {
    &.view-display-id-page {
      .view-filters {
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e8f0f7;
      }
      .views-row {
        margin-bottom: 30px;
        .views-field {
          &-title, &-field-date {
            margin-left: 50px;
          }
        }
      }
      .event {
        &--date {
          float: left;
          background: @pitt-blue;
          padding: 0 6px;
          margin-right: 10px;
          color: #fff;
          transition: .1s ease;
          width: 36px;
          &_month {
            font-size: 11px;
            text-transform: uppercase;
            position: relative;
            top: 3px;
          }
          &_day {
            font-size: 22px;
            font-weight: 400;
          }
        }
      }     
    }
    .views-field {
      &-field-date {
        .body-size-minus;
      }
      &-field-event-mandatory {
        .body-size-minus2;
        line-height: 1;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
        float: left;
        clear: both;
        padding: 5px;
        margin-top: 3px;
        background: @brand-danger;
      }
      &-field-image {
        max-width: 350px;
        margin: 5px 0;
      }
    }
  }
  /* News view page */
  &-news-story {
    &.view-display-id-page {
      .views-field {
        &-field-date {
          .body-size-minus;
        }
        &-field-image {
          max-width: 350px;
          margin: 5px 0;
        }
      }
    }
  }
  /* People view pages */
  &-people {
    .layout-buttons {
      display: block;
      float: right;
      position: relative;
      top: -57px;
      margin-bottom: -27px;
      .grid, .list {
        display: inline-block;
        width: 35px;
        height: 27px;
        text-indent: -9999px;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        outline: none;
      }

      .grid {
        background-image: url(../img/grid-off.png);
      }
      .grid:hover,
      .grid.on {
        background-image: url(../img/grid-on.png);
      }
      .list {
        background-image: url(../img/list-off.png);
      }
      .list:hover,
      .list.on {
        background-image: url(../img/list-on.png);
      }
    }
    .people-filter {
      .body-size-minus;
      line-height: 1;
      color: @brand-primary;
      text-shadow: 0 0 0 #000;
      display: block;
      float: right;
      position: relative;
      width: 195px;
      height: 27px;
      margin-bottom: 30px;
      padding: 5px 9px;
      background-image: url(../img/select-arrow.png);
      background-position: right center;
      background-repeat: no-repeat;
      background-color: @gray-lighter;
      background-size: auto 100%;
      border: none;
      border-radius: 0;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      option {
        border: none;
      }      
    }
    .view-display-id-attach_staff_chair,
    .view-display-id-attach_staff_chair.list {
      .views-row {
        width: 100% !important;
        margin: 0 0 40px;
        /* Blue row background */
        /* Add row class 'blue' under Format->Format->Settings->Row class to use */
        &.blue {
          padding: 15px;
          margin: 0;
          background: #e8f0f7;        
        }
      }
      .views-field {
        .body-size-minus;
        line-height: 1.46;
        &-field-person-img {
          float: left;
          width: 40%;
          margin-right: 4%;
          .img-overlay {
            top: -140px;
            height: 140px;
            a {
              .body-size;
              height: 140px;
              padding-top: 85px;
            }
          }
          img {
            width: 100%;
            height: auto;
          }
        }
        &-field-title {
          .body-size;
          line-height: 1.125;
          position: relative;
          top: -3px;         
        }
      }
    }
    .views-field, .views-field p {
      .body-size-minus;
      line-height: 1.3;
      &-field-person-img {
        position: relative;
        .img-overlay {
          display: none;
        }       
      } 
      &-title {
         margin-bottom: 4px;
        .body-size-minus;
        line-height: 1.25;     
        font-weight: bold;  
      }
      &-field-research {
        margin-top: 4px;
        .views-label {
          font-weight: 600;
        }
      }
    }
    &.five-column .view-content {
      .views-row {
        .views-field {
          &-field-person-img {
            margin-bottom: 6px;
          }
        }
      }
    }
    &.list .view-content {
      .views-row {
        background: @gray-light;
        &.views-row-even {
          background: @gray-lighter;
        }
        .views-field {
          margin-left: 36.5%;
          &-field-person-img {
            float: left;
            width: 33%;
            margin-right: 10px;
            margin-left: 0;           
          }
        }
      }
    }
    .text-center {
      clear: both;
    }
  }
  /* Social media */
  &-social-media-icons {
    padding: 0 0 15px;
    .views {
      &-row {
        display: inline-block;
        clear: none;
        width: auto;
        margin: 0;
      }
      &-field-nothing {
        a {
          color: #fff;
          text-align: center;
          //nonstandard units for this icon font
          font-size: 20px;
          line-height: 25px;
          height: 25px;
          width: 25px;
          display: block;
          &:hover {
            color: @light-yellow;
          }
        }       
      }
    }
  }
  &-landing-page-breakouts {
    .field {
      &-section {
        // legacy styles for basic formatting
        &-overview {
          float: left;
          width: 100%;
          clear: both;
          margin: 0 0 40px;   
          p:last-child {
            margin-bottom: 0;
          }
          .views-row {
            margin-bottom: 30px;
          }
        }
        &-title {
          margin: 0 0 20px;
          display: inline-block;    
        }
      }
      &-body {
        margin-bottom: 40px;
        p:last-child {
          margin-bottom: 0;
        }
      }
    }
    .views-field {
      &-field-section {
        &-image {
          a img {
            transition: .2s ease;
            &:hover {
              transform: scale(1.07, 1.07) !important;
            }
          }
          &:hover {
            + .views-field-nothing {
              a {
                .field-section-title {
                  &:after {
                    content: "\f101";
                    font-family: "Font Awesome 5 Pro";
                    font-size: 20px;
                    display: inline-block;
                    color: #ff6600;
                    font-weight: bold;
                  }
                }
              }
            }
          }
        }
      }
    }
    .has-image {
      .field-section-image {
        margin-bottom: 10px;
        img {
          width: auto;
          height: auto;
        }
      }
    }
    a h3 {
      color: @brand-primary;
      &:hover {
        .views-field-field-section-image {
          a img {
            transform: scale(1.07, 1.07);
          }
        }
        &:after {
          content: "\f101";
          font-family: "Font Awesome 5 Pro";
          font-size: 20px;
          display: inline-block;
          color: #ff6600;
          font-weight: bold;
        }
      }
    }
    ul.two-column {
      padding-left: 20px;
    }
  }
}

// 480px
//==================

@media (min-width: @screen-phone) {

  /* General View Styles */
  .view {
    /* Five column */
    /* Add row class 'five-column' under OTHER->CSS Class to use. */
    &.five-column .views-row {
      float: left;
      clear: none;
      width: 31%;
      margin-right: 3.5%;
    }
    &.five-column .views-row:nth-of-type(2n) {
      margin-right: 3.5%;
    }
    &.five-column .views-row:nth-of-type(2n+1) {
      clear: none;
    }
    &.five-column .views-row:nth-of-type(3n) {
      margin-right: 0;
    }
    &.five-column .views-row:nth-of-type(3n+1) {
      clear: both;
    }
    /* Home Page News & Events View */
    &-home-page-news-and-events {
      &.two-column, &.stacked {
        margin: 0;
        .block-title {
          padding: 15px 0 0;
        }
        .view {
          &-header, &-content, &-footer {
            padding: 0;
          }
        }
        .views-field {
          &-field-image {
            max-width: 330px;
          }
        }
      }
    }
    /* People page views */
    &-people {
      .layout-buttons,
      .people-filter {
        top: -57px;
        margin-bottom: -27px;
      }
      .layout-buttons {
        right: 215px;
      } 
      .view-display-id-attach_staff_chair,
      .view-display-id-attach_staff_chair.list {
        .views-row {
          margin: 0 0 40px;
        }
        .views-field {
          &-field-person-img {
            float: left;
            margin-right: 20px;
            margin-bottom: 0;
            .img-overlay {
              top: -164px;
              height: 164px;
              a {
                .body-size;
                height: 164px;
                padding-top: 65px;
              }            
            }
            img {
              width: 100%;
              height: auto;
            }
          }
        }
      }
    }
    // Landing page breakout sections
    &-landing-page-breakouts {
      .has-image {
        .field-section-image {
          float: left;
          width: 30%;
          margin-bottom: 0;
        }
        .group-text {
          margin-left: 33.64963503%;
          .field-section-title {
            position: relative;
            margin: 0 0 15px;
            display: inline-block;
          }
        }
      }
    }
  }
}

// 768px
//==================

@media (min-width: @screen-tablet) {

  /* General View Styles */
  .view {

    /* Four column */
    /* Add row class 'four-column' under OTHER->CSS Class to use. */
    &.four-column .views-row {
      float: left;
      clear: none;
      width: 22%;
      margin-right: 4%;
    }
    &.four-column .views-row:nth-of-type(4n) {
      margin-right: 0;
    }
    &.four-column .views-row:nth-of-type(4n+1) {
      clear: both;
    }

    /* Five column */
    /* Add row class 'five-column' under OTHER->CSS Class to use. */
    &.five-column .views-row {
      float: left;
      clear: none;
      width: 18.39622641%;
      margin-right: 2.00471698%;
    }
    &.five-column .views-row:nth-of-type(2n) {
      margin-right: 2.00471698%;
    }
    &.five-column .views-row:nth-of-type(2n+1) {
      clear: none;
    }
    &.five-column .views-row:nth-of-type(3n) {
      margin-right: 2.00471698%;
    }
    &.five-column .views-row:nth-of-type(3n+1) {
      clear: none;
    }
    &.five-column .views-row:nth-of-type(5n) {
      margin-right: 0;
    }
    &.five-column .views-row:nth-of-type(5n+1) {
      clear: both;
    }

    /* List with alternating row colors */
    /* Add row class 'list' under OTHER->CSS Class to use */
    &.list .views-row {
      padding: 0;
      .views-field-title {
        margin-top: 20px;
      }
    }
    /* Home Page News & Events View */
    &-home-page-news-and-events {
      &.two-column, &.stacked {
        margin: -5px 0 0;
      }
      &.four-items {
        h3 {
          margin: 0 0 10px;
        }
      }
    }
    /* Events view page & News view page */
    &-events, &-news-story {
      &.view-display-id-page {
        .views-field {
          &-field-image {
            max-width: 330px;
          }
        }
      }
    }
    /* People view pages */
    &-people {
      .layout-buttons,
      .people-filter {
        top: -76px;
      }
      .view-display-id-attach_staff_chair,
      .view-display-id-attach_staff_chair.list {
        /* Blue row background */
        /* Add row class 'blue' under Format->Format->Settings->Row class to use */
        .views-row.blue {
          padding: 25px;
        }
        .views-field {
          &-field-person-img {
            float: left;
            max-width: 260px;
            max-height: 200px;
            .img-overlay {
              top: -200px;
              height: 200px;
              a {
                .body-size;
                height: 200px;
                padding-top: 85px;
              }
            }           
          }
        }
      }
      .views-field {
        &-field-person-img {
          height: auto;
          display: inline-block;
          .img-overlay {
            display: none;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 102, 204, .85);
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
              a {
              .body-size-minus;
              font-weight: 600;
              color: #fff;
              display: inline-block;
              width: 100%;
              padding: 30% 0;
              &:hover {
                text-decoration: none;
              }
            }
          }
          &:hover {
            .img-overlay {
              display: inline-block;
            }            
          }        
        }
      }
      &.list .view-content {
        .views-row {
          .views-field {
            margin-left: 35%;
            &-field-person-img {
              width: 33%;
              max-width: none;
              margin-right: 20px;
              margin-left: 0;             
            }
          }
        }
      }
    }
    /* Social media */
    &-social-media-icons {
      float: right;
      margin: 0;
      padding: 0;
    }
  }
}

// 992px
//==================

@media (min-width: @screen-desktop) {

  .view {
    /* Home Page News & Events two-column */
    &-home-page-news-and-events {
      &.two-column {
         > .view-content > .views-row {
          > .views-field {
            float: left;
            width: 48%;
            margin-right: 4%;
          }
          > .views-field:nth-of-type(2n) {
            margin-right: 0;
          }
        }       
      }
      .view {
         > .view-content > .group > .views-row  {
          padding-left: 20px;
          padding-right: 20px;
          &:last-child {
            margin-right: 0;
          }
        }       
      }
    }
    &-news-story {
      margin-bottom: 0;
    }
    /* People view pages */
    &-people {
      .view-display-id-attach_staff_chair,
      .view-display-id-attach_staff_chair.list  {
        .views-row {
          margin: 0 0 60px;
          /* Blue row background */
          /* Add row class 'blue' under Format->Format->Settings->Row class to use */
          &.blue {
            padding: 25px;
            margin: 0;
            background: #e8f0f7;         
          }
        }
        .views-field {
          .body-size;
          line-height: 1.4;   
          &-field-person-img {
            float: left;
            max-height: 200px;
            max-width: 260px;
            margin-right: 20px;
            .img-overlay {
              top: -200px;
              height: 200px;
              a {
                .body-size;
                height: 200px;
                padding-top: 85px;
              }
            }
            img {
              width: 100%;
              height: auto;
            }           
          }
          &-title {
            position: relative;
            top: -3px;
            .body-size;
            line-height: 1.125;
          }      
        }
      }
      .views-field {
        &-field-person-img {
          max-width: 165px;
          .img-overlay {
            display: none;
            left: 0;
            width: 100%;
            background-color: rgba(0, 102, 204, .85);
            text-align: center;
            a {
              .body-size-minus;
              font-weight: 600;
              color: #fff;
              display: inline-block;
              width: 100%;
            }
            a:hover {
              text-decoration: none;
            }
          }         
        }
      }
      &.list {
        .view-content {
          .views-row {
            .views-field {
              margin-left: 185px;
              &-field-person-img {
                width: auto;
                max-width: 165px;
                margin-left: 0;               
              }
            }
          }
        }
      }    
    }
    // Landing page breakout sections
    &-landing-page-breakouts {
      .has-image {
        .field-section-image {
          width: 19.71%;
        }
        .group-text {
          margin-left: 21.9%;
        }
      }
      .field-section-overview .views-row {
        margin-bottom: 40px;
      }
    }
  }
}

// 1200px
//==================

@media (min-width: @screen-lg-desktop) {

  .view {
    /* People view pages */
    &-people {
      .layout-buttons,
      .people-filter {
        top: -90px;
      }
      .views-field {
        &-field-person-img {
          max-width: 195px;
          .img-overlay {
            display: none;
            left: 0;
            width: 100%;
            background-color: rgba(0, 102, 204, .85);
            text-align: center;
            a {
              .body-size-minus;
              font-weight: 600;
              color: #fff;
              display: inline-block;
              width: 100%;
              &:hover {
                text-decoration: none;
              }
            }
          }         
        }
      }
      &.list .view-content {
        .views-row {
          .views-field {
            margin-left: 230px;
            &-field-person-img {
              width: auto;
              max-width: 195px;
              max-height: 150px;
              margin-left: 0;
            }
            &-title {
              .body-size-plus;
              font-weight: bold;
            }
          }
        }
      }
      .view-display-id-attach_staff_chair,
      .view-display-id-attach_staff_chair.list {
        .view-content {
          .views-row {
            margin: 0 0 60px;
            /* Blue row background */
            /* Add row class 'blue' under Format->Format->Settings->Row class to use */
            &.blue {
              padding: 25px;
              margin: 0;
              background: #e8f0f7;            
            }
          }
          .views-field {
            .body-size;
            line-height: 1.4;
            &-field-person-img {
              float: left;
              max-height: 200px;
              max-width: 260px;
              margin-right: 20px;
              .img-overlay {
                top: -200px;
                height: 200px;
                a {
                  .body-size;
                  height: 200px;
                  padding-top: 85px;
                }
              }
              img {
                width: 100%;
                height: auto;
              }
            }
            &-title {
              .body-size;
              line-height: 1.125;
              position: relative;
              top: -3px;
            }      
          }
        }
      }
    }
  }
}