/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap');


:root {
  --body-bg: #fff;
}

/* Use font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */


body {
    font-family: "Roboto", sans-serif;
}


/* The page header of Cassiopeia has the class "header" so you control it with .header */

.header {
    background: white;
	/*background: linear-gradient(90deg, rgba(102,51,0,1) 0%, rgba(255,204,153,1) 100%);*/
}

/* Change the village hall menu if it is in the header */
.container-header .container-nav {
  display: flex;
  justify-content: flex-end;
}

.container-header nav {
  margin-top: -7.5em;   /* overlap the logo slightly */
  margin-right: 100px;
  padding: 0;
}

#static-menu-id .village-hall-menu {
  color: #333;
  font-family: "Roboto Condensed";
  font-size: 15px;
  font-weight: bold;
  line-height: 2rem;
  text-transform: uppercase;
}

#static-menu-id {
  li.current {
    border: 2px solid #fc9;
    padding: 30px 10px;
    color: #c63 !important;
  }
    
/* change the links: a, link, visited, focus, hover and active */
  a {
  text-decoration: none;
  }
  
  a:link {
    background: transparent;
  }

  a:focus, a:hover {
    color: #fc9 !important;
    border-bottom: 2px solid #c63;
    padding-bottom: 30px;
  }

  a:active {
    color: #c63 !important;
  } 

} /*end of static-menu-id */

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

/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */
.metismenu.mod-menu .mm-collapse {
    background: #475BAF;
}

/* The links in the dropdown menu have to be addressed individually 

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: black;
}*/

/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */

.card {
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}

/* Modules in different module positions in the Cassiopeia template get the position as class, for example main-top - so to change all modules in main top use .main-top.card */

.main-top.card {
    background: #e1e9f5;
}

/* style the local links menu */
.local-links.no-card {
    background: #e1e9f5;
}

.local-links-header {
    color: #630;
}

.local-links h5 {
  line-height: 1rem;
  font-size: 1rem;
  font-family: "Roboto", sans-serif; 
  font-weight: 400;
}

/* 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 */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: 'Roboto Slab', serif;
}

h1, .h1 {
    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
    color: #663300;
}

.page-header h2 a {
  color: #663300;
}

/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

.btn-primary {
    background: rgba(119, 9, 121, 1);
}

/* If you want to color something, only if you move the mouse over it then write :hover behind it
*/

.btn-primary:hover {
    background: rgba(0, 212, 255, 1);
}

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
*/

.item-image {
    border: 2px solid #ff0000;
}


/*If you run into icons on the website, you can color them individually*/

.icon-user {
    color: #403678;
}

/* or you color all icons with this special statement*/

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #403678;
}

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */

.footer {
	background: rgb(102,51,0);
	background: linear-gradient(270deg, rgba(102,51,0,1) 0%, rgba(255,204,153,1) 100%);
}

/* cjl add borders around each article to distinguish them */
/* brown border around each article */
div.blog-item:nth-of-type(odd) {
  border: 1px solid #663300;
}
div.blog-item:nth-of-type(even) {
  border: 1px solid #CC6633;
}
/* div.item-content {
    border: 1px solid #398235;
}
div.item-content {
    border: 1px solid #2568FB;
}

/* leading item in blog layout */
div.blog-items.items-leading {
   border: 1px solid #FFCC99;
}

/* The National Lottery Logo */
.tnl-logo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
    align-items: baseline;
}

.tnl-logo div {
  display: flex;
  flex-direction: column;

  width: 50%;
}

.tnl-logo img {
  align-items: flex-start;
}

.tnl-logo p {
  align-items: flex-end;
}