/*!
Theme Name: 988_web
Description: Bulmapress Child Theme
Theme URI: 
Author: Nick Ang
Author URI: https://github.com/nickang-snappymob
Template: bulmapress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bulmapress
Tags: one-column, two-columns, three-columns, four-columns, grid-layout, featured-images, accessibility-ready, featured-images, microformats, sticky-post, threaded-comments, translation-ready, blog, news, photography, portfolio
!*/

.block-news-container {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  width: 420px;
  height: 90px;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.block-news-image {
  display: -webkit-box;
  display: flex;
  -webkit-box-flex: 0.3;
          flex: 0.3;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  margin-right: 10px;
}

.block-news-image img {
  max-width: 115px;
  max-height: 80px;
  border-radius: 5px;
}

.block-news-title {
  -webkit-box-flex: 0.7;
          flex: 0.7;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  width: 250px;
  height: 74px;
}

.block-news-text {
  -webkit-box-flex: 0.7;
          flex: 0.7;
  color: black;
  font-weight: bold;
  font-size: medium;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.block-news-date {
  color: #888888;
  font-size: 13px;
  align-self: center;
  height: 20px;
  width: 100%;
  -webkit-box-flex: 0.3;
          flex: 0.3;
}

.homepage-container {
  display: grid;
  grid-template-columns: 1fr 1300px 1fr;
  grid-template-rows: 490px 680px 450px 450px 605px 450px 605px 605px;
  grid-template-areas: "carousel            carousel             carousel" ".                section-videos                 ." "ml-1              section-news               mr-1" ".             section-entertainment             ." "ml-2            section-lifestyle            mr-2" "section-podcast  section-podcast  section-podcast" "ml-3            section-business             mr-3" "ml-4            section-whats-new            mr-4";
}

.white-margin-area {
  background-color: white;
}

.news.left {
  grid-area: ml-1;
}

.news.right {
  grid-area: mr-1;
}

.lifestyle.left {
  grid-area: ml-2;
}

.lifestyle.right {
  grid-area: mr-2;
}

.business.left {
  grid-area: ml-3;
}

.business.right {
  grid-area: mr-3;
}

.whats-new.left {
  grid-area: ml-4;
}

.whats-new.right {
  grid-area: mr-4;
}

.section-videos-grid-hook {
  grid-area: section-videos;
  display: grid;
  grid-template-columns: 5fr 3fr;
  grid-template-rows: 1fr 130px 430px 1fr;
  grid-template-areas: ". ." "ads music-chart" "content music-chart" ". .";
}

.section-videos-grid-hook .ads-container {
  grid-area: ads;
  align-self: flex-start;
}

.section-news-grid-hook {
  grid-area: section-news;
  background-color: white;
  display: grid;
  grid-template-columns: 5fr 3fr;
  grid-template-rows: 1fr 330px 1fr;
  grid-template-areas: ". ." "content ads" ". .";
}

.section-news-grid-hook .ads-container {
  grid-area: ads;
}

.section-entertainment-grid-hook {
  grid-area: section-entertainment;
  display: grid;
  grid-template-columns: 5fr 3fr;
  grid-template-rows: 1fr 330px 1fr;
  grid-template-areas: ". ." "content ads" ". .";
}

.section-entertainment-grid-hook .ads-container {
  grid-area: ads;
}

.section-lifestyle-grid-hook {
  grid-area: section-lifestyle;
  background-color: white;
  display: grid;
  grid-template-columns: 5fr 3fr;
  grid-template-rows: 1fr 485px 1fr;
  grid-template-areas: ". ." "content ads" ". .";
}

.section-lifestyle-grid-hook .ads-container {
  grid-area: ads;
}

.section-podcast-grid-hook {
  grid-area: section-podcast;
  background-color: #e8e1d6;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 330px 1fr;
  grid-template-areas: ". ." "content content" ". .";
}

.section-business-grid-hook {
  grid-area: section-business;
  background-color: white;
  display: grid;
  grid-template-columns: 5fr 3fr;
  grid-template-rows: 1fr 485px 1fr;
  grid-template-areas: ". ." "content ads" ". .";
}

.section-business-grid-hook .ads-container {
  grid-area: ads;
}

.section-whats-new-grid-hook {
  grid-area: section-whats-new;
  background-color: white;
  display: grid;
  grid-template-columns: 5fr 3fr;
  grid-template-rows: 1fr 485px 1fr;
  grid-template-areas: ". ." "content award-winner" ". .";
}

/* global */

.wrapper {
  padding: 0 !important;
}

/* in single-topic */

.content-container {
  background-color: white;
  display: grid;
  grid-template-columns: 120px 2fr 1fr 120px;
  grid-template-rows: 150px 330px auto;
  grid-template-areas: ". . . ." ". article ad ." ". article sidebar .";
}

.article-container {
  grid-area: article;
  font-size: large;
}

.article-content {
  max-width: 950px !important;
  margin-left: 0 !important;
  margin-right: 20px !important;
}

.sidebar-container {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 60px;
}

/* in content-popularnews */

.popular_news_card {
  grid-area: sidebar;
  justify-self: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
          align-items: center;
  width: 470px;
  height: 600px;
  min-height: 200px;
  border-radius: 5px;
  background-color: #f4f4f4;
  padding: 13px;
}

.popular_news_card p {
  font-weight: bold;
  font-size: 23px;
  color: black;
  align-self: flex-start;
  margin-left: 15px;
  margin-top: 8px;
}

.popular_news_card .divider {
  width: 95%;
  height: 2px;
  margin: 10px 0;
  border-radius: 2px;
  background-color: #e7e7e7;
}

/* in ad */

.ad-container {
  grid-area: ad;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}