/* ==========================================================================
   09_GENERALS: ARTICLE
   --------------------------------------------------------------------------
   * README

   * ARTICLE
   * ARTICLE HEADER
   * ARTICLE CONTENT
   * ARTICLE FOOTER
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the Article default styles.
 * That means they apply to the HTML component you most likely will use to
 * manage the actual content inside a .section__content element if needed, and
 * therefore, they apply only to the pages that displays this component.

 * If you need to deal with an exception to these Article default styles, you
 * should manage it by adding a .article--modifier class to the .article element
 * and develop the given exception nested to this .article--modifier class in
 * stylesheet #17 under the corresponding page subtitle.

 * If you need to deal with styles for a new type of Article component or a new
 * sub-element for an existing one, you should develop them in this stylesheet,
 * under a new component subtitle or under the correspondent one accordingly,
 * separating them in Structure, Behaviour or Appearance styles as appropriate.
 */

/* ARTICLE
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To manage second-level information in any page, as many times as needed. The
   most complex part is the .article__header element, as it contemplates several
   possible sub-elements (explicited in the class names) - of course, only keep
   the ones that suit your needs in each case.
   --------------------------------------------------------------------------

    <article class="article">
        <div class="article__header">
            <div class="article__header__image">
                <img src="X">
            </div>

            <div class="article__header__text">
                <h3 class="article__header__text__title">
                    <span class="article__header__text__title__icon"></span> X
                </h3>

                <div class="article__header__text__subtitle">X</div>
            </div>

            <div class="article__header__actions">
                <div class="article__header__actions__links">
                    <a class="link" href="X">X</a>

                    <a class="link" href="X">X</a>
                </div>

                <a class="button button--default" href="X">X</a>
            </div>
        </div>

        <div class="article__content">X</div>

        <div class="article__footer">X</div>
    </article>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.article {
    width: 100%;
    margin: 0 auto;
}

* + .article {
    margin-top: 32px;
}

/* ARTICLE HEADER
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.article__header {
    width: 100%;
    margin-bottom: 24px;
}

.article__header__image {
    width: 200px;
    padding-right: 30px;
}

.article__header__image img {
    display: block;
    margin: auto;
    width: 100%;
    max-width:170px;
}

.article__header__text__title__icon {
    margin-right: 8px;
}

*+.article__header__text__subtitle {
    margin-top: 20px;
}

*+.article__header__text__paragraph {
    margin-top: 6px;
}

.article__header__actions>*+* {
    margin-left: 10px;
}

.article__header__actions__links {
    display: inline-block;
    padding: 12px 0;
}

/* Behaviour
   -------------------------------------------------------------------------- */

/*
 * 1. To center vertically the content.
 */
.article__header {
    display: table; /* 1 */
}

.article__header>* {
    display: table-cell; /* 1 */
    vertical-align: middle; /* 1 */
}

.article__header__text__title__icon {
    vertical-align: text-top;
}

.article__header__actions {
    text-align: right;
    white-space: nowrap;
}

/* Appearance
   -------------------------------------------------------------------------- */
.article__header__image img {
    border-radius: 100%;
}

.article__header__text__title {
    font-weight: 600;
}

.article__header__text__title--1 {
    font-size: 16px;
    letter-spacing: 1.2px;
    margin-bottom: 20px;
}

.article__header__text__title--2 {
    color: #000000;
    font-size: 52px;
    line-height: 60px;
    font-family: 'LarishMcKinsey', Arial, Helvetica, sans-serif;
}

.article__header__text__title--3 {
    font-size: 30px; /* Used in View More (in Content), Report/Stats (Dashboard) and Submit Job and Task article titles - the wizard Separator styles emules this */
    line-height: 36px;
    font-family: 'LarishMcKinsey';
}

.article__header__text__title--4 {
    font-size: 16px;
}

.article__header__text__title--5 {
    font-size: 30px;
    line-height: 36px;
}

.article__header__text__title--6 {
    font-size: 18px;
    line-height: 22px;
    font-weight:600;
}

.article__header__text__title--7 {
    font-family: 'LarishMcKinsey';
    font-size:36px;
    color:#fff;
    line-height: 42px;
}

.article__header__text__title--8 {
    font-size:24px;
    line-height: 30px;
}

.article__header__text__subtitle--bigger{
    font-size:20px;
    line-height: 24px;
}

.article--links .article__header__text__title--1,
.article--events .article__header__text__title--1,
.article--profile .article__header__text__title--1,
.article--meetings .article__header__text__title--1,
.article--interests .article__header__text__title--1,
.article--recruiting .article__header__text__title--1,
.article--applications .article__header__text__title--1,
.article--slider-alumni .article__header__text__title--1 {
    color: #000000;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0;
}

.article--events .article__header__text__title--1,
.article--profile .article__header__text__title--1,
.article--meetings .article__header__text__title--1,
.article--applications .article__header__text__title--1 {
    font-size: 28px;
    margin-bottom: 0;
}

.article--links .article__header__text__title--1,
.article--interests .article__header__text__title--1,
.article--recruiting .article__header__text__title--1,
.article--slider-alumni .article__header__text__title--1 {
    font-size: 24px;
}

.article--links .article__header__text__title--1,
.article--recruiting .article__header__text__title--1 {
    margin-bottom: 24px;
}

.article--slider-alumni .article__header__text__title--1 {
    margin-bottom: 32px;
}

.pageChoosePassword .article__header__text__title--4 {
    color: #333333;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 0.5em;
}

@media all and (max-width:768px){
  .article__header__text__title--2{
      font-size:30px;
      line-height: 42px;
  }

  .article__header__text__title--7 {
    font-size:24px;
    line-height:normal;
  }

}
/* ARTICLE CONTENT
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.article__content+.article__content {
    margin-top: 10px;
}

/* ARTICLE FOOTER
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.article__footer {
    margin-top: 16px;
}