/* PORTAL ARTICLE */

.article-title
{
  width:         100%;
  margin:        1rem 0 1rem 0;
  border-bottom: .0625rem solid @box-default-border-top-color;

  > h1
  {
    font-size:  3rem;
    color:      @light-blue;
    text-align: left;
  }
}

.article-body
{
  margin: 1rem;

  .article-header
  {
    margin:        0 0 .5rem 0;
    padding:       0 0 .5rem 0;
    border-bottom: .0625rem solid @box-default-border-top-color;

    .article-timestamp
    {
      font-size:  1.2rem;
      text-align: left;
      color:      #777777;
      margin:     0 1rem 0 1rem;
    }

    .article-btn-back
    {
      font-size: 1.2rem;
      color:     #777777;
      margin:    0 1rem 0 1rem;

      > a
      {
        color: #777777;
      }

      &:hover
      {
        opacity:         0.8;
        text-decoration: underline;
        cursor:          pointer;
      }
    }

    .article-tab
    {
      font-size:  1.2rem;
      text-align: left;
      color:      #777777;
      margin:     0 1rem 0 1rem;
    }
  }

  .article-image
  {
    background-color: transparent;
    text-align:       center;

    /* Extra Small Devices, Phones */
    @media only screen and (min-width: 0px)
    {
      padding-left:  10%;
      padding-right: 10%;
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width: 992px)
    {
      padding-left:  20%;
      padding-right: 20%;
    }

    .article-image-container
    {
      vertical-align: middle;
      position:       relative;

      img
      {
        max-width:  inherit;
        max-height: inherit;
      }

      /* Custom, iPhone Retina */
      @media only screen and (min-width: 320px)
      {
        max-width:  245px;
        max-height: 140px;
      }

      /* Extra Small Devices, Phones */
      @media only screen and (min-width: 480px)
      {
        max-width:  350px;
        max-height: 200px;
      }

      /* Small Devices, Tablets */
      @media only screen and (min-width: 768px)
      {
        max-width:  525px;
        max-height: 300px;
      }

      /* Medium Devices, Desktops */
      @media only screen and (min-width: 992px)
      {
        max-width:  525px;
        max-height: 300px;
      }

      /* Large Devices, Wide Screens */
      @media only screen and (min-width: 1200px)
      {
        max-width:  700px;
        max-height: 400px;
      }

      /* Large Devices, Wide Screens */
      @media only screen and (min-width: 1900px)
      {
        max-width:  1400px;
        max-height: 800px;
      }
    }
  }

  .article-description
  {
    margin: 2rem 1rem 1rem 1rem;
    width:  100%;
    height: 100%;

  }

  .article-footer
  {
    .clearfix();
    width:       100%;
    padding-top: .5rem;
    border-top:  .0625rem solid @box-default-border-top-color;
    text-align:  center;

    p
    {
      font-weight: 600;
      font-size:   1rem;
      color:       #555555;
    }

    > a.article-social-link
    {
      display:          inline-block;
      margin:           0 .5rem 0 .5rem;
      // border-color: @light-blue;
      // color:  @light-blue;
      background-color: transparent;
      overflow:         hidden;
      > i
      {
        // color: @light-blue;
      }
      &:hover
      {
        // border-color: @light-blue;
        color: transparent;
        // background-color: @light-blue;
        > i
        {
          color: #ffffff;
        }
      }
    }
  }

}