:root {

    --cassiopeia-color-primary: #303030;
  --cassiopeia-color-link: #4dc4f7;
  --link-color: #4dc4f7;
  --link-color-rgb: 0, 255, 255;
  --cassiopeia-color-hover: #c0c0c0;
  --link-hover-color: #c0c0c0;
  --link-hover-color-rgb: 192, 192, 192;

    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;

    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 1rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #fff;

  /* Main Article Background Colour Desktop */    
    --body-bg: #fff; 
}
body {
    background-color: /*#1c1c1c; */ #fff;	
    color: #000000;
    background-image: url();
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
/* Within Articles to create a different colour Back ground ( <div class="bg-section1"> must be in HTML in Article </div>) */
   .bg-section1 {
  background: #e0e0e0;
	--angle: 0deg;
	border: 3px solid; /* This is the border size */
    	border-image: conic-gradient(from var(--angle), #0088cc, #007FFF, #ADD8E6, #00A1FF, #1591EA /*red, yellow, lime, aqua, blue, magenta, red*/) 1;
	 
	animation: 5s rotate linear infinite; /* This is the timer for the rotating border */
}
     /*   background-color: #e0e0e0;
        color: #000000;
        border-style: inset;
  	    border-width: 1px;
        box-shadow: 12px 4px 18px 0px #4dc4f7;
        -webkit-box-shadow: 12px 4px 18px 0px #4dc4f7;
        -moz-box-shadow: 12px 4px 18px 0px #4dc4f7;
        padding: 15px 15px; */
    }



/* Make header font sixe smaller - one step , see: https://forum.joomla.org/viewtopic.php?f=815&t=997387 */

h1, .h1 {
  font-size: calc(1.1rem + 0.9vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 1.2rem;
  }
}

h2, .h2 {
  font-size: calc(1.1rem + 0.6vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 1.2rem;
  }
}

h3, .h3 {
  font-size: calc(1rem + 0.3vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.275rem;
  }
}

h4, .h4 {
  font-size: 1.25rem;
}

h5, .h5 {
  font-size: 1rem;
}

h6, .h6 {
  font-size: 1rem;
}

/* Hide Images on Mobile Website Use Class hide-on-mobile */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
}

/* 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: 'Georama', sans-serif;
}

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

.header {
    background: #606060;
    
}

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: #000000;


}

/* The links in the dropdown menu you have to adress them individually */

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



/* Menu */

/* Override the lila background with white */
.container-header {
    background-color: /* transparent; */ #303030;
    background-image: none;
}
/* Banner Module */

.container-banner .banner-overlay {
    background-color: #303030; 
    background-position: top, 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 20vh;
}
/* Text  */

/* Top A */
.container-top-a  {
    background-color: #303030; 
    background-position: top, 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 20vh;
}


.container-header .mod-menu {
    color: #C0C0C0;
  
}

/* We add padding and radius so that on hover there is a nice background */
/*.container-header .mod-menu a {
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px; 
    padding: 3px 15px;
    color: #0088cc; 
  
} */

/* On hover there should be a gray background*/
.container-header .mod-menu a:hover {
    background-color: ##C0C0C0;
}
/* Menu Active Colour */
.metismenu-item.active {
    color: #4dc4f7;
}

/* Hamburger Menu Colour and Border */

.container-header .navbar-toggler {
   /* color: #4dc4f7;
    border: 2px solid #4dc4f7; 

} */
    background: #303030; /*This is the code for the Rainbow Hamburger Border */
	--angle: 0deg;
	border: 3px solid; /* This is the border size */
	border-image: conic-gradient(from var(--angle), #0088cc, #007FFF, #ADD8E6, #00A1FF, #1591EA /*red, yellow, lime, aqua, blue, magenta, red*/) 1;
	
	animation: 5s rotate linear infinite; /* This is the timer for the rotating border */
}


@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* 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 {
  	background: #303030;
  	border-style: inset;
  	border-width: 2px;
    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);
} */

.card { /* This is the Rainbow Frame code for Modules using .card */
  background: #303030;
	--angle: 0deg;
	border: 3px solid; /* This is the border size */
    	border-image: conic-gradient(from var(--angle), #0088cc, #007FFF, #ADD8E6, #00A1FF, #1591EA /*red, yellow, lime, aqua, blue, magenta, red*/) 1;
	 
	animation: 5s rotate linear infinite; /* This is the timer for the rotating border */
}

/* Slide-out Mobile Menu for Cassiopeia */


@media (max-width: 991.98px) {
    .container-header .navbar-collapse {
        position: fixed;
        top: 0;
        left: -350px; /* Hidden offscreen by default */
        width: 80vw;  /* Width of the slide-out drawer */
        height: 100vh;
        background-color: #1a252f; /* Custom background color */
        z-index: 1050;
        transition: left 0.3s ease-in-out;
        display: block !important; /* Overrides default bootstrap display */
        /*padding: 60px 20px 20px 20px;*/ 
        /* box-shadow: 2px 0 10px rgba(0,0,0,0.3); */
        overflow-y: auto;
    }

    /* State when the hamburger menu is clicked / open */
    .container-header .navbar-collapse.show {
        left: 0; /* Slides into view */
    }

    /* Style the list inside the slide-out container */
    .container-header .mod-menu {
        flex-direction: column !important;
    }
    
    .container-header .mod-menu li a {
        color: #ffffff !important;
        padding: 10px 10px 10px 10px;
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
} 

@media (max-width: 991.98px) {
  .container-header .mod-menu li.active > a,
  .container-header .mod-menu li.current > a {
    background-color: #007bff !important; /* Replace with your background hex code */
    border-radius: 0px;
    width: 90vw;
    color: #FFF !important;            /* Replace with your text hex code */
  }
}

/* END HAMBURGER */


@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

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

 .banner.card {
    background: #e1e9f5;
} 

/* 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 {
  	color: white;
  text-shadow: 2px 2px 4px #000000;
}

/* 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: #fff;
}

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

.footer {
  margin-top: 3em;  
  background: transparent;
   align-items: center;
            position: fixed;
            bottom: 0;
            width: 100%;
  height: 100px;
  padding-top: 0px;
            
  	
}
/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */
.footer .grid-child {
  margin-top: 1em;
    justify-content: space-between;
    align-items: center;
    padding: 1.0rem .5em;

/*TABLE CONTROL CODE*/
/* Desktop Baseline */
.stacking-table {
  width: 100%;
  border-collapse: collapse;
}

/* Mobile responsive breakpoint */
@media screen and (max-width: 600px) {
  /* Hide the desktop header row completely */
  .stacking-table thead {
    display: none;
  }
  
  /* Make everything a block element to stack vertically */
  .stacking-table, 
  .stacking-table tbody, 
  .stacking-table tr, 
  .stacking-table td {
    display: block;
    width: 100%;
  }
  
  .stacking-table tr {
    margin-bottom: 15px; /* Separate rows visually */
    border: 1px solid #ccc;
  }
  
  .stacking-table td {
    text-align: right; /* Put cell data on the right side */
    padding-left: 50%; /* Make room for the header label on the left */
    position: relative;
  }
  
  /* Pull the data-label value out and format it like a pseudo-header */
  .stacking-table td::before {
    content: attr(data-label); /* Dynamically grabs the text from HTML */
    position: absolute;
    left: 10px;
    width: 45%;
    text-align: left;
    font-weight: bold;
  }
}