/*Pre-load Russo One for Menu Bar */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

/* Center align Main Menu */

.container-header .mod-menu {
   justify-content: center;
   color: #fff;
   padding: 0;
}

.container-header .navbar-toggler {
   justify-content: center;
   color: #fff;
   padding: 0;
}

/* Bold text in Main Menu */

ul.mod-menu, ul.mod-menu_dropdown-metismenu button {
  font-family: "Russo One", sans-serif;
}

/* Bold text on Search label - currently disabled as I removed the label display

label {
    display: inline-block;
    font-weight: bold;
} */


/* Add spacing to top of paragraphs so they don't bunch up to the element above */
p {
    margin-top: 1rem;
    margin-bottom: 1rem;
    }

/* Hide tags in Category Blog View */
.com-content-category-blog__item .tags {
	display: none;
}


/* Hide full article image in article view */
.none.item-image img {
    display: none;
}

/* Hide article title in article view 
div.page-header h1 {
  display: none;
} */

/* Change colours of buttons etc to match header */
:root {

    --cassiopeia-color-primary: #aa0000;
    --cassiopeia-color-link: #aa2222;
    --cassiopeia-color-hover: #ff0000;
  
    --link-color: #73021d;

    }

/* Change Pagination Button Colours */
.page-link.active, .active>.page-link {
    background-color: #a51f18;
    border-color: #a51f18;
}

/* Change Tag Button Colours */
.btn-info {
    --btn-bg: #a51f18;
    --btn-border-color: #a51f18;
    --btn-hover-bg: #9d4c4c;
    --btn-hover-border-color: #fff;
}

/* Set blockquote to more defined */
blockquote {
  text-align: left;
  width: 100%;
  border: none;
  color: #171414;
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  display: block;
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  }


/* Change header background colour */

.header {
    background: #aa0000;
    }

/* Smaller banner */
.container-banner .banner-overlay {
    height: 40vh;
}


/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */

.metismenu.mod-menu .mm-collapse {
    background: #aa2222;
}

/* TSet links in dropdown to white */

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #fff;
}

/* Change footer background colour */

.footer {
    background: #171414;
}

/* Make bottom-a and bottom-b module positions wrap to a new line after two instances
https://forum.joomla.org/viewtopic.php?f=815&t=1006948 */

.container-bottom-a,
.container-bottom-b {
    flex-wrap: wrap;
}

.container-bottom-a>*,
.container-bottom-b>* {
    flex: 0 0 calc(50% - .5em);
}

@media (max-width: 991.98px) {
    .container-bottom-a>*,
    .container-bottom-b>* {
        flex: 0 1 auto;
    }
}

/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

h4 {text-align: left;
  font-size: 18px;
  font-weight: 500;
}

/* Justwatch widget - fix whitespace after logo */

.jw-widget img {
  max-width: 100%;
  height: 16px;
}