@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
 * SIZE SCALE
 * This is a Major Third scale that powers all the utilities that
 * it is relevant for (font-size, margin, padding). All items are
 * calcuated off the base size, so change that and cascade across
 * your whole project.
 */
/**
 * COLORS
 * Colors are shared between backgrounds and text by default. 
 * You can also use them to power borders, fills or shadows, for example.
 */
/**
 * CORE CONFIG
 * This powers everything from utility class generation to breakpoints
 * to enabling/disabling pre-built components/utilities.
 */
.bg-primary {
  background: #ED2024;
}

.bg-secondary {
  background: #A72C24;
}

.bg-tertiary {
  background: #2F4858;
}

.bg-light {
  background: #fafafa;
}

.bg-dark {
  background: #202020;
}

.bg-grey {
  background: #6F6F6F;
}

.color-primary {
  color: #ED2024;
}

.color-secondary {
  color: #A72C24;
}

.color-tertiary {
  color: #2F4858;
}

.color-light {
  color: #fafafa;
}

.color-dark {
  color: #202020;
}

.color-grey {
  color: #6F6F6F;
}

.gap-top-300 {
  margin-top: 0.8rem;
}

.gap-top-400 {
  margin-top: 1rem;
}

.gap-top-500 {
  margin-top: 1.33rem;
}

.gap-top-600 {
  margin-top: 1.77rem;
}

.gap-top-700 {
  margin-top: 2.4rem;
}

.pad-top-300 {
  padding-top: 0.8rem;
}

.pad-top-400 {
  padding-top: 1rem;
}

.pad-top-500 {
  padding-top: 1.33rem;
}

.pad-top-600 {
  padding-top: 1.77rem;
}

.pad-top-700 {
  padding-top: 2.4rem;
}

.gap-bottom-300 {
  margin-bottom: 0.8rem;
}

.gap-bottom-400 {
  margin-bottom: 1rem;
}

.gap-bottom-500 {
  margin-bottom: 1.33rem;
}

.gap-bottom-600 {
  margin-bottom: 1.77rem;
}

.gap-bottom-700 {
  margin-bottom: 2.4rem;
}

.pad-bottom-300 {
  padding-bottom: 0.8rem;
}

.pad-bottom-400 {
  padding-bottom: 1rem;
}

.pad-bottom-500 {
  padding-bottom: 1.33rem;
}

.pad-bottom-600 {
  padding-bottom: 1.77rem;
}

.pad-bottom-700 {
  padding-bottom: 2.4rem;
}

.text-300 {
  font-size: 0.8rem;
}

.text-400 {
  font-size: 1rem;
}

.text-500 {
  font-size: 1.33rem;
}

.text-600 {
  font-size: 1.77rem;
}

.text-700 {
  font-size: 2.4rem;
}

.weight-regular {
  font-weight: 400;
}

.weight-medium {
  font-weight: 500;
}

.weight-bold {
  font-weight: 700;
}

@media screen and (min-width: 48em) {
  .md\:text-300 {
    font-size: 0.8rem;
  }

  .md\:text-400 {
    font-size: 1rem;
  }

  .md\:text-500 {
    font-size: 1.33rem;
  }

  .md\:text-600 {
    font-size: 1.77rem;
  }

  .md\:text-700 {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 55em) {
  .lg\:text-300 {
    font-size: 0.8rem;
  }

  .lg\:text-400 {
    font-size: 1rem;
  }

  .lg\:text-500 {
    font-size: 1.33rem;
  }

  .lg\:text-600 {
    font-size: 1.77rem;
  }

  .lg\:text-700 {
    font-size: 2.4rem;
  }
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 
  Abstracts
  holds Sass tools, helper files, variables, functions, mixins and other config files. 
  These files are meant to be just helpers which don’t output any CSS when compiled.
*/
/* List all colors used in this theme */
/* Social Color */
/*
  Base
  holds the boilerplate code for the project. 
  Including standard styles such as resets and typographic rules, which are commonly used throughout your project.
*/
html,
body {
  color: #202020;
  font-family: "source-han-sans-simplified-c", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #2e4756;
  font-weight: 600;
  line-height: 1.15;
}

.small-font {
  font-size: 90%;
}

@media (min-width: 993px) {
  h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.25;
  }
}
/* 
  Layout
  Layout: contains all styles involved with the layout of your project. 
  Such as styles for your header, footer, navigation and the grid system.
*/
.test {
  color: white;
}

.story__block {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(4, auto);
  grid-template-areas: "header" "info" "content" "sidebar" "ads" "others";
}

.grid__content {
  grid-area: content;
}

.story__header {
  grid-area: header;
}

.story__share {
  grid-area: info;
}

.story__others {
  grid-area: sidebar;
}

.taboola__block {
  grid-area: others;
  max-width: 90%;
  margin: auto;
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (min-width: 601px) {
  .story__block {
    display: grid;
    grid-template-columns: fit-content(90px) minmax(auto, 75ch) fit-content(300px);
    justify-content: center;
    grid-template-rows: repeat(3, auto);
    grid-template-areas: "header header sidebar" "info content sidebar" ". others sidebar";
    grid-column-gap: 2.5rem;
    grid-row-gap: 1rem;
  }

  .story__share {
    margin-top: 0;
  }
}
.listing__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-template-areas: "stories-list" "sidebar";
}

.archive {
  grid-area: stories-list;
}

.story__others {
  grid-area: sidebar;
}

@media (min-width: 601px) {
  .listing__grid {
    grid-template-columns: minmax(auto, 87ch) fit-content(250px);
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-template-areas: "stories-list sidebar";
    justify-content: center;
  }
}
#sidebar-page-top {
  width: 100%;
}

/* 
  Components
  holds all of your styles for buttons, carousels, sliders, and similar page components (think widgets). 
  Your project will typically contain a lot of component files — as the whole site/app should be mostly composed of small modules.
*/
.site__header {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.admin-bar .site__header {
  position: revert;
}

.logo__block {
  margin: 0;
  display: flex;
}
.logo__block .navbar-brand {
  margin: 0;
}
.logo__block .navbar-brand img {
  width: 115px;
}

.header__mobile {
  height: 55px;
}

.menu__block {
  background: #fff;
  bottom: 0;
  display: block;
  height: 100vh;
  left: 0;
  overflow: scroll;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(-100%);
  transition: all 0.35s ease-out;
  z-index: 999999;
}
.menu__block.show {
  transform: translateX(0);
}
.menu__block .header__block {
  box-shadow: 0 4px 16px 0 rgba(100, 100, 100, 0.4);
  margin-bottom: 1.5rem;
  padding: 0.75rem 0;
  position: relative;
}
.menu__block .header__block .btn__close {
  position: absolute;
  right: 1rem;
}
.menu__block .nav__items--mobile {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__block .nav__items--mobile li {
  border-bottom: 1px solid #c5cbd3;
  padding: 1.5em 0.5em;
}
.menu__block .nav__items--mobile li a {
  color: #202020;
  font-size: 1.5rem;
  padding: 0;
  position: relative;
  transition: font-weight 0.3ms ease-in;
}
.menu__block .nav__items--mobile li:last-child {
  border-bottom: 0;
}
.menu__block .nav__items--mobile li.show > a {
  font-weight: 600;
}
.menu__block .nav__items--mobile li.show .dropdown-menu {
  display: block;
}
.menu__block .nav__items--mobile li.show .dropdown-menu a {
  color: #6f6f6f;
}
.menu__block .nav__items--mobile li.show .dropdown-toggle::after {
  transform: rotate(-135deg);
}
.menu__block .dropdown-menu {
  background: none;
  border: 0;
  border-radius: 0;
  display: none;
  float: none;
  margin: 0;
  margin-top: 1.5rem;
  padding: 0;
  padding-left: 1rem;
  position: initial;
}
.menu__block .dropdown-menu a + a {
  margin-top: 1rem;
}
.menu__block .dropdown-menu .dropdown-item {
  color: #6f6f6f;
  font-weight: 100;
}
.menu__block .dropdown-menu .dropdown-item.active {
  background: transparent;
  font-weight: 500;
}
.menu__block .dropdown-menu .dropdown-item:hover, .menu__block .dropdown-menu .dropdown-item:active, .menu__block .dropdown-menu .dropdown-item:focus {
  background: none;
}
.menu__block .dropdown-toggle::after {
  border: solid #ED2024;
  border-width: 0 3px 3px 0;
  display: inline-block;
  margin: 0;
  padding: 3px;
  position: absolute;
  right: 1rem;
  top: 35%;
  transform: rotate(45deg);
  transition: transform 0.3s linear;
}

.nav__items {
  list-style: none;
  padding: 0;
}
.nav__items .nav-link,
.nav__items .dropdown-item {
  color: #202020;
  font-weight: 400;
  transition: color 0.3s linear;
}
.nav__items .nav-link:hover,
.nav__items .dropdown-item:hover {
  color: #A72C24;
}
.nav__items .nav-link.active, .nav__items .nav-link:active,
.nav__items .dropdown-item.active,
.nav__items .dropdown-item:active {
  color: #A72C24;
  background-color: transparent;
}
.nav__items .nav-link {
  padding: 0;
  padding-right: 1.5rem;
}
.nav__items .nav-link.active {
  font-weight: 700;
  color: #A72C24;
}
.nav__items li + li {
  margin-left: 0.5rem;
}

.nav-link.dropdown-toggle::after {
  border: solid #ED2024;
  border-width: 0 1px 1px 0;
  display: inline-block;
  margin: 0;
  padding: 2px;
  position: absolute;
  right: 0.6rem;
  top: 30%;
  transform: rotate(45deg);
  transition: transform 0.3s linear;
}

.featured-tags {
  background: #2e4756;
  padding: 0.75rem 1.5rem;
  position: relative;
}

.st-tag-cloud {
  display: flex;
}
.st-tag-cloud a {
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  font-size: 14px;
}
.st-tag-cloud .swiper-slide {
  background: #ED2024;
  border: 1px solid #A72C24;
  border-radius: 4px;
  padding: 4px 16px;
  max-width: 100px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
}

.button-next,
.button-prev {
  color: #fff;
  font-size: 14px;
  opacity: 1;
  position: absolute;
  top: 0;
  height: 24px;
  width: 24px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.swiper-button-disabled {
  opacity: 0.5;
}

.button-prev {
  left: -12px;
}

.button-next {
  right: -12px;
}

@media (min-width: 993px) {
  .logo__block .navbar-brand img {
    width: 135px;
  }

  .button-prev {
    left: 12px;
  }

  .button-next {
    right: 12px;
  }
}
.footer__block {
  background-color: #202020;
  color: #fff;
  width: 100%;
}
.footer__block > div {
  gap: 0.5rem;
}
@supports not (gap: 0.5rem) {
  .footer__block > div > * + * {
    margin-top: 0.5rem;
  }
}

.footer__info > small {
  font-weight: 600;
}
@media (min-width: 601px) {
  .footer__info > small {
    font-weight: 400;
  }
}

.footer__nav .footer__nav-item {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline-flex;
  /* Safari hacks to support gap property */
  gap: 1rem;
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .footer__nav .footer__nav-item li + li {
      margin-left: 1rem;
    }
  }
}
.footer__nav .footer__nav-item > li {
  position: relative;
}
.footer__nav .footer__nav-item > li::before {
  content: "";
  height: 80%;
  width: 1px;
  background: white;
  display: block;
  position: absolute;
  left: -0.5rem;
  top: 2px;
}
.footer__nav .footer__nav-item > li > a {
  padding: 0;
  font-size: 0.75rem;
  color: #fff;
  white-space: pre;
}
.footer__nav .footer__nav-item > li:first-of-type::before {
  content: unset;
  height: unset;
  width: unset;
  background: unset;
  display: unset;
  position: unset;
  left: unset;
  top: unset;
}

.scroll-to-top {
  position: fixed;
  right: 1em;
  background-color: #2F4858;
  border-radius: 100%;
  width: 56px;
  height: 56px;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.9rem;
  line-height: 1;
  opacity: 0;
  bottom: -100px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
  transition: opacity 0.3s ease-in-out, bottom 0.35s ease-in-out;
}
.scroll-to-top.show {
  opacity: 1;
  bottom: 1em;
}

.btn-icon {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 48px;
}
.btn-icon svg {
  width: 100%;
  height: 22px;
}

.input__container {
  display: flex;
}

.input__icons {
  display: block;
  left: 1rem;
  pointer-events: none;
  position: absolute;
  top: 18px;
  z-index: 99;
}
.input__icons svg {
  width: 18px;
  height: 18px;
}
.input__icons svg path {
  fill: #808080;
}

#mobileSearch {
  border: 1px solid #c6c6c6;
  border-radius: 5px;
  padding: 1rem;
  padding-left: 3rem;
}
#mobileSearch:focus, #mobileSearch:active {
  border-color: #474747;
}

@media (min-width: 993px) {
  #mobileSearch {
    padding: 0.5rem;
    padding-left: 2.5rem;
  }

  .input__icons {
    left: 0.7rem;
    top: 10px;
  }
}
.hotlist {
  background-color: #2F4858;
  border-radius: 4px;
  max-width: 350px;
  margin: auto;
}

.hotlist__header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex: 1 1 auto;
  margin: 0;
}
.hotlist__header::after {
  content: "";
  flex: 1 1 auto;
  margin: 0 1rem;
  border-bottom: solid 3px #A72C24;
}

.hotlist__list .story__category {
  background-color: #ED2024;
  line-height: 1;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  align-self: flex-start;
}
.hotlist__list li {
  padding: 1.5rem 0;
}
.hotlist__list li a {
  color: #fff;
  font-weight: 400;
}
.hotlist__list li:last-child {
  padding-bottom: 0;
}
.hotlist__list li + li {
  border-top: 1px solid #c5cbd3;
}

@media (min-width: 993px) {
  .hotlist__list li {
    padding: 40px 0;
  }
}
.pagination {
  gap: 0.35rem;
}
.pagination li {
  display: flex;
  align-items: center;
}

.page-link {
  border: none;
  color: #202020;
  border-radius: 4px;
  line-height: 1;
}

.page-item.disabled .page-link {
  border: none;
  color: #c5cbd3;
  background-color: transparent;
}

.page-item.active .page-link {
  background-color: #2e4756;
  color: #fff;
}

.page-link:focus, .page-link:hover {
  color: #2e4756;
}

.social__block p {
  font-weight: 600;
  color: #2e4756;
}

.social__icons {
  display: flex;
  padding: 0;
  gap: 1.3rem;
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .social__icons li + li,
.social__icons .social__item + .social__item {
      margin-left: 1.3rem;
    }
  }
}

.fb,
.ig,
.yt {
  font-size: 2rem;
}

.fb-inverse,
.ig-inverse,
.yt-inverse {
  color: #fff;
  font-size: 1.5rem;
}
.fb-inverse:hover,
.ig-inverse:hover,
.yt-inverse:hover {
  color: #fff;
  text-decoration: none;
}

.fb {
  color: #3578ea;
}

.fb-inverse {
  background-color: #3578ea;
}

.ig {
  color: #833ab4;
}

.ig-inverse {
  background-color: #833ab4;
}

.yt {
  color: #a72c24;
}

.yt-inverse {
  background-color: #a72c24;
}

.social-follow .social__icons .social__item {
  flex: 0 40%;
}

.social-follow p {
  display: none;
}

/* 
  Pages
  any styles specific to individual pages will sit here. 
  For example it’s not uncommon for the home page of your site to require page specific styles that no other page receives.
*/
/*
  Style for a single story page
*/
.main__block {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.story__header {
  align-items: flex-start;
}
.story__header .story__img {
  height: auto;
  width: 100%;
}
.story__header .story__info {
  font-weight: 400;
}
.story__header .story__tags {
  margin-bottom: 1rem;
  margin-top: 0;
  order: -1;
}
.story__header > hr {
  border-color: #c5cbd3;
  width: 100%;
}

.story__social .social__share {
  flex: 0 25%;
  font-weight: 600;
  color: #fff;
  background-color: #2F4858;
  line-height: 1;
  padding: 20px 6px;
}
.story__social .social__share span {
  font-weight: 100;
  line-height: 1;
}
.story__social .social__cta {
  flex: 1;
  background-color: #edf2f5;
}
.story__social .social__cta a {
  flex: 1;
  transition: all 0.3s ease-in-out;
}
.story__social .social__cta a:hover {
  color: #2F4858;
}
.story__social .social__cta .fb-share {
  color: #4267b2;
}
.story__social .social__cta .wa-share {
  color: #1ca751;
}

.story__content {
  overflow: hidden;
}
.story__content img {
  height: auto;
}
.story__content :is(figure, iframe) {
  max-width: 100%;
}

.footer__tags {
  display: flex;
  align-items: baseline;
  font-weight: 600;
  color: #2F4858;
  gap: 0.5rem;
}

.tag__list {
  display: inline-flex;
  flex-flow: row wrap;
  padding: 0;
  margin: 0;
  margin-left: 1rem;
  justify-content: flex-start;
  gap: 0.5rem 1rem;
  list-style: none;
}
@supports not (gap: 0.5rem 1rem) {
  .tag__list {
    justify-content: space-between;
  }
  .tag__list .tag__item {
    margin-bottom: 0.5rem;
  }
}

/* Safari hacks to support gap property */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .tag__list {
      justify-content: space-between;
      align-items: center;
    }
    .tag__list .tag__item {
      margin-bottom: 0.5rem;
      margin-left: 1rem;
    }
  }
}
.tag__item a {
  display: block;
  padding: 4px 16px;
  color: #fff;
  font-size: 90%;
  font-weight: 400;
  background-color: #2F4858;
  border-radius: 4px;
}

.social__cta a {
  flex: 1;
  color: #c5cbd3;
  font-size: 1.25rem;
}

.category__header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex: 1 1 auto;
  color: #202020;
}
.category__header::after {
  content: "";
  flex: 1 1 auto;
  margin-left: 1rem;
  border-bottom: solid 3px #A72C24;
}

.category__link {
  color: #202020;
  font-weight: 600;
}
.category__link:hover {
  text-decoration: none;
  color: #2F4858;
}

.story__img {
  width: 100%;
  height: 100%;
}

.further-story__list {
  padding: 0;
  list-style: none;
}

.further-story__item::before {
  content: ">>>";
  margin-right: 0.5rem;
  color: #A72C24;
}

.further-story__item + .further-story__item {
  margin-top: 0.5rem;
}

.further-story__links {
  color: #A72C24;
  text-decoration: underline;
  font-weight: 400;
}

@media (min-width: 601px) {
  .story__others {
    width: 100%;
    margin: initial;
  }

  .story__social {
    position: sticky;
    top: 9rem;
  }
  .story__social .social__cta a {
    min-height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
  }
}
.story--alternate {
  display: flex;
  gap: 1rem;
  text-decoration: none;
  color: currentColor;
  /* Safari hacks to support gap property */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .story--alternate > div + div {
      margin-left: 1rem;
    }
  }
}
.story--alternate .left {
  flex: 0 35%;
  display: flex;
  flex-flow: column wrap;
  gap: 1rem;
}
.story--alternate .left img {
  height: auto;
  object-fit: cover;
}
.story--alternate .right {
  flex: 1;
  display: flex;
  flex-flow: column wrap;
  margin-top: 0;
  --flow-space: 0.75rem;
}
.story--alternate:hover {
  text-decoration: none;
  color: currentColor;
}
.story--alternate:hover h1 {
  text-decoration: underline;
}

.share-count {
  background-color: #2e4756;
  color: #fff;
  text-align: center;
}

.archive {
  border-bottom: 1px solid #C5CBD3;
}
.archive article + article {
  border-top: 1px solid #C5CBD3;
  padding-top: 1rem;
  margin-top: 1rem;
}

@media (min-width: 601px) {
  .story--alternate .left img {
    height: 100%;
  }

  .archive {
    border-bottom: 0;
  }
}
/*
  For demo propose
*/
.addthis-smartlayers.addthis-smartlayers-desktop {
  display: none;
}

.widget__title {
  display: none;
}

.position-relative {
  position: relative;
}

#at-share-dock {
  display: none;
}

#loadMore {
  min-width: 130px;
  line-height: 1;
  cursor: pointer;
}

#loadMore.loading {
  opacity: 0;
}

#loadMore:hover {
  background-color: #213C4D;
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
}

#loadMore:active,
#loadMore:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.bubblingG {
  text-align: center;
  width: 76px;
  height: 47px;
  margin: auto;
  display: none;
  margin-top: -47px;
}

.bubblingG.loading {
  display: block;
}

.bubblingG span {
  display: inline-block;
  vertical-align: middle;
  width: 9px;
  height: 9px;
  background: #2F4858;
  border-radius: 47px;
  -o-border-radius: 47px;
  -ms-border-radius: 47px;
  -webkit-border-radius: 47px;
  -moz-border-radius: 47px;
  animation: bubblingG 1.5s infinite alternate;
  -o-animation: bubblingG 1.5s infinite alternate;
  -ms-animation: bubblingG 1.5s infinite alternate;
  -webkit-animation: bubblingG 1.5s infinite alternate;
  -moz-animation: bubblingG 1.5s infinite alternate;
}

#bubblingG_1 {
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
}

#bubblingG_2 {
  animation-delay: 0.45s;
  -o-animation-delay: 0.45s;
  -ms-animation-delay: 0.45s;
  -webkit-animation-delay: 0.45s;
  -moz-animation-delay: 0.45s;
}

#bubblingG_3 {
  animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  -ms-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
}

@keyframes bubblingG {
  0% {
    width: 9px;
    height: 9px;
    background-color: #2F4858;
    transform: translateY(0);
  }
  100% {
    width: 23px;
    height: 23px;
    background-color: white;
    transform: translateY(-20px);
  }
}
@-o-keyframes bubblingG {
  0% {
    width: 9px;
    height: 9px;
    background-color: #2F4858;
    -o-transform: translateY(0);
  }
  100% {
    width: 23px;
    height: 23px;
    background-color: white;
    -o-transform: translateY(-20px);
  }
}
@-ms-keyframes bubblingG {
  0% {
    width: 9px;
    height: 9px;
    background-color: #2F4858;
    -ms-transform: translateY(0);
  }
  100% {
    width: 23px;
    height: 23px;
    background-color: white;
    -ms-transform: translateY(-20px);
  }
}
@-webkit-keyframes bubblingG {
  0% {
    width: 9px;
    height: 9px;
    background-color: #2F4858;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 23px;
    height: 23px;
    background-color: white;
    -webkit-transform: translateY(-20px);
  }
}
@-moz-keyframes bubblingG {
  0% {
    width: 9px;
    height: 9px;
    background-color: #2F4858;
    -moz-transform: translateY(0);
  }
  100% {
    width: 23px;
    height: 23px;
    background-color: white;
    -moz-transform: translateY(-20px);
  }
}
.fb-video {
  min-height: 150px;
  display: block !important;
}

#custom_html-9 {
  margin-bottom: 0 !important;
}

.main-container {
  overflow: hidden;
  margin-bottom: 1.5rem;
}

#taboola-below-article-thumbnails .video-title {
  font-family: "Helvetica Neue", sans-serif;
}

/* Right corner button */
.ins-preview-wrapper.ins-preview-wrapper-249.ins-pos-bottom-right {
  display: none !important;
}

/* Custome tnc page */
.custom-page #sidebar-content-top,
.custom-page #sidebar-page-top,
.custom-page .story__info,
.custom-page .story__tags,
.custom-page .story__share {
  display: none;
}
.custom-page #mainColumn {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.custom-page #mainColumn .story__header {
  max-width: 100%;
}
.custom-page #mainColumn .grid__content {
  max-width: 90ch;
}

.advertise-w-us-page #mainColumn {
  align-items: stretch;
}

/* Remove inskin */
#skinners {
  display: none !important;
}

/* Bug on bootstrap dropdown-backdrop overlap an element */
.dropdown-backdrop {
  display: none;
}

/* Advertise with us page iframe reset */
.wp-block-embed iframe {
  max-width: 100%;
  border: none;
  width: 100%;
  height: 940px;
}

/* Carry from override.css */
html {
  height: 100%;
}

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}

body.no-ads div[id^=innity_adslot] {
  display: none !important;
}

body.no-ads .teads-inread {
  display: none !important;
}

body.no-ads div[id^=div-gpt-ad] {
  display: none !important;
}

body.no-ads div[id^=adbro] {
  display: none !important;
}

body.no-ads div.andbeyond_adunit {
  display: none !important;
}

.widget-title {
  display: none;
}

#leaderboard,
#leaderboard-mobile {
  min-width: 100%;
  text-align: center;
}

#billboard {
  min-width: 100%;
  text-align: center;
}

/* Admin bar acting weird on mobile */
#wpadminbar {
  position: fixed;
}

/* Video category page */
#mainColumn .card {
  border: none;
}

.category-videos.modal-open {
  overflow: auto;
}

.category-videos .modal-content {
  border-radius: none;
  border: none;
}

.category-videos #featureVideo {
  background-color: #111;
}

.category-videos .feature-video {
  max-width: 850px;
  margin: 0 auto;
}

.category-videos .page-header {
  margin: 20px 0;
  max-width: 850px;
  margin: 0 auto 15px;
  border: none;
}

.category-videos #mainContainer {
  border-top: 1px solid #eee;
  margin-top: 0;
  padding-top: 15px;
}

.category-videos .page-header .header-logo {
  display: inline-block;
  float: left;
  padding: 10px 0;
}

.category-videos .page-header .header-logo img {
  width: 100px;
}

.category-videos .page-header h2 {
  margin-top: 15px;
  margin-left: 115px;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 15px;
}

.category-videos .post-element {
  cursor: pointer;
}

.category-videos .post-element .card-thumb {
  position: relative;
  background: #000;
}

.category-videos .post-element .card-thumb img {
  transition: opacity 0.5s;
  opacity: 0.9;
  height: auto;
}

.category-videos .post-element .card-thumb img:hover {
  opacity: 0.6;
}

.category-videos .post-element .play-btn {
  position: absolute;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  padding-left: 50%;
  margin-left: -30px;
  color: #fff;
}

.category-videos .post-element .play-btn .fa {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #fff;
  padding: 14px 17px;
  font-size: 30px;
  line-height: 30px;
  vertical-align: middle;
  text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.8);
}

.category-videos #mainSidebar {
  text-align: center;
  padding: 0;
  margin-bottom: 25px;
}

.category-videos .video-modal {
  width: 475px;
  height: 320px;
  position: fixed;
  top: auto;
  bottom: -320px;
  left: auto;
  right: 0;
  z-index: 1000;
  padding: 45px 15px 15px;
  background: #fff;
  -webkit-box-shadow: -3px -3px 15px -1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: -3px -3px 15px -1px rgba(0, 0, 0, 0.3);
  box-shadow: -3px -3px 15px -1px rgba(0, 0, 0, 0.3);
  -webkit-transition: bottom 1s ease-out;
  -moz-transition: bottom 1s ease-out;
  -ms-transition: bottom 1s ease-out;
  transition: bottom 1s ease-out;
}

.category-videos .video-modal.show {
  bottom: 0;
}

.category-videos .modal-header {
  position: absolute;
  top: -45px;
  left: 0;
  height: 45px;
  width: 100%;
  overflow: hidden;
  border: 0;
}

.category-videos .modal-header .header-logo {
  display: inline-block !important;
  width: 60px;
  padding: 9px 8px 9px 5px;
  float: left;
}

.category-videos .modal-header .header-logo img {
  width: 60px;
}

.category-videos .modal-title {
  font-size: 14px;
  line-height: 30px;
  padding-top: 8px;
  vertical-align: middle;
  margin: 0 35px 0 75px;
}

.category-videos .close {
  -webkit-appearance: none;
  cursor: pointer;
  background: 0 0;
  border: 0;
  z-index: 1001;
  padding: 7px 5px 7px 12px;
  font-size: 28px;
  line-height: 1;
  color: #ccc;
  opacity: 1;
  position: absolute;
  top: 0px;
  right: 0px;
}

.category-videos .modal-dialog {
  margin: 0;
  max-width: inherit;
}

.category-videos .modal-backdrop {
  display: none;
}

.category-videos #featureEmbed,
.category-videos #modalEmbed {
  background: #000;
  position: relative;
}

.category-videos #modalPlayer {
  min-width: 445px;
  min-height: 250px;
}

@media (max-width: 767px) {
  .category-videos #mainContainer {
    padding-top: calc(100vw * 0.5618);
    margin-top: 141px;
    border-top: none;
  }

  .category-videos .page-header h2 {
    font-size: 1.25rem;
  }

  .category-videos #mainColumn {
    padding-top: 10px;
  }

  .category-videos #mainColumn .card-title {
    font-weight: 300;
    font-size: 15px;
  }

  .category-videos .post-element {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
  }

  .category-videos .video-modal {
    height: auto;
    bottom: auto;
    top: 0;
    z-index: 0;
    padding: 73px 0 0;
    width: 100vw;
    display: block !important;
    -webkit-box-shadow: -1px -1px 5px -1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -1px -1px 5px -1px rgba(0, 0, 0, 0.3);
    box-shadow: -1px -1px 5px -1px rgba(0, 0, 0, 0.3);
  }

  .admin-bar.category-videos .video-modal {
    padding-top: 119px;
  }

  .category-videos .video-modal.show {
    bottom: auto;
  }

  .category-videos .modal-header {
    position: static;
    height: 68px;
    width: 100%;
  }

  .category-videos .modal-header .header-logo {
    width: 70px;
    padding: 15px 10px 10px;
  }

  .category-videos .modal-title {
    font-size: 16px;
    line-height: 27px;
    margin: 0;
    width: 100%;
    padding: 10px 10px 10px 76px;
    height: 68px;
  }

  .category-videos #modalPlayer {
    min-width: 100vw;
    min-height: calc(100vw * 0.5618);
  }
}
@media (min-width: 575px) and (max-width: 767px) {
  .category-videos .video-modal {
    padding-top: 90px !important;
  }

  .admin-bar.category-videos .video-modal {
    padding-top: 136px !important;
  }

  .category-videos #mainContainer {
    margin-top: 162px;
  }

  .category-videos .modal-header {
    max-width: 570px;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .category-videos #featurePlayer {
    min-width: 768px;
    min-height: 430px;
  }

  .category-videos #mainContainer {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  .category-videos #mainColumn {
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media (max-width: 420px) {
  .category-videos .page-header h2 {
    font-size: 1.1rem;
  }

  .category-videos .post-element {
    padding-bottom: 10px;
    margin-bottom: 10px !important;
  }

  .category-videos .post-element .play-btn {
    margin-left: -22px;
  }

  .category-videos .post-element .play-btn .fa {
    width: 44px;
    height: 44px;
    font-size: 24px;
    padding: 5px 11px;
  }
}
.category-videos .loader {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  color: #fff;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}
/* 404 */
body.error404 {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.error404 #mainContainer {
  text-align: center;
}

.error404 h2 {
  color: #ED2024;
}

.error404 #searchPage {
  max-width: 600px;
  margin: 0 auto;
}

.error404 #footer {
  width: 100%;
  position: absolute;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

h1 {
  font-size: 2.4rem;
}

h2,
h3 {
  font-size: 1.77rem;
}

a {
  color: currentColor;
}

:focus {
  outline: 2px dotted;
  outline-offset: 0.25rem;
}

.wrapper {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.33rem;
}

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.flow > * + * {
  margin-top: var(--flow-space, 1rem);
}

.link__style {
  font-size: 1rem;
  color: currentColor;
}
.link__style:hover {
  color: currentColor;
  text-decoration: none;
  opacity: 0.75;
}

.link__style[data-state=story]:hover {
  color: #2F4858;
  opacity: 1;
}

/* Hide visually but not on screen-reader */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  /* added line */
}

.pill {
  font-size: 1rem;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  display: inline-block;
  padding: 0.5rem 1rem;
  line-height: normal;
  border-radius: 4px;
}
.pill:not([class*=bg-]) {
  color: #fafafa;
  background: #A72C24;
}

.story {
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none !important;
  display: block;
}
.story:hover .story__header, .story:focus .story__header {
  color: #2F4858;
  text-decoration: none;
}

.story__content {
  display: flex;
  flex-flow: column;
  margin-top: 0.5rem;
}

.story__header {
  --flow-space: 0.5rem;
  line-height: 1.25;
}

.story__image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.story[data-state=highlight] {
  display: flex;
  flex-flow: row;
  gap: 2.5rem;
  border-bottom: 1px solid #6F6F6F;
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: -1;
  width: 100%;
}
.story[data-state=highlight].active {
  display: flex;
  position: static;
  visibility: visible;
}
.story[data-state=highlight] .story__image {
  flex: 1;
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .story[data-state=highlight] .story__image {
      margin-right: 2.5rem;
    }
  }
}
.story[data-state=highlight] .story__content {
  flex: 1;
  margin-top: 0;
}
.story[data-state=highlight] .story__content .story__header {
  max-width: 30ch;
  margin-top: 2rem;
}
.story[data-state=highlight] .story__content .story__header:hover {
  color: #A72C24;
}
.story[data-state=highlight] .story__content p {
  max-width: 50ch;
  color: #D0D0D0;
}
.story[data-state=highlight]:hover .story__header {
  color: #A72C24;
}

.story[data-state=mobile-small] {
  display: flex;
  flex-flow: row;
  gap: 1rem;
}
.story[data-state=mobile-small] > div {
  flex: 1;
}
.story[data-state=mobile-small] .story__content {
  flex: 0 60%;
  margin: 0;
  /* Safari hacks to support gap property */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .story[data-state=mobile-small] .story__content {
      margin-left: 1rem;
    }
  }
}
.story[data-state=mobile-small] .story__content > a {
  --flow-space: 0;
}
.story[data-state=mobile-small] .tag,
.story[data-state=mobile-small] .story__info {
  display: none;
}
.story[data-state=mobile-small] .tag {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
.story[data-state=mobile-small] .story__header {
  font-size: 1rem;
  font-weight: 500;
}

.featured-story__list article:first-child .story[data-state=mobile-small] {
  display: flex;
  flex-flow: column;
  gap: 0;
}
.featured-story__list article:first-child .story[data-state=mobile-small] .tag,
.featured-story__list article:first-child .story[data-state=mobile-small] .story__info {
  display: block;
}
.featured-story__list article:first-child .story[data-state=mobile-small] .story__content {
  margin: 0;
  margin-top: 0.25rem;
}
.featured-story__list article:first-child .story[data-state=mobile-small] .story__content > a {
  --flow-space: 0.5rem;
}

.featured-story__list .story {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.featured-story__list .story:hover {
  border-color: #A72C24;
}
.featured-story__list .story:hover .story__header {
  color: #A72C24;
}
.featured-story__list .story.active {
  border-color: #A72C24;
}
.featured-story__list article + article {
  border-top: 1px solid #606060;
}

.story__image[data-state=tiny] {
  height: 150px;
  object-fit: cover;
  object-position: center;
}

.story-list .story {
  padding-top: 0;
}
.story-list article + article {
  border-top: 1px solid #C5CBD3;
}
.story-list > article:not(:first-child) .story__header {
  --flow-space: 0rem;
}
.story-list > article:not(:first-child) .story__image {
  display: none;
}
.story-list > article:last-child {
  padding-bottom: 0;
}

@media (min-width: 601px) {
  .story__header {
    --flow-space: 0.5rem;
  }

  .featured-story__list {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    padding-top: 0;
  }
  .featured-story__list .story {
    flex: 1;
    border-bottom: 4px solid #454545;
    padding-right: 0;
    padding-left: 0;
  }
  .featured-story__list article + article {
    border-top: 0;
    /* Safari hacks to support gap property */
  }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      .featured-story__list article + article {
        margin-left: 1.33rem;
      }
    }
  }
  .featured-story__list > article {
    flex: 1;
  }

  .featured-story__list .story[data-state=mobile-small] {
    display: flex;
    flex-flow: column;
    gap: 0.25rem;
  }
  .featured-story__list .story[data-state=mobile-small] .tag,
.featured-story__list .story[data-state=mobile-small] .story__info {
    display: block;
  }
  .featured-story__list .story[data-state=mobile-small] .story__content {
    margin-top: 0;
    margin-left: 0;
    justify-content: space-between;
    /* Safari hacks to support gap property */
  }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      .featured-story__list .story[data-state=mobile-small] .story__content {
        margin-left: 0;
      }
    }
  }
  .featured-story__list .story[data-state=mobile-small] .story__content > a {
    --flow-space: 0.5rem;
  }

  .story-list {
    display: flex;
    gap: 1rem;
  }
  .story-list .story {
    padding-top: 0;
    padding-bottom: 0;
  }
  .story-list > article:not(:first-child) .story__image {
    display: block;
  }
  .story-list article + article {
    border-top: 0;
    /* Safari hacks to support gap property */
  }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      .story-list article + article {
        margin-left: 1rem;
      }
    }
  }
  .story-list > article {
    flex: 1 1 45%;
  }
}
.grid-container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 100%;
  grid-template-areas: "homepage-leaderboard" "featured-story" "hotlist" "story-by-category" "homepage-video" "mail-list" "sidebar" "story-by-category-mobile" "story-by-category-2" "sidebar-2";
}

#homepage-leaderboard {
  grid-area: homepage-leaderboard;
}

#homepage-billboard {
  grid-area: homepage-billboard;
  display: none;
}

#featured-story {
  grid-area: featured-story;
}

#homepage-hotlist {
  grid-area: hotlist;
}

#story-by-category {
  grid-area: story-by-category;
}

#story-by-category-2 {
  grid-area: story-by-category-2;
}

#story-by-category .story-list:nth-child(n+3),
#story-by-category .decorative-heading:nth-child(n+3),
#story-by-category-2 .story-list:nth-child(n+3),
#story-by-category-2 .decorative-heading:nth-child(n+3) {
  display: none;
}

#sidebar {
  grid-area: sidebar;
}

#mail-list {
  grid-area: mail-list;
}

#homepage-video {
  grid-area: homepage-video;
}

#story-by-category-mobile {
  grid-area: story-by-category-mobile;
}

#sidebar-2 {
  grid-area: sidebar-2;
}

@media (min-width: 601px) {
  .grid-container {
    display: grid;
    grid-template-columns: fit-content(220px) 1fr 1fr minmax(auto, 220px);
    grid-template-rows: repeat(6, auto);
    grid-template-areas: "homepage-leaderboard homepage-leaderboard homepage-leaderboard homepage-leaderboard" "featured-story featured-story featured-story featured-story" "hotlist story-by-category story-by-category story-by-category" "mail-list mail-list mail-list mail-list" "story-by-category-2 story-by-category-2 story-by-category-2 sidebar-2" "homepage-video homepage-video homepage-video sidebar-2" ". . .sidebar-2";
  }
}
@media (min-width: 601px) and (max-width: 1023px) {
  #sidebar,
#story-by-category-mobile {
    display: none;
  }
}
@media (min-width: 1024px) {
  .grid-container {
    display: grid;
    grid-template-columns: fit-content(250px) 1fr 1fr fit-content(250px);
    grid-template-rows: repeat(8, auto);
    grid-template-areas: "homepage-billboard homepage-billboard homepage-billboard homepage-billboard" "featured-story featured-story featured-story featured-story" "homepage-leaderboard homepage-leaderboard homepage-leaderboard homepage-leaderboard" "hotlist story-by-category story-by-category sidebar" "mail-list mail-list mail-list mail-list" "story-by-category-mobile story-by-category-2 story-by-category-2 sidebar-2" "homepage-video homepage-video homepage-video sidebar-2" ". . .sidebar-2";
  }

  #homepage-leaderboard,
#homepage-billboard {
    display: block;
    text-align: center;
  }

  #story-by-category .story-list:nth-child(n+3),
#story-by-category .decorative-heading:nth-child(n+3),
#story-by-category-2 .story-list:nth-child(n+3),
#story-by-category-2 .decorative-heading:nth-child(n+3) {
    display: flex;
  }
}
.mobile-scroll {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  /* Safari hacks to support gap property */
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: inline mandatory;
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .mobile-scroll article + article {
      margin-left: 1rem;
    }
  }
}
.mobile-scroll > * {
  scroll-snap-align: center;
  flex: 0 0 66%;
}
.mobile-scroll .story {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 48em) {
  .mobile-scroll {
    flex-flow: column nowrap;
    overflow-x: unset;
    /* Safari hacks to support gap property */
  }
  .mobile-scroll .story {
    padding: 0;
  }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      .mobile-scroll article + article {
        margin-top: 1rem;
        margin-left: 0;
      }
    }
  }
}
.video__block {
  border-radius: 4px;
  padding: 1rem;
}

.video__list-block {
  border-top: 1px solid #606060;
  margin-top: 1rem;
}

.video__list {
  display: flex;
  flex-flow: column wrap;
}
.video__list .story {
  padding-bottom: 0;
  cursor: pointer;
}
.video__list .story .video__icon {
  align-self: baseline;
  position: relative;
}
.video__list .story .video__icon:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  content: "";
  font-family: FontAwesome;
  font-size: 38px;
  color: #FFFFFF;
  opacity: 0;
  text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
}
.video__list .story .story__image,
.video__list .story .story__content {
  transition: all 0.3s ease-in-out;
}
.video__list .story:hover .story__content {
  opacity: 0.7;
}
.video__list .story:hover .video__icon:before {
  opacity: 0.9;
}
.video__list .story + .story {
  border-top: 1px solid #606060;
}

.video {
  display: flex;
  flex-flow: row wrap;
}

@media (min-width: 601px) {
  .video__player-container {
    display: flex;
    gap: 1rem;
  }

  .video__player-block {
    flex: 0 60%;
  }

  .video__list-block {
    flex: 40%;
    padding-left: 1rem;
    border-left: 1px solid #606060;
    border-top: 0;
    margin-top: 0;
    /* Safari hacks to support gap property */
  }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      .video__list-block {
        margin-left: 1rem;
      }
    }
  }
}
.decorative-heading {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
  /* Safari hacks to support gap property */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .decorative-heading::before {
      margin-right: 0.8rem;
    }
    .decorative-heading::after {
      margin-left: 0.8rem;
    }
  }
}
.decorative-heading:not([class*=text-]) {
  font-size: 1.33rem;
}
.decorative-heading::before, .decorative-heading::after {
  content: "";
  flex: 1 1 auto;
  border-bottom: solid 3px #A72C24;
}

.decorative-heading[data-state=left]::before {
  all: unset;
}

@media (min-width: 48em) {
  .decorative-heading[data-state=left-md]::before {
    all: unset;
  }
}

.ads {
  position: relative;
}
.ads > .placeholder {
  background: #E4E4E4;
  display: flex;
  place-content: center;
  align-items: center;
  min-height: 150px;
  border-radius: 4px;
}
.ads::before {
  display: block;
  text-align: center;
  content: "advertising";
  text-transform: uppercase;
  color: #C5CBD3;
  font-size: 0.65rem;
  margin-bottom: 0.35rem;
}

.mid-rectandular {
  text-align: center;
  margin-bottom: 10px;
}

#mailerlite-form_4,
#mailerlite-form_2 {
  display: flex;
  flex-flow: column;
  /* Safari hacks to support gap property */
  gap: 0.5rem;
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #mailerlite-form_4 > div + div,
#mailerlite-form_2 > div + div {
      margin-top: 0.5rem;
    }
  }
}

.mailerlite-form-field {
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
  /* Safari hacks to support gap property */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .mailerlite-form-field div + div {
      margin-top: 0.5rem;
    }
  }
}

.newsletter-submit {
  align-self: center;
}

.top,
.btm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.top .img {
  flex: 0 56px;
  /* Safari hacks to support gap property */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .top .img {
      margin-right: 1rem;
    }
  }
}
.top .mail-title {
  font-size: 1.33rem;
  color: #fafafa;
  text-align: left;
}

.btm #rojak-newsformcustom {
  width: 100%;
}

.newslettercustom-email {
  font-size: 0.8rem;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.btm {
  flex: 0;
}

#mailerlite-2-field-email-error {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

@media (min-width: 48em) {
  #mailerlite-form_4,
#mailerlite-form_2 {
    flex-flow: row wrap;
    justify-content: center;
    /* Safari hacks to support gap property */
  }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      #mailerlite-form_4 > div + div,
#mailerlite-form_2 > div + div {
        margin-top: 0rem;
      }
    }
  }

  .top,
.btm {
    flex: 1;
  }

  .mailerlite-form-field {
    flex-flow: row;
  }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      .mailerlite-form-field .newsletter-submit {
        margin-left: 0.5rem;
        margin-top: 0;
      }
    }
  }

  .top .img {
    flex: 0 100px;
    position: relative;
  }
  .top .img::after {
    margin-left: 1rem;
    color: white;
    content: "";
    height: 100%;
    width: 1px;
    background: white;
    display: block;
    position: absolute;
    right: -1.3rem;
    top: 0;
    opacity: 0.1;
  }

  .newsletter-submit {
    align-self: flex-start;
  }
}
.mail-input {
  border-radius: 4px;
  border: 1px solid #c6c6c6;
  font-size: 14px;
  max-width: 40ch;
  text-align: center;
  padding: 8px;
  width: 100%;
  display: block;
  margin: auto;
}

.mail-submit {
  background-color: #ED2024;
  color: #fafafa;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid #A72C24;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.mail-submit:hover {
  background-color: #A72C24;
}

@media (min-width: 993px) {
  .mail-submit {
    padding: 0.5rem 1.5rem;
  }
}
@media (min-width: 601px) {
  .mail-input {
    min-width: 35ch;
    text-align: left;
  }
}
.widget__title {
  font-size: 1.33rem;
  color: #2F4858;
  text-align: center;
}

.social-media-widget {
  display: flex;
  flex-flow: column wrap;
  align-content: center;
}

.facebook-widget,
.social-follow {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.social__icons {
  align-self: stretch;
}

.sidebar-story {
  border-radius: 4px;
}

.sidebar-story-list .story {
  padding: 0;
}
.sidebar-story-list .story:hover .story__header {
  color: #fff;
  opacity: 0.85;
}
.sidebar-story-list article + article {
  border-top: 1px solid #C5CBD3;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

/*# sourceMappingURL=app.css.map */