/**
 * Logos call-out styles.
 */

@import '../reusable.less';

.logos-callout {
  padding: 20px 0 0 0;
  text-align: center;

  @media @desktop {
    padding: 44px 0 0 0;
  }

  .uppercase {
    text-transform: uppercase;
    margin: 35px 0 45px;
  }

  .uppercase, p {
    @media @desktop-tablet {
      margin: 0 0 75px 0;
    }
  }

  .logos {
    width: 100%;



    .field-name-field-iin-comp-lc-logo .field-items,
    ul {
      width: 70%;
      margin: 0 auto;
      padding: 0;

      &:after {
        content: '';
        display: block;
        clear: both;
      }

      .field-item,
      li {
        float: none;
        width: 80%;
        margin: 0 auto 48px;
        list-style-type: none;

        @media @desktop-tablet {
          vertical-align: middle;
          display: inline-block;
          width: auto; 

          img {
            max-width: none;
            vertical-align: bottom;
            margin-right: 24px;
          }
        }

        @media @desktop {
          margin-bottom: 70px;
        }
      }

      @media @desktop-tablet {
        width: 100%;
      }
    }



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

  img {
    width: auto;
  }

  .marylandu {
    height: 75px;
    width: 125px;
  }

  .ciis {
    height: 48px;
    width: 250px;
  }

  .calstatelb {
    height: 75px;
    width: 75px;
  }

  .goddardc {
    height: 53px;
    width: 225px;
  }

  .excelsiorc {
    height: 60px;
    width: 193px;
  }
}

/* styles for single-image mobile logos only */
.logos-mobile .logos-callout .logos .field-name-field-iin-comp-lc-logo .field-items, .logos-mobile .logos-callout .logos .field-name-field-iin-comp-lc-logo .field-items .field-item { width: 100%; }


.node-iin-component-logos-callout {
  .pane-title { text-align: center; font-size: 28px; font-weight: 200;
    line-height: 32px; color: #666666; }
  .field-name-field-lc-text { text-align: center; font-size: 16px; font-weight: normal; 
    p { margin: 40px 0; color: #333333; }
  }
  .field-collection-container { margin: 0; padding: 0; border: none;
    .field-collection-view { margin: 0; padding: 0; border: none; }
    .field-items { display: inline-block; vertical-align: top; width: auto;
      .field-item { display: inline-block; vertical-align: middle; width: auto;
        @media @mobile {
          width: 100%;
        }
        a { display: block;
          &:hover { opacity: 0.8; filter: alpha(opacity=80); }
        }
      }
    }
  }
}