<commit_before>@import "../../colors/colors";
@import "../../layout/mixins";
@import "../../layout/responsive";

.announcement2 {
  background-color: #000066;
  // padding: 15px 0;

  .row {
    display: flex;
    align-items: center;
  }

  .profile-photo {
    text-align: center;
    display: none;
    img {
      max-width: 70px;
      padding: 10px;
      background: #ffe7ce;
      border-radius: 4px;
    }
  }

  .content {
    font-size: 16px;
    line-height: 46px;
    padding: 7px 0px 7px 15px;
    color:black;
    font-weight: 300;
  }

  .content .link-w-arrow {
    color: #ffffff;
    font-weight: 600;
    &:hover {
      text-decoration: none;
      color: @bg-red-transparant;
    }
  }
}

.announcement {
  background-color: #ffeedc;
  // padding: 15px 0;

  .row {
    display: flex;
    align-items: center;
  }

  .profile-photo {
    text-align: center;
    display: none;
    img {
      max-width: 70px;
      padding: 10px;
      background: #ffe7ce;
      border-radius: 4px;
    }
  }

  .content {
    font-size: 16px;
    line-height: 46px;
    padding: 7px 0px 7px 15px;
    color:black;
    font-weight: 300;
  }

  .content .link-w-arrow {
    color: @primary-color;
    font-weight: 600;
    &:hover {
      text-decoration: none;
      color: @bg-red-transparant;
    }
  }
}

.carousel-fade {
  .carousel-inner {
    .item {
      transition-property: opacity;
      transition-duration: 1.5s;
      transition-timing-function: linear;
    }
    .item,
    .active.left,
    .active.right {
      opacity: 0;
    }
    .active,
    .next.left,
    .prev.right {
      opacity: 1;
    }
    .next,
    .prev,
    .active.left,
    .active.right {
      left: 0;
      transform: translate3d(0, 0, 0);
    }
  }
  .carousel-control {
    z-index: 2;
  }
}

#main_content {
  margin-top: 0;
  min-height: 0;
}

#mainnav {
  margin: 0;
}

#myCarousel-1 {
  margin-bottom: 60px;
  .featured-content-title {
    color: @bg-light;
    font-size: 2.9166666666666665rem;
    font-family: 'Amiri', serif;
    font-weight: 700;
  }
  .item {
    cursor: pointer;
    img {
      width: 100%;
    }

    & > .floating-container {
      position: absolute;
      width: 380px;
      margin: auto;
      z-index: 1;
      .floating-carousel-buttons {
        position: relative;
        margin-top: 50px
      }

      .relative-container {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;

        & > .floating-content {
          padding: 10px;
          width: 380px;

          h1 {
            text-align: center;
          }

          h1, .link-to-page a {
            color: #FFF;
          }
        }
      }

    }

    .item-container {
      .link-to-page {

      }
      .margin-left {
        margin-left: 10px;
      }
      & > div:first-child {
        margin: 0px auto;
        text-align: center;
        span {
          background: @bg-light;
          padding: 2px 10px;
          letter-spacing: 2px;
          text-transform: uppercase;
        }
      }
      h1, .featured-content-title {
        color: @text-light;
        font-size: 5.216667rem;
        color: #FFF;
        padding: 40px 0;
        margin: 0;
        text-align: center;
        line-height: 60px;
        letter-spacing: -1.9px;
        text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.5);
      }

      & > .link-to-page {
        border-top: 1px solid @bg-light;
        border-bottom: 1px solid @bg-light;
        padding: 14px;
        text-align: center;
        a {
          padding: 15px 20px;
          .font-size(16);
          color: @text-light;

          span {
            max-width: 285px;
            display: inline-block;
            height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
            text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.5);
          }

          &:hover {
            color: @primary-color;
          }
        }
      }
    }
  }

  .floating-carousel-buttons {
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
    height: 40px;
    margin: auto;

    .carousel-buttons-wrapper {
      position: relative;
      max-width: 380px;
      text-align: center;

      .carousel-control-container {
        border: 1px solid @lighter-grey;
        height: 38px;
        display: inline-block;
        margin: auto;

        .carousel-control {
          &.left, &.right {
            float: left;
            position: static;
            background: none;
            width: 44px;
            height: 36px;
            color: @lighter-grey;
            opacity: 1;
            background: @bg-lighter-transparent;

            &:hover {
              opacity: 0.6;
            }

            i {
              .font-size(34);
              line-height: 34px;
            }
          }
          &.right {
            border-left: 1px solid @bg-light;
          }
        }
      }
    }

  }

}

#myCarousel-2 {
  margin-bottom: 60px;

  .carousel-inner {
    .item {

      & > div > div:last-child {
        & > a {
          display: block;
          position: relative;
          max-width: 770px;
          height: 520px;
          overflow: hidden;

          img {
            width: auto;
            max-width: 100%;
            height: auto;
            max-height: 100%;
            display: block;
            vertical-align: middle;

            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
          }
        }
      }
    }
  }

  .carousel-title {
    h4 {
      color: @primary-color;
      margin-bottom: 20px;
    }

    div {
      color: @primary-color;
      margin-bottom: 20px;
      font-family: 'Fira Sans', 'Open Sans', sans-serif;
      font-size: 18px;
      margin-top: 10px;
      line-height: 1.1;
      font-weight: 500;

    }
  }

  .latest-item-title {
    line-height: 38px;
    font-size: 3.4rem;
    margin-top: 0px;
    font-family: 'Amiri', serif;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -1.5px;
  }
  .carousel-control-container {
    border: 1px solid @light-grey;
    height: 40px;
    width: 90px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .carousel-control {
    &.left, &.right {
      background: none;
      width: 44px;
      color: @light-grey;
      opacity: 1;
      background: @bg-lighter-transparent;
      text-shadow: none;
      &:hover {
        opacity: 0.6;
      }
      i {
        .font-size(34);
      }
    }
    &.right {
      border-left: 1px solid @light-grey;
    }
  }
  .gallery-tile {
    margin-bottom: 0;
    .name-primary {
      padding-bottom: 20px;
    }
    img {
      max-height: 80%;
      max-width: 100%;
    }
    .gallery-tile-info {
      .desc-module {
        margin: 0 0 1em 0;
        overflow: hidden;
      }
      .desc-module p {
        margin: 0;
      }
      .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
      }
      .date {
        color: @grey;
        .dot-seperator {
          padding: 0px 5px 2px 5px;
          font-weight: 800;
        }

        .link-dark {
          &:hover {
            color: @primary-color;
          }
        }
        a {
          color: @grey;
          &:hover {
            color: @primary-color;
          }
          font-weight: 400;
          font-size: 1em;
          letter-spacing: 1px;
        }
      }
      min-height: auto;
      h2 {
        margin-top: 0;
        .font-size(36);
        line-height: 35px;
      }
      p {
        .font-size(16);
        line-height: inherit;
        font-size: 1.3333333333333333rem;
        margin-bottom: 15px;
      }
      .name-primary {
        .font-size(16);
        + a {
          .font-size(16);
          color: @grey;
          padding-bottom: 40px;
        }
      }
    }
  }
  .carousel-inner {
    .view-all {
      margin-top: 20px;
      text-align: left;
      margin-bottom: 45px;
      padding-top: 15px;
      a {
        span {
          margin: 0;
          padding: 0;
        }
      }
    }
  }
  .carousel-control-container {
    margin-left: 0;
  }
}

.home-article-grid-1 {
  background: @lighter-grey;
  padding: 40px 0 20px 0;
  margin-bottom: 60px;
  .date {
    .dot-seperator {
      margin: 5px;
    }
    a {
      color: @grey;
      margin-right: 0;
      padding-bottom: 10px;
      &:hover {
        color: @primary-color;
      }
    }
  }

  .tags-label {
    background: white;
  }
  .infocus-tag {
    display: inline;
  }

  .grid {
    .name-primary {
      :hover {
        color: @primary-color;
      }
    }
    .infocus-title-primary {
      &:hover {
        color: #444444;
      }
    }
    .author-name {
      font-size: 14px;
      letter-spacing: 0.3px;
    }

    .date-infocus, .location-name {
      font-size: 14px;
    }

    .infocus-item-title {
      font-family: 'Amiri', serif;
      font-weight: 700;
      font-size: 2.3rem;
      margin-bottom: 8px;
      line-height: 1.1;
      color: @darker-grey;
      letter-spacing: -0.7px;
    }

    margin-bottom: 0;
    img {
    }
  }

  .in_focus_page1 {
    .link-dark {
      &:hover {
        color: @primary-color;
      }
      color: @grey;
    }
  }

  .in_focus_page2 {
    .link-dark {
      &:hover {
        color: @primary-color;
      }
      color: @grey;
    }
  }
  .link-dark {
    &:hover {
      color: @primary-color;
    }
    color: @darker-grey;
    .font-size(14);
  }
}

.home-article-grid-2 {
  .grid {
    .more-story-primary-title {
      &:hover {
        color: #444444;
      }
      .item-section-title {
        font-weight: 700;
        font-family: 'Amiri', serif;
        color: @darker-grey;
        font-size: 24px;
        text-transform: none;
        margin-bottom: 20px;
      }
      :lang(ml) {
        font-weight: 500;
      }
    }
    .name-primary {
      :hover {
        color: @primary-color;
      }
    }
    .author-name {
      font-size: 16px;
    }
  }
  .view-article {
    border-top: 1px solid @light-grey;
    margin-top: 20px;
    padding-top: 20px;
    a {
      .font-size(16);
      color: @dark-grey;
      i {
        color: @grey;
      }
      &:hover {
        color: @primary-color;
        i {
          text-decoration: none;
        }
      }
      span {
        padding: 0 10px;
      }
    }
  }
  .article-image-icon {
    position: relative;
    div {
      position: absolute;
      background: @bg-dark-transparent;
      padding: 5px 10px;
      color: @light-grey;
      .font-size(16);
    }
    img {
      cursor: pointer;
      + div {
        top: 0;
        left: 15px;
        border-radius: 0 0 5px 0;
        + div {
          bottom: 23px;
          left: 18px;
          border-radius: 0 5px 0 0;
        }
      }
    }
  }
}

.home-article-grid-3 {
  margin-bottom: 60px;
  .large {
    a {
      img {
        width: 100% !important;
        margin: 0 auto;
      }
    }
    .category-0, .category-1, .category-2, .category-3 {
      img {
        width:370px;
        margin:0 auto;
      }
    }

  }

  &.story-grid .row .grid.large .grid-container {
    width: auto;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 0px;
    padding-top: 130px;
    text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.5);

    .category-image-overlay-text {
      font-family: 'Amiri', serif;
      font-weight: 700;
      line-height: 38px;
      font-size: 3.4rem;
    }
    .title-grid {
      font-size: 20px;
    }

  }

  .grid {
    padding: 10px;
    &.share {
      h1 {
        min-height: 265px;
      }
    }
    .desc-para {
      line-height: 15px;
      margin-top: 0px;
    }
    .fa {
      padding-top: 8px;
    }
    .all-categ-head {
      padding-bottom: 50px;
      margin-top: 0px;
    }
    h4 {
      .font-size(30);
      color: @text-title-light;
      font-weight: 300;
    }
    h1.subtitle {
      font-weight: 300;
    }
    .subtitle {
      &.large-second{
        line-height: 1.1em;
        word-wrap: break-word;
      }
      .font-size(58);
      margin: 0;
      color: @text-title-light;
      font-weight: 300;
    }
    .mid-below-link {
      padding: 15px 0;

      a {
        color: @darker-grey;
      }
    }
    .mid-link {
      border-top: 1px solid @grey;
      border-bottom: 1px solid @grey;
      padding: 15px 0;
      a {
        color: @darker-grey;
      }
    }
    h6 {
      color: @grey;
    }
    p {
      color: @text-title-light;
    }
    a {
      color: @grey;
      &:hover {
        color: @link-primary;
      }
    }
  }
}

@media (max-width: @screen-sm-max) {
  .navbar-header {
    position: relative;
    .header-title-wrapper {
      display: inline-block;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 32px;
      text-align: center;
    }
  }

  .home-article-grid-3 .grid.share h1 {
    min-height: auto;
  }

  .home-article-grid-1 {
    margin-bottom: 20px;

    .grid {
      margin-bottom: 20px;
    }
    .infocus-title-primary {
      padding-top: 10px;
    }
  }

  #myCarousel-2 {
    margin-bottom: 20px;

    .carousel-inner {
      .item {
        & > div > div:last-child {
          & > a {
            height: 320px;
            img {
              margin: 0;
            }
          }
        }
      }
    }
  }

  #myCarousel-1 {
    margin-bottom: 20px;
    .item {
      .floating-container {
        position: relative;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #000;
        padding: 20px 0px;
        .relative-container .floating-content {
          .link-to-page {
            padding: 10px;

            a {
              .font-size(18);
            }
          }
          h1, .featured-content-title {
            padding: 0px 0 1px 0;
            font-size: 35px;
          }
          &.item-container {
            margin: 0 auto;
            h1, h4 {
              padding: 15px 0px;
            }
          }
        }
      }

    }

    .floating-carousel-buttons {
      top: 390px;
      .carousel-buttons-wrapper {
        margin: auto;
      }
    }
  }

  #mainnav .navbar-header .navbar-brand-title-link {
    text-decoration: none;
  }

  #mainnav .navbar-header .navbar-brand-title {
    color: @dark-grey;
    line-height: 36px;
  }

  .home-page #mainnav .navbar-header .navbar-brand-sub-title {
    font-size: 1.4vw;
  }

  .home-page #mainnav .navbar-header .navbar-brand {
    position: relative;
    float: left;
  }

  #mainnav .navbar-header .navbar-brand img {
    width: 57px;
    left: 0px;
    position: absolute;
  }

  .announcement.profile-photo {
    img {
      width: 80%;
    }
  }

  .announcement .content {
    font-size: 14px;
    line-height: 19px;
    padding: 20px;
  }

}

.red-angle-right {
  color: @primary-color !important;
  padding-left: 5px;
  font-weight: 700;
}

.pari-doing-block {
  border-top: 1px solid @border-dark;
  margin-top: 30px;
  padding-top: 40px;
  .pari-do-link {
    padding-bottom: 10px;
  }
  a {
    text-decoration: none;
    color: @dark-grey;
    letter-spacing: 1px;
    font-size: 1.5em;
    &:hover {
      cursor: pointer;
      color: @primary-color;
    }
  }
  .question-heading {
    font-size: 36px;
    color: @primary-color;
    font-family: 'Amiri', serif;
    font-weight: 700;
    margin-bottom: 20px;
  }
  :lang(ml) {
    font-weight: 500;
  }
}

.more-section {
  padding-left: 15px;
  padding-bottom: 10px;
}

@media (max-width: @screen-sm-max) {
  body {
    padding-top: 0px !important;

    .resource-title {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
    }
    .home-article-grid-1 {
      .infocus-tag {
        display: inline-block;
        margin-bottom: 20px;
      }
      .infocus-title {
        display: inline-block;
        line-height: 22px;
      }
    }
    .resource-description {
      top: 15px;
    }
  }

}

@media (max-width: @screen-xs-max) {
  #myCarousel-1 .floating-carousel-buttons {
    top: 165px;
  }

  #mainnav .navbar-header .navbar-brand-title {
    display: block !important;
  }

  .home-page #mainnav .navbar-header .navbar-brand-sub-title {
    display: block !important;
  }

}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 .home-article-grid-1 {
   .infocus-title-primary {
     padding-top: 10px;
   }
 }
}

@media (min-width: 320) and (max-width: 420) {
  .announcement {
      background-color: black;
      padding: 7px 0;

    .row {
      display: flex;
      align-items: center;
    }

    .profile-photo {
      text-align: center;
      display: none;
      img {
        max-width: 70px;
        padding: 10px;
        background: #ffe7ce;
        border-radius: 4px;
      }
    }

    .content {
      font-size: 15px;
      line-height: 46px;
      padding-left: 15px;
      color:white;
    }

    .content .link-w-arrow {
      color: white;
      font-weight: 700;
      background-color: @primary-color;
      padding: 6px 10px;
      border-radius: 3px;
      &:hover {
        text-decoration: none;
        color: @bg-red-transparant;
      }
    }
  }
}
<commit_msg>lighter blue<commit_after>@import "../../colors/colors";
@import "../../layout/mixins";
@import "../../layout/responsive";

.announcement2 {
  background-color: #003366;
  // padding: 15px 0;

  .row {
    display: flex;
    align-items: center;
  }

  .profile-photo {
    text-align: center;
    display: none;
    img {
      max-width: 70px;
      padding: 10px;
      background: #ffe7ce;
      border-radius: 4px;
    }
  }

  .content {
    font-size: 16px;
    line-height: 46px;
    padding: 7px 0px 7px 15px;
    color:black;
    font-weight: 300;
  }

  .content .link-w-arrow {
    color: #ffffff;
    font-weight: 600;
    &:hover {
      text-decoration: none;
      color: @bg-red-transparant;
    }
  }
}

.announcement {
  background-color: #ffeedc;
  // padding: 15px 0;

  .row {
    display: flex;
    align-items: center;
  }

  .profile-photo {
    text-align: center;
    display: none;
    img {
      max-width: 70px;
      padding: 10px;
      background: #ffe7ce;
      border-radius: 4px;
    }
  }

  .content {
    font-size: 16px;
    line-height: 46px;
    padding: 7px 0px 7px 15px;
    color:black;
    font-weight: 300;
  }

  .content .link-w-arrow {
    color: @primary-color;
    font-weight: 600;
    &:hover {
      text-decoration: none;
      color: @bg-red-transparant;
    }
  }
}

.carousel-fade {
  .carousel-inner {
    .item {
      transition-property: opacity;
      transition-duration: 1.5s;
      transition-timing-function: linear;
    }
    .item,
    .active.left,
    .active.right {
      opacity: 0;
    }
    .active,
    .next.left,
    .prev.right {
      opacity: 1;
    }
    .next,
    .prev,
    .active.left,
    .active.right {
      left: 0;
      transform: translate3d(0, 0, 0);
    }
  }
  .carousel-control {
    z-index: 2;
  }
}

#main_content {
  margin-top: 0;
  min-height: 0;
}

#mainnav {
  margin: 0;
}

#myCarousel-1 {
  margin-bottom: 60px;
  .featured-content-title {
    color: @bg-light;
    font-size: 2.9166666666666665rem;
    font-family: 'Amiri', serif;
    font-weight: 700;
  }
  .item {
    cursor: pointer;
    img {
      width: 100%;
    }

    & > .floating-container {
      position: absolute;
      width: 380px;
      margin: auto;
      z-index: 1;
      .floating-carousel-buttons {
        position: relative;
        margin-top: 50px
      }

      .relative-container {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;

        & > .floating-content {
          padding: 10px;
          width: 380px;

          h1 {
            text-align: center;
          }

          h1, .link-to-page a {
            color: #FFF;
          }
        }
      }

    }

    .item-container {
      .link-to-page {

      }
      .margin-left {
        margin-left: 10px;
      }
      & > div:first-child {
        margin: 0px auto;
        text-align: center;
        span {
          background: @bg-light;
          padding: 2px 10px;
          letter-spacing: 2px;
          text-transform: uppercase;
        }
      }
      h1, .featured-content-title {
        color: @text-light;
        font-size: 5.216667rem;
        color: #FFF;
        padding: 40px 0;
        margin: 0;
        text-align: center;
        line-height: 60px;
        letter-spacing: -1.9px;
        text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.5);
      }

      & > .link-to-page {
        border-top: 1px solid @bg-light;
        border-bottom: 1px solid @bg-light;
        padding: 14px;
        text-align: center;
        a {
          padding: 15px 20px;
          .font-size(16);
          color: @text-light;

          span {
            max-width: 285px;
            display: inline-block;
            height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
            text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.5);
          }

          &:hover {
            color: @primary-color;
          }
        }
      }
    }
  }

  .floating-carousel-buttons {
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
    height: 40px;
    margin: auto;

    .carousel-buttons-wrapper {
      position: relative;
      max-width: 380px;
      text-align: center;

      .carousel-control-container {
        border: 1px solid @lighter-grey;
        height: 38px;
        display: inline-block;
        margin: auto;

        .carousel-control {
          &.left, &.right {
            float: left;
            position: static;
            background: none;
            width: 44px;
            height: 36px;
            color: @lighter-grey;
            opacity: 1;
            background: @bg-lighter-transparent;

            &:hover {
              opacity: 0.6;
            }

            i {
              .font-size(34);
              line-height: 34px;
            }
          }
          &.right {
            border-left: 1px solid @bg-light;
          }
        }
      }
    }

  }

}

#myCarousel-2 {
  margin-bottom: 60px;

  .carousel-inner {
    .item {

      & > div > div:last-child {
        & > a {
          display: block;
          position: relative;
          max-width: 770px;
          height: 520px;
          overflow: hidden;

          img {
            width: auto;
            max-width: 100%;
            height: auto;
            max-height: 100%;
            display: block;
            vertical-align: middle;

            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
          }
        }
      }
    }
  }

  .carousel-title {
    h4 {
      color: @primary-color;
      margin-bottom: 20px;
    }

    div {
      color: @primary-color;
      margin-bottom: 20px;
      font-family: 'Fira Sans', 'Open Sans', sans-serif;
      font-size: 18px;
      margin-top: 10px;
      line-height: 1.1;
      font-weight: 500;

    }
  }

  .latest-item-title {
    line-height: 38px;
    font-size: 3.4rem;
    margin-top: 0px;
    font-family: 'Amiri', serif;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -1.5px;
  }
  .carousel-control-container {
    border: 1px solid @light-grey;
    height: 40px;
    width: 90px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .carousel-control {
    &.left, &.right {
      background: none;
      width: 44px;
      color: @light-grey;
      opacity: 1;
      background: @bg-lighter-transparent;
      text-shadow: none;
      &:hover {
        opacity: 0.6;
      }
      i {
        .font-size(34);
      }
    }
    &.right {
      border-left: 1px solid @light-grey;
    }
  }
  .gallery-tile {
    margin-bottom: 0;
    .name-primary {
      padding-bottom: 20px;
    }
    img {
      max-height: 80%;
      max-width: 100%;
    }
    .gallery-tile-info {
      .desc-module {
        margin: 0 0 1em 0;
        overflow: hidden;
      }
      .desc-module p {
        margin: 0;
      }
      .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
      }
      .date {
        color: @grey;
        .dot-seperator {
          padding: 0px 5px 2px 5px;
          font-weight: 800;
        }

        .link-dark {
          &:hover {
            color: @primary-color;
          }
        }
        a {
          color: @grey;
          &:hover {
            color: @primary-color;
          }
          font-weight: 400;
          font-size: 1em;
          letter-spacing: 1px;
        }
      }
      min-height: auto;
      h2 {
        margin-top: 0;
        .font-size(36);
        line-height: 35px;
      }
      p {
        .font-size(16);
        line-height: inherit;
        font-size: 1.3333333333333333rem;
        margin-bottom: 15px;
      }
      .name-primary {
        .font-size(16);
        + a {
          .font-size(16);
          color: @grey;
          padding-bottom: 40px;
        }
      }
    }
  }
  .carousel-inner {
    .view-all {
      margin-top: 20px;
      text-align: left;
      margin-bottom: 45px;
      padding-top: 15px;
      a {
        span {
          margin: 0;
          padding: 0;
        }
      }
    }
  }
  .carousel-control-container {
    margin-left: 0;
  }
}

.home-article-grid-1 {
  background: @lighter-grey;
  padding: 40px 0 20px 0;
  margin-bottom: 60px;
  .date {
    .dot-seperator {
      margin: 5px;
    }
    a {
      color: @grey;
      margin-right: 0;
      padding-bottom: 10px;
      &:hover {
        color: @primary-color;
      }
    }
  }

  .tags-label {
    background: white;
  }
  .infocus-tag {
    display: inline;
  }

  .grid {
    .name-primary {
      :hover {
        color: @primary-color;
      }
    }
    .infocus-title-primary {
      &:hover {
        color: #444444;
      }
    }
    .author-name {
      font-size: 14px;
      letter-spacing: 0.3px;
    }

    .date-infocus, .location-name {
      font-size: 14px;
    }

    .infocus-item-title {
      font-family: 'Amiri', serif;
      font-weight: 700;
      font-size: 2.3rem;
      margin-bottom: 8px;
      line-height: 1.1;
      color: @darker-grey;
      letter-spacing: -0.7px;
    }

    margin-bottom: 0;
    img {
    }
  }

  .in_focus_page1 {
    .link-dark {
      &:hover {
        color: @primary-color;
      }
      color: @grey;
    }
  }

  .in_focus_page2 {
    .link-dark {
      &:hover {
        color: @primary-color;
      }
      color: @grey;
    }
  }
  .link-dark {
    &:hover {
      color: @primary-color;
    }
    color: @darker-grey;
    .font-size(14);
  }
}

.home-article-grid-2 {
  .grid {
    .more-story-primary-title {
      &:hover {
        color: #444444;
      }
      .item-section-title {
        font-weight: 700;
        font-family: 'Amiri', serif;
        color: @darker-grey;
        font-size: 24px;
        text-transform: none;
        margin-bottom: 20px;
      }
      :lang(ml) {
        font-weight: 500;
      }
    }
    .name-primary {
      :hover {
        color: @primary-color;
      }
    }
    .author-name {
      font-size: 16px;
    }
  }
  .view-article {
    border-top: 1px solid @light-grey;
    margin-top: 20px;
    padding-top: 20px;
    a {
      .font-size(16);
      color: @dark-grey;
      i {
        color: @grey;
      }
      &:hover {
        color: @primary-color;
        i {
          text-decoration: none;
        }
      }
      span {
        padding: 0 10px;
      }
    }
  }
  .article-image-icon {
    position: relative;
    div {
      position: absolute;
      background: @bg-dark-transparent;
      padding: 5px 10px;
      color: @light-grey;
      .font-size(16);
    }
    img {
      cursor: pointer;
      + div {
        top: 0;
        left: 15px;
        border-radius: 0 0 5px 0;
        + div {
          bottom: 23px;
          left: 18px;
          border-radius: 0 5px 0 0;
        }
      }
    }
  }
}

.home-article-grid-3 {
  margin-bottom: 60px;
  .large {
    a {
      img {
        width: 100% !important;
        margin: 0 auto;
      }
    }
    .category-0, .category-1, .category-2, .category-3 {
      img {
        width:370px;
        margin:0 auto;
      }
    }

  }

  &.story-grid .row .grid.large .grid-container {
    width: auto;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 0px;
    padding-top: 130px;
    text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.5);

    .category-image-overlay-text {
      font-family: 'Amiri', serif;
      font-weight: 700;
      line-height: 38px;
      font-size: 3.4rem;
    }
    .title-grid {
      font-size: 20px;
    }

  }

  .grid {
    padding: 10px;
    &.share {
      h1 {
        min-height: 265px;
      }
    }
    .desc-para {
      line-height: 15px;
      margin-top: 0px;
    }
    .fa {
      padding-top: 8px;
    }
    .all-categ-head {
      padding-bottom: 50px;
      margin-top: 0px;
    }
    h4 {
      .font-size(30);
      color: @text-title-light;
      font-weight: 300;
    }
    h1.subtitle {
      font-weight: 300;
    }
    .subtitle {
      &.large-second{
        line-height: 1.1em;
        word-wrap: break-word;
      }
      .font-size(58);
      margin: 0;
      color: @text-title-light;
      font-weight: 300;
    }
    .mid-below-link {
      padding: 15px 0;

      a {
        color: @darker-grey;
      }
    }
    .mid-link {
      border-top: 1px solid @grey;
      border-bottom: 1px solid @grey;
      padding: 15px 0;
      a {
        color: @darker-grey;
      }
    }
    h6 {
      color: @grey;
    }
    p {
      color: @text-title-light;
    }
    a {
      color: @grey;
      &:hover {
        color: @link-primary;
      }
    }
  }
}

@media (max-width: @screen-sm-max) {
  .navbar-header {
    position: relative;
    .header-title-wrapper {
      display: inline-block;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 32px;
      text-align: center;
    }
  }

  .home-article-grid-3 .grid.share h1 {
    min-height: auto;
  }

  .home-article-grid-1 {
    margin-bottom: 20px;

    .grid {
      margin-bottom: 20px;
    }
    .infocus-title-primary {
      padding-top: 10px;
    }
  }

  #myCarousel-2 {
    margin-bottom: 20px;

    .carousel-inner {
      .item {
        & > div > div:last-child {
          & > a {
            height: 320px;
            img {
              margin: 0;
            }
          }
        }
      }
    }
  }

  #myCarousel-1 {
    margin-bottom: 20px;
    .item {
      .floating-container {
        position: relative;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #000;
        padding: 20px 0px;
        .relative-container .floating-content {
          .link-to-page {
            padding: 10px;

            a {
              .font-size(18);
            }
          }
          h1, .featured-content-title {
            padding: 0px 0 1px 0;
            font-size: 35px;
          }
          &.item-container {
            margin: 0 auto;
            h1, h4 {
              padding: 15px 0px;
            }
          }
        }
      }

    }

    .floating-carousel-buttons {
      top: 390px;
      .carousel-buttons-wrapper {
        margin: auto;
      }
    }
  }

  #mainnav .navbar-header .navbar-brand-title-link {
    text-decoration: none;
  }

  #mainnav .navbar-header .navbar-brand-title {
    color: @dark-grey;
    line-height: 36px;
  }

  .home-page #mainnav .navbar-header .navbar-brand-sub-title {
    font-size: 1.4vw;
  }

  .home-page #mainnav .navbar-header .navbar-brand {
    position: relative;
    float: left;
  }

  #mainnav .navbar-header .navbar-brand img {
    width: 57px;
    left: 0px;
    position: absolute;
  }

  .announcement.profile-photo {
    img {
      width: 80%;
    }
  }

  .announcement .content {
    font-size: 14px;
    line-height: 19px;
    padding: 20px;
  }

}

.red-angle-right {
  color: @primary-color !important;
  padding-left: 5px;
  font-weight: 700;
}

.pari-doing-block {
  border-top: 1px solid @border-dark;
  margin-top: 30px;
  padding-top: 40px;
  .pari-do-link {
    padding-bottom: 10px;
  }
  a {
    text-decoration: none;
    color: @dark-grey;
    letter-spacing: 1px;
    font-size: 1.5em;
    &:hover {
      cursor: pointer;
      color: @primary-color;
    }
  }
  .question-heading {
    font-size: 36px;
    color: @primary-color;
    font-family: 'Amiri', serif;
    font-weight: 700;
    margin-bottom: 20px;
  }
  :lang(ml) {
    font-weight: 500;
  }
}

.more-section {
  padding-left: 15px;
  padding-bottom: 10px;
}

@media (max-width: @screen-sm-max) {
  body {
    padding-top: 0px !important;

    .resource-title {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
    }
    .home-article-grid-1 {
      .infocus-tag {
        display: inline-block;
        margin-bottom: 20px;
      }
      .infocus-title {
        display: inline-block;
        line-height: 22px;
      }
    }
    .resource-description {
      top: 15px;
    }
  }

}

@media (max-width: @screen-xs-max) {
  #myCarousel-1 .floating-carousel-buttons {
    top: 165px;
  }

  #mainnav .navbar-header .navbar-brand-title {
    display: block !important;
  }

  .home-page #mainnav .navbar-header .navbar-brand-sub-title {
    display: block !important;
  }

}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 .home-article-grid-1 {
   .infocus-title-primary {
     padding-top: 10px;
   }
 }
}

@media (min-width: 320) and (max-width: 420) {
  .announcement {
      background-color: black;
      padding: 7px 0;

    .row {
      display: flex;
      align-items: center;
    }

    .profile-photo {
      text-align: center;
      display: none;
      img {
        max-width: 70px;
        padding: 10px;
        background: #ffe7ce;
        border-radius: 4px;
      }
    }

    .content {
      font-size: 15px;
      line-height: 46px;
      padding-left: 15px;
      color:white;
    }

    .content .link-w-arrow {
      color: white;
      font-weight: 700;
      background-color: @primary-color;
      padding: 6px 10px;
      border-radius: 3px;
      &:hover {
        text-decoration: none;
        color: @bg-red-transparant;
      }
    }
  }
}

{'fraction_non_alphanumeric': 0.1328669323623018, 'fraction_numerical': 0.03652837113283826, 'mean_word_length': 1.3830281497676962, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 4, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '923699', 'n_tokens_mistral': 13649, 'n_tokens_neox': 12262, 'n_words': 2451}