body {
    background-color: #000 !important;
    color: #eee;
}

ol {
    color: #faa !important;
}

li {
    color: #aae !important;
}
.first-col {
    color: #222 !important;
}

.second-col {
    color: #444 !important;
}

.other-col {
    color: #484 !important;
}

.alert-message {
    color: #111;
}

.createdby {
    color: #99c;
}

.stock-table {
    color: #111;
}
/* Remove the template's white "card" chrome around the footer area */
.main-bottom.card,
.main-bottom.card .card-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.main-bottom.card .card-body {
  padding: 0 !important; /* kill the extra spacing */
}

.mod-footer {
    text-align: center;         /* center the link horizontally */
    background-color: #000;     /* pick your preferred color */
    color: #eee;
    padding: 0px;               /* some space around the text */
    border-radius: 8px;         /* optional: rounded corners */
}

.mod-footer a {
    color: #0066cc;             /* link color */
    text-decoration: none;
}

.mod-footer a:hover {
    text-decoration: bold;
    color: #faa;
}


background.video-fade-slow {
    float: right;
    margin: 1em 0 1em 1em;
    max-width: 90%;
    height: auto;
    object-fit: cover;
    width: 300px;
    opacity: 0;
    animation: fadeInVideo 2s ease-in 0.5s forwards;
}

@keyframes fadeInVideo {
    from { opacity: 0; }
    to { opacity: 1; }
}


.com-content-article__body .introtext-formatting-class p {
    font-weight: bold !important;
    color: #ffe !important;
}

.com-content-article__body .fulltext-formatting-class p {
    color: #bbb !important;
}


/* Article grid classes */
.articlegrid-img {
    /* keep width 100%; let height never exceed width */
    width: 100%;
    aspect-ratio: 16 / 9;      /* CSS 2022+ – square thumb */
    object-fit: cover;        /* crop edges, no distortion */
}

.articlegrid-opinions {
    border-radius: 8px !important;
    background-color: #eeffff;
    color: #111;
 /*   border: 2px solid #aaf; */
}
    

.articlegrid-news {
    background-color: #ddd;
    border-radius: 8px !important;
/*    border: 2px solid #afa; */
}

.articlegrid-news-item {
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    color: #333;
    font-size: 1 rem;
    font-weight: 800;
}

.articlegrid-technology {
    background-color: #ddd;
    border-radius: 8px !important;
/*    border: 2px solid #afa; */
}

.articlegrid-technology-item {
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    color: #333;
    font-size: 1 rem;
    font-weight: 800;
}

.articlegrid-technology-item .articlegrid-img {
    aspect-ratio: 1 / 1;
}

.articlegrid-finance{
    border-radius: 8px !important;
    background-color: #ddffff;
    color: #111;
 /*   border: 2px solid #aaf; */
}
    

.articlegrid-opinions-item {
    border-radius: 8px !important;
    background-color: #f4f4f4;
    color: #333;
    font-size: 1 rem;
    font-weight: 800;
}

.articlegrid-opinions {
    border-radius: 8px !important;
    background-color: #ffffdd;
    color: #111;
 /*   border: 2px solid #aaf; */
}
    

.articlegrid-opinions-item {
    border-radius: 8px !important;
    background-color: #f4f4f4;
    color: #333;
    font-size: 1 rem;
    font-weight: 800;
}

.articlegrid-science {
    background-color: #f0fff0;
    border-radius: 8px !important;
/*    border: 2px solid #afa; */
}

.articlegrid-science-item {
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    color: #333;
    font-size: 1 rem;
    font-weight: 800;
}

/* ===  Mobile tweaks for resulution smaller than 1200 pics wide ========================== */
@media (max-width: 1200px) {
    /* 1. Smaller title font inside each box */
    .articlegrid-opinions-item {
        font-size: 0.6rem !important;   /* was 1 rem */
    }
    
    .articlegrid-news-item {
        font-size: 0.6rem !important;   /* was 1 rem */
    }
    
    .articlegrid-science-item {
        font-size: 0.6rem !important;   /* was 1 rem */
    }
    
    .articlegrid-fiction-item {
        font-size: 0.6rem !important;   /* was 1 rem */
    }
    
    .articlegrid-fiction-item .articlegrid-img {
        aspect-ratio: 4 / 3 !important;
    }
    
    /* 2. (optional) fewer columns so grid isn’t tiny squares */
    .articlegrid-grid {
        grid-template-columns: repeat(2, 1fr);   /* 2-across on phones */
    }
}

/* ====================================================================*/


/* All image settings for individual items but also for 3 colums etc. */
/* default intro image only 45% with the text floating left of it */
.intro-image {
    float: right !important;
    width: auto !important;
    max-width: 45% !important;
    height: auto !important;
    margin: 1em 0 1em 1em !important;   /* note: always do a full margin TRBL coz otherwise the none mentioned stay active */
}

/* but in a column 3 layout we want it 100 % */
.blog-items.columns-3 .blog-item .intro-image {
/*    float: right !important;  no need to have that float anymore when its 100% */
    display: flex !important;
    justify-content: center !important;
    max-width: 100% !important;
    margin: 0 0 1em 0 !important;
}

/* and in a separate "latest article box we want it left aligned */
.latest-story .mod-articles-item-content .intro-image {
    float: left !important;
    margin: 1em 2em 0 0 !important;
    max-width: 265px !important;
    height: 265px !important;
    width: auto !important;
}

.pinned-breaking-article .intro-image {
    width: 500px !important;
    max-width: 50% !important;
    display: block;
    margin: 0 0 1em 1em !important;   /* note: always do a full margin TRBL coz otherwise the none mentioned stay active */
}

/* Mobile override */
@media (max-width: 1200px) {
    .pinned-breaking-article .intro-image {
        max-width: 100%;
    }
}


.leading-articles-darkweb img[align="right"],
.intro-articles-darkweb img[align="right"] {
      width: 300px !important;
      max-width: 100%;
}


/* ***********************************************************************/

/* Full-article view — override to bigger */
.item-pagepage-display-darkweb img[align="right"] {
  width: 300px !important;
  max-width: 100%;
}



/* Mobile image adjustments */
@media (max-width: 576px) {
  img[align="right"] {
   float: right !important;
    width: 100% !important;
    max-width: 150px !important;
  }

  /* Smaller headings for mobile */
  h2.item-title,
  .com-content-category-blog__item .page-header h2 {
    font-size: 1rem !important;
  }
}


/* like button and flags ******************************/
.likebuttons-and-flags {
    display: flex;
    margin-top: 20px;
    margin-bottom: 10px;
}

.likebuttons-and-flags .like-dislike-wrapper {
    margin-right: 50px;
}
/*****************************************************/


/* the world was spinning the wrong way !!! :))) *** */
.reverse-spin {
  transform: scaleX(-1);
}


/* **************** PINNED **** BREAKING NEWS FRONT PAGE */
.pinned-breaking-header-class {
    background:#ffaaaa;
}

/* .pinned-breaking-class  { */
.card:has(.pinned-breaking-class) {
    background:#ffeeee;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 800;
    line-height: 1.5;
    color: #444;
    border: 1px solid #faa;
    border-radius: 8px;
}


/* HEADING */

.brand-row {
  display: flex;
  justify-content: space-between; /* logo left, search right */
  align-items: center;
  width: 100%;
  padding: 0 1rem;
  gap: 1rem;
  flex-wrap: nowrap;
}

.brand-logo {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 65%; /* Prevents the logo from hogging all the space */
  display: flex;
  align-items: center;
  padding-right: 200px;
}

.brand-search {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
.brand-search form {
  max-width: 280px;
  width: 100%;
}

.site-description {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-align: left;
  color: #f0f;
}

.container-nav {
  padding: 0 1rem;
}

.container-below-top {
  padding-left: calc(3rem + [logo-offset]px);
  margin-top: 5px;
}

/* Mobile: stack */
@media (max-width: 768px) {
    .brand-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .brand-search {
        width: 100%;
        margin-top: 0.5rem;
    }
}


/* Mobile: stack again when it gets cramped */
@media (max-width: 768px) {
    .navbar-brand {
        flex-direction: column;
        align-items: flex-start;
    }
    .brand-search {
        width: 100%;
        margin-top: .5rem;
    }
}


/* ─── OPINION BLOG -------─────────────────────────────────────────── */
.opinion-leading-articles .blog-item {
    border: 1px solid #ccc;      /* thin grey border */
    border-radius: 8px;
    padding: 1.0rem;
    margin-top: 2rem;            /* space between cards */
    margin-bottom: 0rem;         /* space between cards */
    background:#eee;             /* if you want a white card on coloured page */
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    color: #111 !important;
}

.opinion-intro-articles .blog-item {
    border: 1px solid #ccc;      /* thin grey border */
    border-radius: 8px;
    padding: 1.0rem;
    margin-top: 2rem;         /* space between cards */
    margin-bottom: 0rem;         /* space between cards */
    background:#eee;             /* if you want a white card on coloured page */
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    color: #111 !important;
}


/* ─── 3-COLUMN BLOG CARD ─────────────────────────────────────────── */

/* Card shell */
.blog-items.columns-3 .blog-item {
    border:1px solid #bbb;
    border-radius:8px;
    padding:1rem;
    margin:2rem 0 0;
    background:#eee;
    box-shadow:0 2px 6px rgba(0,0,0,.05);

    /* clearfix so floats never collapse the card’s height */
    position:relative;
    
    display: flow-root;
}

/* Heading */
.blog-items.columns-3 .blog-item .item-title,
.blog-items.columns-3 .blog-item .item-title a {
    font-size:1rem;
    margin:0 0 .75rem;
    line-height:1.3;
    text-align:left;          /* overrides any inherited justify */
    -webkit-hyphens:none;
}

/* Body copy */
.blog-items.columns-3 .blog-item .item-content {
    font-size:.8rem;
    line-height:1.1;
    color: #111 !important;

    /* clamp to ~10 lines */
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:10;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* justify only real text (p, ul, ol, li) */
.blog-items.columns-3 .blog-item .item-content p,
.blog-items.columns-3 .blog-item .item-content ul,
.blog-items.columns-3 .blog-item .item-content ol,
.blog-items.columns-3 .blog-item .item-content li {
    text-align:justify;
    color: #111;
}


/* Make sure headings don’t clear the float */
.blog-item p,
.blog-item h2,
.blog-item h3,
.blog-item h4 {
    clear:none;
    color: #eee;
}


/* Container (optional) */
.latest-story {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: .5rem;
}


.latest-story .mod-articles-item-content {
  font-size: 1.0em !important;
  font-weight: bold;
}

/* Push only the first paragraph down, creating a gap under the title */
.latest-story .mod-articles-item-content p:first-of-type {
  margin-top: 1.5em;
}
/* Title styling */
.latest-story .mod-articles-title a {
  font-size: 1.5rem;
  color: #0aa;       /* or inherit from your theme */
  text-decoration: underline;
}

/* Hover state (optional) */
.latest-story .mod-articles-title a:hover {
  color: #aaf;
  text-decoration: none;
}

.mod-articles-item-content .mod-articles-title a:hover,
.mod-articles-item-content .mod-articles-title a:active {
  color: #aaf !important;
}


/* MENU SETTINGS ------------------------------------------------------------- */

/* Top-level menu settings */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > a {
  font-size: 2.0rem !important;
  color: #ff0000 !important;
  font-weight: 600;
  text-transform: none;
  border-bottom: 2px solid transparent !important; /* Reserve space for border */
  padding: 5px 0px !important; /* Add padding for better spacing */
}

/* Hover and focus for top-level menu items */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > a:hover,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > a:focus {
  border-bottom: 2px solid #ffffff !important; /* Change to white on hover */
  padding-bottom: 2px !important; /* Keep existing padding */
}

/* Active/current top-level menu item */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li.current > a,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li.active > a {
  border-bottom: 2px solid #ffffff !important;
}

/* Dropdown menu container (submenu) */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse {
  background-color: #ddd !important; /* White background for dropdown */
  border: 1px solid #000000 !important; /* Border to match theme */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  min-width: 200px; /* Adjust width as needed */
  padding: 10px 0 !important; /* Padding inside dropdown */
  position: absolute;
  z-index: 1000; /* Ensure dropdown appears above other content */
  display: none; /* Hidden by default (MetisMenu may override this via JS) */
}

/* Show dropdown on parent hover */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li:hover > ul.mm-collapse,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li.parent > ul.mm-collapse[aria-expanded="true"] {
  display: block !important; /* Show dropdown on hover or when expanded */
}

/* Submenu items */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li > a {
  font-size: 1.6rem !important; /* Slightly smaller font for subitems */
  color: #10aa10 !important;
  font-weight: 600; /* Lighter weight for subitems */
  text-transform: none;
  padding: 8px 15px !important; /* Padding for submenu items */
  display: block; /* Ensure full-width clickable area */
}

/* Hover and focus for submenu items */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li > a:hover,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li > a:focus {
  color: #ffffff !important;
  background-color: #CC0099 !important; /* Background on hover */
  border-bottom: none !important; /* No underline for subitems */
}

/* Active/current submenu item */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li.current > a,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li.active > a {
  color: #ffffff !important;
  background-color: #CC0099 !important;
  border-bottom: none !important;
}

/* Style for the toggle button (optional, if you want to customize it) */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > button.mm-toggler {
  background: transparent !important;
  border: none !important;
  color: #CC0099 !important; /* Match menu color */
  padding: 0 10px !important;
}

/* Hover for toggle button */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > button.mm-toggler:hover {
  color: #ffffff !important;
}

.container-header {
    position: relative;
    z-index: 10;
    margin-bottom: 0px;
    background-color: #000 !important;
/*    background-image: none;   */
    background-image: url("../worldmap_transparent.png");
    background-size: cover;
    background-size: 40%; /* Makes image 80% of container size */
    background-position: left center;
    background-position-x: 150px;
    background-repeat: no-repeat;
    box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.6); /* Adjust shadow to match black background */
}

/* clickable header link: bigger and fatter */
.container-header a {
  font-size: 4rem;    /* about 24px—adjust as needed */
  font-weight: 800;     /* extra-bold weight */
  line-height: 1.2;      /* prevents it from looking too tight */
  text-decoration: none !important; /* remove underlines (optional) */
}

.site-title, .site-description {
    border-bottom: none !important;
    margin-top: 0px; /* Adjust spacing between logo and text */
}

/* Text */
.container-component main p {
  text-align: justify;
  margin-bottom: 1em;
}

/* Single-article page header */
.com-content-article.item-page .page-header h1 {
  font-size: 1.50rem !important;
  text-decoration: none !important;
  color: #a99!important;
}

/* Blog list page titles (homepage/featured) */
h2.item-title {
  font-size: 1.25rem !important;
  text-decoration: none !important;
}

h2.item-title a,
h2.item-title a:link,
h2.item-title a:visited {
  color: #a99 !important;
}

h2.item-title a:hover,
h2.item-title a:active {
  color: #99a !important;
}

/* Category blog module titles */
/* Headers for both sections */
.com-content-category-blog__item .page-header h2 {
    font-size: 1.25rem !important;
    text-decoration: none !important;
}

.com-content-category-blog__item .blog-item p {
    color: #eee !important;

.com-content-category-blog__item .page-header h2 a,
.com-content-category-blog__item .page-header h2 a:link,
.com-content-category-blog__item .page-header h2 a:visited {
    color: #a99 !important;
}

.com-content-category-blog__item .page-header h2 a:hover,
.com-content-category-blog__item .page-header h2 a:active {
    color: #99a !important;
}

/* INTRO ARTICLE - Black background, white text */
.com-content-category-blog__items.items-leading .com-content-category-blog__item .item-content p {
    color: #eee !important;
}

/* CARDS - White background, dark text */
.com-content-category-blog__items.columns-3 .com-content-category-blog__item .item-content p {
    color: #111 !important;
}

/* Opinion leading articles (intro section) */
.com-content-category-blog__items.opinion-leading-articles .com-content-category-blog__item .item-content p {
    color: #eee !important; /* White text for black background */
}

/* Full article pages */
.com-content-article__body p {
    color: #eee !important;
}



/* Read more button */
p.readmore a,
p.readmore a:link,
p.readmore a:visited {
  color: #7700AA !important;
  font-size: 0.875rem !important;
  padding: 0.25rem 0.5rem !important;
  line-height: 1.2 !important;
  display: inline-block;
}

p.readmore a:hover,
p.readmore a:active {
  color: #880055 !important;
}

/* Sophisticated flex layout for larger screens */
@media (min-width: 769px) {
  .site-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .container-sidebar-left,
  .container-sidebar-right {
    flex: 0 0 300px !important;
    max-width: 300px !important;
  }

  .container-component {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* Mobile layout: stack content vertically */
@media (max-width: 768px) {
  .site-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }

  .container-sidebar-left,
  .container-sidebar-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .container-component {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Ensure inner module cards don’t overflow */
.container-component .card {
  overflow-wrap: break-word;
}



/************* category NEWS ********************************************************/
.leading-articles-news h1,
.leading-articles-news h2,
.leading-articles-news h3 {
    margin-bottom: 2.0rem;

}

.leading-articles-news {
    padding: 1rem;
    font-weight: bold;     /* Makes text thicker */
    font-size: 1.1rem;     /* Makes text larger */
    line-height: 1.1;      /* Optional: improves readability */
}


/* Bigger heading just for leading NEWS items */
.leading-articles-news .page-header h2 {
    font-size: 1.75rem !important;   
    line-height: 1.2;
}

/* Bigger heading just for leading NEWS items */
.intro-articles-news .page-header h2 {
    font-size: 1.0rem !important;
    line-height: 1.2;
}

/************* category OPINIONS ********************************************************/
body.page-display-opinions {
    background-color: #000;
}


/************* category STORIES ********************************************************/
body.page-display-stories  {
    background-color: #000;
}

.category li {
  display: flex;
  flex-direction: column;
  width: calc(33.33% - 20px);
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background: #ddd;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
}

.category li h3.cat-item-title {
  font-size: 1.5em;
}

.category li .cat-desc {
  font-size: 1em;
  color: #555;
}

.category li dl.article-count {
  font-size: 0.9em;
  color: #888;
}

.category {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
}

/* ---------- FORCE DESKTOP GRID ON ALL VIEWPORTS ---------- */
.site-grid,
.row {
  display: flex !important;
  flex-wrap: nowrap !important;
  background-color: #000;
}

/* fix sidebar & main columns */
.container-sidebar-left,
.container-sidebar-right {
  flex: 0 0 300px !important;
  max-width: 300px !important;
  background-color: #000;
}

.container-component {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ---------- FORCE HORIZONTAL TOP MENU ---------- */
.navbar .navbar-nav {
  display: flex !important;
  flex-direction: row !important;   /* prevent vertical stacking */
}

.navbar .nav-item {
  display: inline-block !important;
  margin-right: 1rem !important;    /* optional spacing */
}

/* always show full menu, hide the hamburger */
.navbar-toggler,
.navbar-collapse.collapse {
  display: none !important;
}

/*---------------------------------------------------------*/
/* keep the visual order when flex is active */
@media (min-width:1025px){
  .container-sidebar-left {order:1;}
  .container-component    {order:2;}
  .container-sidebar-right{order:3;}
}

@media (min-width:768px){                     /* tablets & up */
  /* turn the UL itself into a flex row (add -webkit-* for pre-iOS10) */
  ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list{
    display:-webkit-box !important;
    display:-webkit-flex !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;              /* prevent stacking */
    white-space:nowrap !important;
    gap:0.5rem;                                /* spacing between items */
  }
}

/* ─── 1 ▸ Search module fits on the same nav row ─────────────────────── */
@media (min-width:768px){                        /* tablets & up */
  /* let the whole module hug the right edge */
  .navbar .mod-search{margin-left:auto!important;flex:0 0 auto!important;}

  /* stop wide legacy widths from forcing a wrap */
  .navbar .mod-search input[type="text"],
  .navbar .mod-search input[type="search"]{
    width:100%!important;         /* grow / shrink with flex item */
    max-width:160px!important;    /* cap on iPad so it fits */
    font-size:1rem!important;
  }
}


/* ─── Two-column grid for ANY “intro/columns” wrapper on iPad ────── */
@media (min-width:768px) and (max-width:1024px){
  /* match .columns-1 / 2 / 3 etc. **or** the Joomla 5 .intro-items wrapper */
  .blog-items[class*="columns-"],
  .blog-items.intro-items{
    display:-webkit-flex!important;   /* old iOS */
    display:flex !important;
    flex-wrap:wrap !important;
    gap:0.5rem !important;
  }
  .blog-items[class*="columns-"] .blog-item,
  .blog-items.intro-items       .blog-item{
    flex:0 0 calc(50% - 0.5rem)!important;   /* 2 cards per row */
    max-width:calc(50% - 0.5rem)!important;
  }
}

/* ─── Keep three columns on real desktops ( ≥ 1025 px ) ─────────── */
@media (min-width:1025px){
  .blog-items[class*="columns-"],
  .blog-items.intro-items{
    display:flex!important;
    flex-wrap:wrap !important;
    justify-content:space-between !important;  /* stretch across row */
    gap:0.5rem !important;
    align-items: flex-start !important;  /* ADD THIS LINE */
  }
  .blog-items[class*="columns-"] .blog-item,
  .blog-items.intro-items       .blog-item{
    flex:0 0 calc(33.333% - 0.5rem)!important;
    max-width:calc(33.333% - 0.5rem)!important;
  }
}