/**
 * @file
 * Paragraphs
 * EX: .paragraphs-item-three-column-cta
 */

.paragraphs-item-interior-header-slideshow {
  .not-front.node-type-landing-page & {
    .view-slideshow {
      .slick__arrow {
        @media (max-width: 767px) {
          bottom: 0;
          left: 0;
          margin: 0 auto;
          position: absolute;
          right: 0;
          width: 40%;
        }

        @media (max-width: 580px) {
          width: 70%;
        }

        .slick-arrow {
          @media (max-width: 767px) {
            position: inherit;
          }
        }

        .slick-prev {
          @media (max-width: 767px) {
            float: left;
            margin-left: 0;
            left: 0;
          }
        }

        .slick-next {
          @media (max-width: 767px) {
            float: right;
            margin-right: 0;
            right: 0;
          }
        }
      }
    }
  }
}

.paragraphs-item-three-column-cta {
  background: url("../images/bkg-waves-grey-paragraph.png") repeat-x center bottom transparent;
  padding: 50px 0;
  > .content {
    .center-content;
  }
  @media (max-width: 959px) and (min-width: 767px) {
    .field-name-field-column-cta-item > .field-items {
      box-sizing: border-box;
      margin: 0 auto;
      margin-bottom: 7rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      text-align: center;
      width: 100%;
    }
  }

  .field-name-field-column-cta-item > .field-items > .field-item {
    display: inline-block;
    position: relative;
    text-align: left;
    vertical-align: top;
    width: 31.5%;

    &:nth-child(2) {
      .field-type-image::after {
        background-color: rgba(0,131,200,0.44);
      }

      .group-text-wrapper {
        background: url("../images/bkg-cta-center-wave.png") no-repeat center bottom transparent;
      }
    }

    &:last-child {
      .field-type-image::after {
        background-color: rgba(220,95,87,0.75);
      }

      .group-text-wrapper {
        background: url("../images/bkg-cta-right-wave.png") no-repeat center bottom transparent;
      }
    }

    &:nth-child(3n+2){
      margin: 0 2.15%;
    }

    @media (max-width: 959px) {
      //width: 25rem;
    }

    @media (max-width: 767px) {
      margin: 0 auto;
      width: 31.5rem;
      &:nth-child(3n+2){
        margin: 0 auto;
      }
    }

    @media (max-width: 767px) {
      display: block;
      width: 25rem;
    }

    &:hover,
    &:focus {
      .field-type-image::after {
        background-color: rgba(0,0,0,0.7);
        transition: background-color 0.35s ease 0s;

        img {
          opacity: 0.3;
        }
      }

      .field-name-field-link-column-cta {
        opacity: 1;
        transform: translate(0px, 0px);
        transition-delay: 0.35s;
      }
    }
  }

  .field-type-image {
    position: relative;

    &::after {
      background-color: rgba(0,174,171,0.7);
      content: "";
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  img {
    display: block;
    filter: grayscale(100);
    max-width: 100%;
    height: auto;
    width: 100%;
  }

  .group-text-wrapper {
    background: url("../images/bkg-cta-left-wave.png") no-repeat center bottom transparent;
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    font-family: @family-header-font;
    left: 0;
    padding: 0px 25px 45px;
    position: absolute;
    width: 100%;
    z-index: 2;
  }

  .field-name-field-category-title {
    font-size: 1.8rem;
    line-height: 1.2em;
    text-transform: uppercase;
  }

  .field-name-field-title-column-cta {
    font-size: 2.4rem;
    line-height: 1.2em;
  }

  .field-name-field-link-column-cta {
    bottom: 47px;
    height: 0;
    left: 25px;
    opacity: 0;
    position: absolute;
    transition: all 0.35s ease 0s;
    transform: translate(-10px, 0px);
    width: 100%;
    z-index: 3;

    a {
      color: #E2EDF8;
      display: inline-block;
      font-family: @family-header-alternate-font;
      font-size: 1.2rem;
      text-transform: uppercase;

      &::after {
        content: ">";
        padding-left: 2px;
      }
    }
  }
}

.paragraphs-item-testimonial-carousel {
  background: @image-testimonial-paragraph-bg repeat-x center top #F5F4F3;
  padding-top: 25px;
  position: relative;
  z-index: 2;

  @media (max-width: 959px) {
    background-color: transparent;
    background-position: center 5rem;
    margin-top: -5rem;
    padding-top: 0;
    background-size: cover;
  }

  .node-type-department & {
    background-color: @color-testimonial-paragraph-bg;

    @media @tablet {
      background-color: transparent;
      background-size: cover;
    }
  }

  > .content {
    margin: 0 auto;
    max-width: 1180px;
    width: 83%;
    @media(min-width: 960px) {
      margin-bottom: -60px;
    }
  }

  .view-content {
    position: relative;
  }

  .field-name-field-image-testimonial {
    display: inline-block;
    margin-right: 5.9%;
    vertical-align: top;

    @media (max-width: 959px) {
      display: block;
      margin: 0 auto;
      width: 213px;
    }

    img {
      border: 4px solid #fff;
      border-radius: 50%;
    }
  }

  .text-wrapper {
    display: inline-block;
    padding-top: 30px;
    position: relative;
    vertical-align: top;
    width: ~"calc(100% - 46rem)";

    @media (max-width: 959px) {
      display: block;
      margin: 0 auto;
      text-align: center;
      width: 91%;
    }

    @media (max-width: 767px) {
      width: 90%;
    }

    &::before {
      background: url("../images/bkg-testimonial-quote.png") no-repeat 0 0 transparent;
      content: "";
      display: block;
      height: 81px;
      left: -91px;
      position: absolute;
      top: 3px;
      width: 117px;

      @media (max-width: 959px) and (min-width: 767px) {
        left: 0;
        top: -96px;
      }
    }
  }

  .field-name-field-quote-testimonial {
    color: #fff;
    font-size: 3rem;
    line-height: 1.4em;
    margin-bottom: 15px;

    @media (max-width: 1380px) {
      line-height: 1.8em;
      font-size: 2.5rem;
    }

    @media (max-width: 767px) {
      font-size: 1.5rem;
    }
  }

  .field-name-field-name-testimonial {
    color: #fff;
    font-size: 1.6rem;
    font-style: italic;
    line-height: 1.2em;

    .field-item::before {
      content: "-";
      margin-right: 5px;
    }
  }

  .slick-dots {
    bottom: 105px;
    left: 450px;
    width: auto;

    /*@media (max-width: 1300px) {
      bottom: 0;
    } */

    @media (max-width: 959px) {
      margin-top: 2rem;
      padding-bottom: 2rem;
      position: initial;
    }
    li button {
      background-color: @color-testimonial-paragrpah-slick-dot-bg;
    }

    li.slick-active button {
      border-color: @color-testimonial-paragrpah-slick-dot-active-border;
    }
  }

  .slick__arrow {
    color: #002F74;

    .slick-arrow {
      border-color: @color-testimonial-paragrpah-slick-arrow-border;
      top: 37%;

      &::after {
        color: @color-testimonial-paragrpah-slick-arrow;
      }
    }

    .slick-prev {
      left: -10%;

      @media (max-width: 959px) {
        left: -7%;
      }
      @media (max-width: 767px) {
        top: 39%;
      }
    }

    .slick-next {
      right: -10%;

      @media (max-width: 959px) {
        right: -7%;
      }

      @media (max-width: 767px) {
        top: 39%;
      }
    }
  }
}

.paragraphs-item-stats-carousel {
  background: url("../images/bkg-stats-carousel.jpg") no-repeat center center transparent;
  background-color: #004240;
  background-size: cover;
  position: relative;

  &::before {
    background: url("../images/bkg-testimonial-top-wave.png") repeat-x top center transparent;
    content: "";
    display: block;
    height: 102px;
    width: 100%;
  }

  &::after {
    /* hide until swoosh decsion background: url("../images/bkg-testimonial-wave-bottom.png") repeat-x bottom center transparent; */
    content: "";
    display: block;
    height: 101px;
    width: 100%;
  }

  > .content {
    color: #fff;
    margin: 0 auto;
    max-width: 1275px;
    padding: 40px 0;
  }

  .slide__content {
    margin: 0 auto;
    max-width: 385px;
    text-align: center;

    @media (max-width: 1448px) {
      max-width: 194px;
    }
  }

  .field-name-field-stat {
    font-family: @font-family-light;
    font-size: 7.4rem;
    line-height: 1.2em;
    margin-bottom: 1px;
  }

  .field-name-field-title-stat {
    font-family: @family-header-font;
    font-size: 2.4rem;
    line-height: 1.3em;
    margin-bottom: 10px;
  }

  .field-name-field-body-stat {
    color: #BEFF9C;
    font-size: 1.6rem;
    line-height: 1.2em;
  }

  .slick {
    position: relative;
  }

  .slick__arrow {
    .slick-arrow {
      border-color: #72AB6F;
      top: 37%;

      &::after {
        color: #72AB6F;
      }
    }

    .slick-prev {
      left: -7%;

      @media(max-width: 1448px) {
        left: 0;
      }
    }
    .slick-next {
      right: -7%;

      @media(max-width: 1448px) {
        right: 0;
      }
    }
  }
}

.paragraphs-item-academic-schools, .paragraphs-item-image-grid {
  background-color: #F5F4F3;
  > .content {
    .center-content;
    padding-top: 7.5rem;
  }

  /*h2 {
    color: #6D3332;
    font-family: @family-header-alternate-font;
    margin-top: 0;
    text-align: center;
  }*/

  .field-name-field-image-grid-item-header {
    color: #6D3332;
    font-family: @family-header-alternate-font;
    font-size: 3.8rem;
    line-height: 1.2em;
    margin-bottom: 3.1rem;
    margin-top: 0;
    text-align: center;
  }

  .group-title-wrapper {
    padding-bottom: 50px;

    .field-name-field-ac-department > .field-items > .field-item {
      display: inline-block;
      margin-bottom: 12px;
      position: relative;
      vertical-align: top;
      width: 31.5%;

      &:nth-child(3n+2){
        margin: 0 2.335%;
      }

      @media (max-width: 985px) {
        width: 31.5rem;
        margin-right: 1rem;
        &:nth-child(3n+2){
          margin: 0;
          margin-right: 1rem;
        }
      }

      @media (max-width: 767px) {
        display: block;
        margin: 0 auto;
        width: 31.5rem;

        &:nth-child(3n+2){
          margin: 0 auto;
        }
      }

      &:hover,
      &:focus {
        .field-name-field-school-thumbnail::after {
          .grid-item-hover-gradient;
        }

        .field-name-title-field {
          text-decoration: underline;
        }
      }
    }
  }

  .field-name-field-ac-department,
  .paragraphs-items-field-image-grid-item {
    @media (max-width: 985px) {
      margin: 0 auto;
      width: 655px;
    }

    @media (max-width: 767px) {
      width: auto;
    }
  }

  .field-name-field-school-thumbnail {
    position: relative;

    &::after {
      .grid-item-gradient;
      content: "";
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      transition: all 0.5s ease 0s;
      top: 0;
      width: 100%;
      z-index: 1;
    }
  }

  img {
    display: block;
  }

  .field-name-title-field {
    box-sizing: border-box;
    bottom: 0;
    color: #fff;
    font-family: @family-header-font;
    font-size: 2.4rem;
    line-height: 1.2em;
    left: 0;
    padding: 0 23px 20px;
    position: absolute;
    width: 100%;
    z-index: 2;
  }

  .field-name-field-school-external-link {
    a {
      color: transparent;
      display: block;
      left: 0;
      font-size: 0;
      height: 100%;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 4;
    }
  }

  .field-name-field-ac-dept-link, .field-name-field-image-grid-link {
    padding-top: 2rem;
    text-align: center;
    a {
      .button-style;
      background-color: #6D3332;
      border-color: #6D3332;
      min-width: 121px;

      &:hover {
        background-color: transparent;
        border-color: #6D3332;
        color: #6D3332;
      }
    }
  }


  // Paragraph item grid
  .paragraphs-items-field-image-grid-item {
   > .field-name-field-image-grid-item > .field-items > .field-item {
      display: inline-block;
      margin-bottom: 12px;
      position: relative;
      vertical-align: top;
      width: 31.45%;

      &:nth-child(3n+2){
        margin: 0 2.335%;
      }

      @media (max-width: 985px) {
        width: 31.5rem;
        margin-right: 1rem;
        &:nth-child(3n+2){
          margin: 0;
          margin-right: 1rem;
        }
      }

      @media (max-width: 767px) {
        display: block;
        margin: 0 auto;
        width: 31.5rem;

        &:nth-child(3n+2){
          margin: 0 auto;
        }
      }

      &:hover,
      &:focus {
        .field-type-image::after {
          .grid-item-hover-gradient;
        }
        .field-name-field-image-grid-item-link-title {
          text-decoration: underline;
        }
      }
    }

    .field-type-image {
      position: relative;

      &::after {
        .grid-item-gradient;
        content: "";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        transition: all 0.5s ease 0s;
        top: 0;
        width: 100%;
        z-index: 1;
      }
    }

    .field-type-link-field a {
      bottom: 0;
      display: block;
      font-size: 0;
      height: 100%;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 4;
    }

    .field-name-field-image-grid-item-link-title {
      box-sizing: border-box;
      bottom: 0;
      color: #fff;
      font-family: @family-header-font;
      font-size: 2.4rem;
      line-height: 1.2em;
      left: 0;
      padding: 0 23px 20px;
      position: absolute;
      width: 100%;
      z-index: 2;
    }
  }
}

// Tabbed Item Paragraph
.paragraphs-item-tabbed-paragraph {
  background-color: @color-tabbed-paragrpah-bg;
  padding: 0 1.5rem;

  .node-type-page & {
    background-color: #FFF;
  }

  > .content {
    margin: 0 auto;
    max-width: @width-page;
    padding-bottom: 4.5rem;
    padding-top: 6.5rem;
  }

  .field-name-field-tabbed-main-title {
    font-family: @family-header-alternate-font;
    font-size: 3.8rem;
    line-height: 1.2em;
    margin-bottom: 2rem;
    text-align: center;
  }

  .field-name-field-tabbed-main-body {
    margin-bottom: 4.1rem;
    text-align: center;
  }

  .field-collection-tabs {
    .ui-widget-header,
    &.ui-widget-content,
    ul.ui-tabs-nav,
    .ui-corner-top {
      background: none;
      border: none;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      padding: 0;

    }
    .item-list {
      ul.ui-tabs-nav {
        border-collapse: separate;
        border-spacing: 3px;
        display: table;
        width: 100%;

        @media @mobile {
          border-spacing: 0;
          box-sizing: border-box;
          display: block;
          padding: 0 15px;
        }

        li {
          background: #C4BCB7;
          display: table-cell;
          float: none;
          //width: 190px;

          @media @mobile {
            display: inline-block;
            vertical-align: top;
            width: 100%;
          }

          a {
            box-sizing: border-box;
            color: #000;
            display: block;
            font-size: 2rem;
            font-family: @family-light-font;
            line-height: 1.2em;
            padding: 0.3em 1em 0.6em;
            text-align: center;
            width: 100%;
          }

          &:hover,
          &:active {
            opacity: 0.7;
          }

          &.ui-state-active {
            background: @color-tabbed-paragraph-tab-active;
            border-top: 5px solid #f0b323;
            margin-bottom: 10px;
            margin-top: -5px;
            position: relative;
            text-align: center;

            @media @mobile {
              margin-bottom: 0;
            }

            &:after {
              border-left: 95px solid transparent;
              border-right: 95px solid transparent;
              border-top: 6px solid @color-tabbed-paragraph-tab-active;
              bottom: -6px;
              content: "";
              display: block;
              left: 50%;
              margin-left: -93px;
              position: absolute;
              width: 0;

              @media (max-width: 959px) and (min-width: 768px) {
                border-left-width: 45px;
                border-right-width: 45px;
                margin-left: -47px;
              }
            }

            @media screen and (max-width: 650px) {
              //margin-bottom: 10px;
              margin-top: 0;

              &:after {
                display: none;
              }
            }
            a {
              box-sizing: border-box;
              color: #fff;
              font-family: @family-header-font;
              width: 100%;
            }
          }
        }
      }
    }
    .ui-tabs-panel {
      border: 0px none;
      padding: 1.4rem 1rem 0;

      @media (max-width: 767px) {
        margin-left: 1rem;
        margin-right: 1rem;
      }

      .node-type-page & {
        .paragraphs-item-accordion {
          background: none;
          &:after {
            background: none;
          }

          > .content,
          .content {
            padding: 0;
          }
        }
      }
    }
  }

  .paragraphs-item-grid-items .content {
    max-width: none;
    padding: 0;
  }

  .paragraphs-item-academic-schools, .paragraphs-item-image-grid {
    background-color: transparent;
  }

  .paragraphs-item-accordion {
    background: none transparent;

    &::after {
      background: none transparent;
    }

    > .content {
      padding: 0;
    }

    .field-name-field-accordion-title {
      color: #4A4A4A;
    }
  }
}

// Grid Items Paragraph
.paragraphs-item-grid-items {

  .field-name-title-field {
    color: #4A4A4A;
    font-family: @family-header-font;
    font-size: 2.2rem;
    line-height: 1.2em;
    margin: 0 0 20px;
  }

  .field-type-field-collection {
    margin-bottom: 1rem;
    overflow: hidden;
  }

  .field-name-field-grid-item {
    > .field-items {
      > .field-item {
        background: @color-grid-item-bg;
        border-top: 4px solid @color-grid-item-border-top;
        float: left;
        font-size: 14px;
        height: 150px;
        margin-bottom: 19px;
        margin-right: 2%;
        width: 23.4%;

        @media(min-width: 990px) {
          &:nth-of-type(4),
          &:nth-of-type(8),
          &:nth-of-type(12),
          &:nth-of-type(16) {
            margin-right: 0;
          }
        }

        @media(max-width: 989px) {
          width: 31%;

          &:nth-of-type(3),
          &:nth-of-type(6),
          &:nth-of-type(9),
          &:nth-of-type(12) {
            margin-right: 0;
          }
        }

        @media @mobile {
          margin-right: 0;
          width: 100%;
        }

        .group-grid-items-wrapper {
          padding: 1.1rem 1.8rem;

          .field-name-field-link {
            a {
              color: @color-grid-item-link;
              font-family: @family-header-alternate-font;
              font-size: 1.2rem;
              line-height: 1.2em;
              text-transform: uppercase;

              &:after {
                content: " ›";
              }
            }
          }
        }
      }
    }
  }
}

.paragraphs-item-simple-paragraph {
  background: url("../images/bkg-simple-paragraph.png") repeat-x top center #e8e8e8;
  min-height: 513px;
  padding: 0 15px;

  @media @mobile {
    background-size: cover;
    padding-bottom: 10rem;
  }

  .node-type-page & {
    background: none;
    margin-bottom: 5rem;
    min-height: inherit;
  }

  .content {
    color: @color-simple-paragraph-text;
    margin: 0 auto;
    max-width: @width-page;
    padding-top: 3.5rem;

    .node-type-page & {
      color: @color-font;
    }
  }

  .field-name-field-simple-title {
    color: @color-simple-paragraph-title;
    font-family: @family-header-alternate-font;
    font-size: 3.8rem;
    line-height: 1.2em;
    margin-bottom: 4.2rem;
    text-align: center;

    @media @mobile {
      font-size: 3rem;
    }

    .node-type-page & {
      color: @color-font;
    }
  }

  img {
    border: 1px solid #E2EDF8;
    margin-right: 2.5%;

    @media @tablet {
      height: auto;
      max-width: 25%;
    }

    @media @mobile {
      display: block;
      float: none !important;
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
    }
  }

  .quick-links {
    float: right;
    margin: 0;
    padding: 0;
    width: 24.3%;

    @media @mobile {
      float: none;
      width: 100%;
    }

    li {
      list-style: none;
      margin-bottom: 2px;
      overflow: hidden;
    }

    a {
      background-color: #fff;
      display: block;
      font-size: 1.4rem;
      line-height: 1.2em;
      padding: 1.2rem;
      position: relative;
      text-decoration: none;

      &:hover {
        background-color: @color-simple-paragraph-quick-link-bg-hover;
      }

      &::after {
        content: "\f105";
        font-family: @font-awesome;
        font-size: 2.2rem;
        font-weight: normal;
        margin-top: -8px;
        position: absolute;
        right: 19px;
        top: 50%;
      }
    }
  }

  .three-column-image-text-links {
    .text {
      display: inline-block;
      vertical-align: top;
      width: 39%;

      @media @mobile {
        display: block;
        width: 100%;
      }
    }
  }
}

.paragraphs-item-two-row-paragraphs {
  .group-content-wrapper {
    margin: 0 auto;
    max-width: @width-page;
    padding-top: 15rem;
    position: relative;
    z-index: 10;
  }

  .group-first-row {
    background-size: cover;
    color: #fff;
    padding: 0 1.5rem 16rem;
    position: relative;

    &::before {
      background-color: @color-first-row-bg;
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
    }

    &::after {
      background: @image-first-row-top-bg repeat-x center top transparent;
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: -1px;
      width: 100%;
      z-index: 2;
    }

    .group-inner-content-wrapper::after {
      background: @image-first-row-bottom-bg repeat-x center bottom transparent;
      bottom: -1px;
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 2;
    }
  }

  .field-name-field-two-row-title {
    font-family: @family-header-alternate-font;
    font-size: 3.8rem;
    line-height: 1.2em;
    margin-bottom: 3.1rem;
    text-align: center;
    color:#fff;
  }

  .field-name-field-two-row-body {
    margin-bottom: 3rem;
  }

  .field-name-field-two-row-links {
    text-align: center;

    .field-item {
      display: inline-block;

      @media @mobile {
        display: block;
        margin-bottom: 1.5rem;
      }

      a {
        .button-style;
        background-color: transparent;
        border-color: @color-first-row-links-border;
        margin: 0 0.1rem;

        &:hover,
        &:focus {
          background-color: @color-first-row-links-bg-hover;
          border-color: @color-first-row-links-border-hover;
          color: @color-first-row-links-text-hover;
        }
      }
    }
  }

  .group-second-row {
    background-color: @color-second-row-bg;
    color: #4A4A4A;
    padding: 0 1.5rem;
  }

  .group-content-wrapper-2 {
    padding-bottom: 8.4rem;
    padding-top: 5rem;
  }

  .field-name-field-two-row-title-two {
    color: @color-second-row-title;
    font-family: @family-header-alternate-font;
    font-size: 3.8rem;
    line-height: 1.2em;
    margin-bottom: 3.1rem;
    text-align: center;
  }

  .field-name-field-two-row-body-two {
    color: @color-second-row-text;
  }

  .field-name-field-two-row-image {
    float: left;
    margin-right: 3rem;

    @media @mobile {
      float: none;
      margin: 0 auto 2rem;
      width: 95%;
    }

    img {
      border: 2px solid #4A4A4A;
      display: block;

      @media @mobile {
        height: auto;
        margin: 0 auto;
        max-width: 100%;
      }
    }
  }

  .field-name-field-two-row-links-two {
    @media (max-width: 1027px) {
      clear: both;
      padding-top: 3rem;
      text-align: center;
    }

    @media @mobile {
      padding-top: 0;
    }

    .field-item {
      display: inline-block;

      @media @mobile {
        display: block;
        margin-bottom: 1.5rem;
      }

      a {
        .button-style;
        background-color: transparent;
        border-color: @color-second-row-links-border;
        color: @color-second-row-links;
        margin: 0 0.1rem;
        padding: 0.6rem 2.9rem;

        &:hover,
        &:focus {
          background-color: @color-second-row-links-bg-hover;
          border-color: @color-second-row-links-border-hover;
          color: @color-second-row-links-hover;
        }
      }
    }
  }

  .field-name-field-two-row-body-two {
    display: inline-block;
    margin-bottom: 3rem;
    vertical-align: top;
    width: ~"calc(100% - 36.1rem)";

    @media @mobile {
      display: block;
      width: 100%;
    }
  }
}

.paragraphs-item-links-and-map {
  background-color: @color-where-to-find-bg;
  padding: 0 1.5rem;

  h2 {
    margin-top: 0;
  }

  .content {
    margin: 0 auto;
    max-width: @width-page;
    padding-top: 8.7rem;
  }

  .group-links {
    display: inline-block;
    margin-right: 3.8%;
    vertical-align: top;
    width: 63.5%;

    @media @tablet {
      margin-right: 0;
    }

    @media (max-width: 767px) {
      display: block;
      margin: 0 auto;
      text-align: center;
    }

    @media (max-width: 650px) {
      width: 100%;
    }
  }

  .group-map {
    display: inline-block;
    padding-top: 3rem;
    vertical-align: top;
    width: 32%;

    @media @tablet {
      width: 36%;
    }

    @media (max-width: 767px) {
      display: block;
      margin: 0 auto;
      margin-bottom: 4rem;
      padding-top: 0;
      width: 63.5%;
    }

    @media (max-width: 650px) {
      width: 100%;
    }
  }

  .field-name-field-title-links-map {
    color: @color-where-to-find-title;
    font-family: @family-header-alternate-font;
    font-size: 3.8rem;
    line-height: 1.2em;
    margin-bottom: 2rem;
    text-align: center;
  }

  .field-name-field-links-links-maps {
    padding-bottom: 6.5rem;
    padding-top: 1.5rem;

    @media (max-width: 767px) {
      padding-bottom: 0;
      margin: 0 0 2rem;
    }

    .field-item {
      display: inline-block;
      margin-bottom: 1rem;
      position: relative;
      vertical-align: top;
      width: 32%;

      &:nth-child(3n+2){
        margin: 0 1%;

        @media @tablet {
          margin: 0 1% 0 0;
        }

        @media @mobile {
          margin-right: 0;
        }
      }

      @media (max-width: 959px) and (min-width: 766px) {
        margin-right: 1%;
        width: 48%;
      }

      @media (max-width: 767px) {
        width: 100%;

        &:nth-child(3n+2) {
          margin: 0 auto 1rem auto;
        }
      }

      a {
        background-color: @color-where-to-find;
        box-sizing: border-box;
        color: @color-where-to-find-link;
        display: block;
        font-family: @family-header-font;
        font-size: 1.8rem;
        height: 74px;
        line-height: 1.2em;
        padding: 12px 15px 0;

        @media @mobile {
          height: auto;
          padding: 14px 15px 14px;
        }

        &:hover,
        &:focus {
          background-color: @color-where-to-find-hover;
          text-decoration: none;
        }
      }
    }
  }

  .field-name-field-location-links-map {
    border: 2px solid @color-where-to-find;

    .field-items {
      border-bottom: 4px solid @color-where-to-find-border;
    }
  }

  .group-map-address {
    background-color: @color-where-to-find;
    color: @color-where-to-find-text;
    font-size: 1.4rem;
    line-height: 1.6em;
    padding: 0.9rem 1.5rem;
  }
}

.paragraphs-item-accordion {
  background-color: @color-accordion-paragraph-bg;
  padding-bottom: 16rem;
  padding-bottom: 6rem;
  position: relative;
  z-index: 1;

  .node-type-page & {
    background: none;
  }

&::after {
    //background: @image-accordion-paragraph-bg repeat-x center top;
    //content: "";
    //height: 101px;
    //position: absolute;
    //bottom: 0;
    //width: 100%;

    .node-type-page & {
      background: none transparent;
    }
  }

  .field-name-field-accordion-title {
    color: #fff;
    font-family: @family-header-alternate-font;
    font-size: 3.8rem;
    line-height: 1.2em;
    margin-bottom: 3.2rem;
    text-align: center;

    .node-type-page & {
      color: #4a4a4a;
    }
  }

  > .content {
    padding: 8.7rem 1.5rem 9rem;

    .node-type-page & {
      padding-bottom: 9rem;
    }
  }

  .paragraphs-items-field-accordion-item {
    margin: 0 auto;
    max-width: @width-page;
  }
}

.paragraphs-item-advising, .paragraphs-item-paragraph-with-menu {
  background-color: @color-paragrpah-advising-bg;
  padding: 0 1.5rem;

  > .content {
    margin: 0 auto;
    max-width: @width-page;
    padding-bottom: 11.5rem;
    padding-top: 6.2rem;
  }

  .field-name-field-advising-title, .field-name-field-paragraph-menu-title {
    color: @color-paragrpah-advising-title;
    font-family: @family-header-alternate-font;
    font-size: 3.8rem;
    line-height: 1.2em;
    margin-bottom: 3.2rem;
    text-align: center;
  }*

  .field-name-field-advising-body, .field-name-field-paragraph-menu-body {
    display: inline-block;
    max-width: 69.8%;
    vertical-align: top;

    @media (max-width: 767px) {
      display: block;
      margin: 0 auto;
      max-width: 90%;
    }
  }

  .field-name-field-advisor, .field-name-field-paragraph-menu-item {
    display: inline-block;
    float: right;
    width: 29%;

    @media (max-width: 767px) {
      display: block;
      float: none;
      margin: 0 auto;
      width: 90%;
    }

    a {
      background-color: @color-paragrpah-advising-link-bg;
      color: @color-paragrpah-advising-link;
      display: block;
      font-family: @font-family-semibold;
      margin-bottom: 1px;
      padding: 0.85rem 1.8rem;
      padding-right: 3.2rem;
      position: relative;

      &:hover,
      &:focus {
        opacity: 0.85;
        text-decoration: none;
      }

      &::after {
        border-radius: 50%;
        color: @color-paragrpah-advising-link-after;
        content: "\f138";
        font-family: @font-awesome;
        font-size: 2rem;
        margin-top: -12px;
        position: absolute;
        right: 15px;
        top: 50%;
      }
    }
  }
}

.paragraphs-item-degrees-programs {
  background: @image-paragraph-degrees-bg no-repeat center top;
  background-size: cover;
  padding: 0 1.5rem 4rem;

  > .content {
    margin: 0 auto;
    max-width: @width-page;
    padding-top: 18rem;

    @media (max-width: 450px) {
      max-width: 32rem;
    }
  }

  .field-name-field-title-degrees-programs-p {
    color: @color-paragraph-degrees-title;
    font-family: @family-header-alternate-font;
    font-size: 3.8rem;
    line-height: 1.2em;
    margin-bottom: 3.3rem;
    text-align: center;
  }

  .field-name-field-degree-or-program {
    > .field-items {
      > .field-item {
        display: inline-block;
        vertical-align: top;
        margin: 0 0.395% 1.4rem;
        text-align: center;
        width: 23.9%;

        @media (max-width: 1008px) {
          width: 32%;
        }

        @media (max-width: 767px) {
          width: 48%;
        }

        @media (max-width: 450px) {
          width: 30rem;
        }
      }
    }

    .field-name-title-field {
      a {
        background-color: @color-paragraph-degrees-item-bg;
        border: 4px solid @color-paragraph-degrees-item-border;
        box-sizing: border-box;
        color: #fff;
        display: block;
        font-family: @family-header-font;
        font-size: 2rem;
        line-height: 1.2em;
        max-width: 100%;
        padding: 2.5rem 1rem;

        &:hover,
        &:focus {
          opacity: 0.7;
          text-decoration: none;
        }
      }
    }
  }
}

// paragraphs in department
.paragraphs-items-field-paragraphs-dept {
  .field-name-field-accordion-item {
    padding-bottom: 6rem;
  }
}


// Paragraph item link grid  

.paragraphs-item-link-grid {
  background: #aa2c25 url("../../images/bkg-link-grid-red-cherry-trees.png") no-repeat center top;
  background-size: cover;
  padding: 0 1.5rem 4rem;
}

.paragraphs-item-link-grid > .content {
  margin: 0 auto;
  max-width: 1000px;
  padding-top: 18rem;}
  
  
.paragraphs-item-link-grid .field-name-field-link-grid-title {
  color: #ffffff;
  font-family: 'open_sansbold', Verdana, Tahoma, 'DejaVu Sans', sans-serif;
  font-size: 3.8rem;
  line-height: 1.2em;
  margin-bottom: 3.3rem;
  text-align: center;
}



.paragraphs-item-link-grid .field-name-field-link-grid-links .field-items {
    vertical-align: top;
    margin: 0 0.395% 1.4rem;
    text-align: center;
    }


.paragraphs-item-link-grid .field-name-field-link-grid-links > .field-items > .field-item {
    display: inline-block;
    width: 23.9%;
}
   
    
.paragraphs-item-link-grid .field-name-field-link-grid-links .field-items a {
  color: #ffffff;
  font-family: 'open_sansbold', Verdana, Tahoma, 'DejaVu Sans', sans-serif;
  font-size: 3.8rem;
  line-height: 1.2em;
  margin:.3rem;
  text-align: center;
  background-color: transparent;
  border: 4px solid #ffffff;
  box-sizing: border-box;
  color: #fff;
  display: block;
  font-family: 'open_sans_condensedbold',Helvetica,Arial,sans-serif;
  font-size: 2rem;
  line-height: 1.2em;
  max-width: 100%;
  padding: 2.5rem 1rem;
}

.paragraphs-item-link-grid .field-name-field-link-grid-links .field-items a:hover {
    opacity: 0.7;
    text-decoration: none;
}


@media (max-width: 1008px){
.paragraphs-item-link-grid .field-name-field-link-grid-links > .field-items > .field-item {
    width: 32%;
    color: #000000;}
}


@media (max-width: 767px){
.paragraphs-item-link-grid .field-name-field-link-grid-links > .field-items > .field-item {
    width: 48%;
    color: #000000;}
}

@media (max-width: 450px){
.paragraphs-item-link-grid .field-name-field-link-grid-links > .field-items > .field-item {
    width: 30rem;
    color: #000000;}
}

/* paragraphs-item-basic-color */

.paragraphs-item-basic-color {
  padding: 0 15px 3.0rem;

  &.ssublue {
    background-color: #004C97;
  }
  &.ssulightblue {
    background-color: #ABCAE9;
  }
  &.tech {
    background-color: #007672;
  }
  &.ivy {
    background-color: #A4D65E;
  }
  &.lakes {
    background-color: #2DCCD3;
  }
  &.lobo {
    background-color: #6787B7;
  }
  &.sunset {
    background-color: #FFB25B;
  }
  &.butterfly {
    background-color: #F6BE00;
  }
  &.bacon {
    background-color: #C04C36;
  }
  &.wine {
    background-color: #861F41;
  }
  &.rockwall {
    background-color: #CBC4BC;
  }
  &.ives {
    background-color: #C8C9C7;
  }
  &.charcoal {
    background-color: #36454f;
  }
  &.black {
    background-color: #000000;
  }
  &.grey {
    background-color: #e8e8e8;
  }

  .content {
    margin: 0 auto;
    max-width: 1000px;
    padding-top: 3.5rem;
    color: #000000;
  }

  .field-name-field-basic-color-title {

    font-family: 'open_sansbold',Verdana,Tahoma,'DejaVu Sans',sans-serif;
    font-size: 3.8rem;
    line-height: 1.2em;
    /* margin-bottom: 4.2rem; */
    text-align: center;
    margin-top: 2.1rem;
    margin-bottom: 2.1rem;
  }

}


/* color choice text colors - white */

.paragraphs-item-basic-color.ssublue .content,
.paragraphs-item-basic-color.ssublue .content h2,
.paragraphs-item-basic-color.tech .content,
.paragraphs-item-basic-color.tech .content h2,
.paragraphs-item-basic-color.bacon .content,
.paragraphs-item-basic-color.bacon .content h2,
.paragraphs-item-basic-color.wine .content,
.paragraphs-item-basic-color.wine .content h2,
.paragraphs-item-basic-color.charcoal .content,
.paragraphs-item-basic-color.charcoal .content h2,
.paragraphs-item-basic-color.black .content,
.paragraphs-item-basic-color.black .content h2 {
  color: #FFFFFF;
}

/* color choice text colors - black */

.paragraphs-item-basic-color.ssulightblue .content,
.paragraphs-item-basic-color.ssulightblue .content h2,
.paragraphs-item-basic-color.ivy .content,
.paragraphs-item-basic-color.ivy .content h2,
.paragraphs-item-basic-color.lakes .content,
.paragraphs-item-basic-color.lakes .content h2,
.paragraphs-item-basic-color.lobo .content,
.paragraphs-item-basic-color.lobo .content h2,
.paragraphs-item-basic-color.sunset .content,
.paragraphs-item-basic-color.sunset .content h2,
.paragraphs-item-basic-color.butterfly .content,
.paragraphs-item-basic-color.butterfly .content h2,
.paragraphs-item-basic-color.rockwall .content,
.paragraphs-item-basic-color.rockwall .content h2,
.paragraphs-item-basic-color.ives .content,
.paragraphs-item-basic-color.ives .content h2,
.paragraphs-item-basic-color.grey .content,
.paragraphs-item-basic-color.grey .content h2 {
  color: #000000;
}