.blog-info.homeBlog
  article
    margin-bottom: 500px

.main-content .content-red-block.blog-articles > div.background-container
  margin-top: 20px

.main-content .content-red-block.homeBlog > div.background-container
  position: absolute
  width: 50%
  right: 0
  margin-top: 85px

  .background-article
    width: 100%
    right: -90%
    max-height: 335px

    &:nth-of-type(odd)
      background: $orange url('/images/structure/cross_pattern.png')
    &:nth-of-type(even)
      background: white url('/images/structure/block_pattern.png')

.blog-articles
  .article
    max-height: 335px
    overflow: hidden
    &:hover
      .article-hover
        +transform(scale(11.0))
  .background-article
    max-height: 335px

  .articles-block
    padding: 20px 0 25px
  &.homeBlog
    .articles-block
      padding-top: 85px

  .pagination
    min-height: 0px !important
    height: 50px
    ul
      +flex(space-around, center)
      li
        float: left
        color: white
        font-size: 20px
        +flex(center, center)
        margin: 0 5px
        &.active
          a
            color: $orange

        span
          +arrowRightWhite
          margin: 0 10px
        a
          +flex(center, center)
        &.hide
          visibility: hidden

        &.previous
          span
            +transform(rotate(180deg))

  .latestArticle
    margin-top: -585px
    padding: 0
    width: 110%
    margin-left: -10%
    max-height: 500px

    &.article
      background: none


      .article-image
        max-width: initial

      .article-content
        padding-top: 30px
        height: calc(100% - 30px)
        background: white
        overflow: hidden
        h4
          color: $orange

        .date
          position: initial

        .article-wrapper
          position: initial
          width: 100%
          margin-top: 40px

          p
            margin: 20px 0

        span.more
          color: $orange
          display: block
          font-size: 20px

      .icon-wrapper
        border-color: $orange
        bottom: initial
        .icon
          +arrowRightOrangeLarge

      .article-hover
        border-radius: 999999px
        width: 200px
        height: 200px
        +position(absolute, null 0 0 null)
        background: $blue
        +transform(scale(0.0))
        +transition(all 0.6s)

.blog-article
  .blog-content
    padding-top: 50px

    &.right
      margin-left: $contentBlock1Grid*3

    &.content-block
      img
        width: 100%

      .span6.left
        float: left


    ol
      list-style: decimal
    ul
      list-style: initial
    ul, ol
      padding-left: 20px
      li
        color: $borderColor
        font-size: 18px
        line-height: 28px
        margin-bottom: 15px
        padding-left: 40px

    p
      font-size: 18px
      line-height: 28px
      color: $borderColor
      margin-bottom: 20px
    &:last-child
      margin-bottom: 40px

+media-query(1950px)
  .blog-articles
    .latestArticle
      width: 105%
      margin-left: -5%

+media-query(1775px)
  .blog-articles
    .latestArticle
      width: 102.5%
      margin-left: -2.5%

+media-query(1685px)
  .blog-articles
    .latestArticle
      width: 100%
      margin-left: 0

+media-query(1100px)
  .blog-info.homeBlog
    article
      margin-bottom: 300px

  .blog-article
    .blog-content
      &.right
        margin: 0
        width: 96%

  .blog-articles
    .latestArticle
      margin-top: -385px
      height: 300px!important
      &.article
        .article-content
          .article-wrapper
            margin-top: 10px

    .articles-block
      width: inherit
      margin-left: inherit

    .article
      .article-content
        .article-wrapper
          p
            display: none

+media-query(650px)
  .blog-article
    .blog-content
      .span6
        width: 100%
        margin-bottom: 50px
        padding: 0

+media-query(500px)
  .blog-articles
    .latestArticle.article
      .date
        display: none