/* Made with help of colours.joomla.com */
		/* If you feel like it, you can help support */
        /* me by donating to paypal@coolcat-creations.com or even just */

		/* new color variables */
        :root {
            --dark-color: #1B2739;
            --light-color:#FCFDFF;
            --main-background: #F5F7F7;
            --primary-background: #F5F7F7;
	        --primary-textColor: #135cae;
            --secondary-background: #F5F7F7;
            --secondary-textColor: #135cae;
            --accent-background: #F5F7F7;
            --accent-textColor: #135cae;
            --primary-gradient: NONE;
            --secondary-gradient: NONE;
             --breakpoint: 768px;                            
        }
        body {
            background: var(--main-background); 		/* background of website */
            color: var(--main-color); 		/* color of website */
        }
     @supports (display:grid) {
  .site-grid {
    grid-gap: 0 1em;
    grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,19.875rem))[main-end]minmax(0,1fr)[full-end];
    grid-template-areas:
".banner banner banner banner." 
".top-a  top-a  top-a  top-a. " 
".top-b  top-b  top-b  top-b. " 
".side-l comp   comp   side-r." 
".bot-a  bot-a  bot-a  bot-a. " 
".bot-b  bot-b  bot-b  bot-b. ";
    display: grid;
    /*/ this stops the leftmenu dropping into a collapsed column instead of displaying left when viewed on narrow screens/*/
       }
p {
  margin-top: 0;
  margin-bottom: .5rem; /*/ this fixes the limitation in TinyMCE which does not allow modification of paragraph spacing. This should be fixed in TinyMCE so that spacing is applied just to content and not the whole website /*/
    }
           a {
             color: var(--secondary-background); /* color of links */ 
 }
             .container-header .mod-menu {
flex-direction: row !important;//*this keeps the navmenu horizontal instead of of going dropdown on mobile screens*//
        }
        .container-header {
            background-color: var(--primary-background); /* Solid background of header */
            background-image: var(--primary-gradient);  /* Set to none to disable the gradient */
     }
          .container-header .navbar-toggler {
color: #000;
/*colour of mobile phone hidden menu toggler*/
            }
.container-header .mod-menu {
color: #135cae; /*/navbar home menu link colour/*/
}
.container-header .mod-menu > li {
padding-left: 10px; /*/spaces between collapsed mobile top menu items/*/
}
          .mod-list li a:hover {
text-decoration: none;
            color: #2cf390;
           font-weight: bold;
            
}
.mod-list li a {
text-decoration: none;
           }
        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of articlesnews or newsflash modules */
           /*! padding:.5em; */
        }
 .container-header .grid-child {
     padding:0em
       }
 
.container-header nav {
margin-top: 0em;

}
.metismenu.mod-menu .metismenu-item {
padding: 0em 1.3em; /*/spaces nav menu items and top padding/*/
}
           .btn.btn-primary {
            background-color: var(--primary-background); /* background of primary buttons */
            border-color: var(--primary-background); /* border color of primary buttons */
            color: var(--primary-textColor); /* text color of primary buttons */
                }
        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of primary buttons */
            border-color: var(--accent-background); /* border color of primary buttons */
            color: var(--dark-color); /* text color of primary buttons */
 
  }
        .btn.btn-secondary {
            background-color: var(--secondary-background); /* background of secondary buttons */
            border-color: var(--secondary-background); /* border color of secondary buttons */
            color: var(--secondary-textColor); /* text color of secondary buttons */
        }

        .bg-info {
            color: var(--accent-textColor);
            background-color: var(--accent-background) !important;
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of cards */
	        border-radius: 0; /* border radius ofcards */
	        background-color: var(--primary-background);         
                    /* background color of cards */
          --card-cap-padding-y: 0rem;
  --card-cap-padding-x: 0rem;
        }

        .card-header {
            background-color: var(--primary-background); /* background color of card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of card headers */
            color: #008b46; /* text color of card headers */
        }

        .card-body {
            background-color: var(--primary-background); /* background color of card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of card bodies */
            color: var(--primary-textColor); /* text color of card bodies */
            padding-top: 0px; /*/removes space between sidebar menu items and module title/*/
                 }

        .card-body a {
            color: var(--primary-textColor); /* text color of card body links )/      
           
        }

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of secondary cards */
            border-radius: 0; /* border radius of secondary cards */
            background-color: var(--secondary-background); /* background color of secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of  secondary card headers */
            color: var(--secondary-textColor); /* text color of card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of secondary card bodies */
            color: var(--secondary-textColor); /* text color of secondary card bodies */
        }

        .card.secondary a {
            color: var(--secondary-textColor); /* text color of secondary card body links */
        }


        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of footer */
            background-image: var(--secondary-gradient);  /* Set to none to disable the gradient */
            color: var(--secondary-color); /* text color of footer */
        }

        ::selection {
	        background-color: var(--accent-background); /* background color of text selection */
			color: var(--dark-color); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	        color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        .article-info {
	        background-color: var(--main-background); /* background color of your article info */
	        padding: 15px 20px; /* padding of your article info */
        }

        .article-info dd {
	        color: var(--main-color); /* text color of your article info */
		}

        .btn.btn-info {
	        background-color: var(--primary-background); /* background color of your info buttons */
            border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
	        color: var(--primary-color); /* text color of your info buttons */
        }

        .btn-primary .icon-white:before {
	        color: var(--primary-textColor); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--secondary-textColor); /* text color of your info buttons in primary */
        }

        .form-control {
	        background-color: var(--main-background); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--primary-color); /* text color of your form controls */
	        border-radius: 0; /* border radius of your form controls */
        }

        label {
	        font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
		h1, .h1 {
			font-size: clamp(18px, 5vw, 28px);
          color: #cccccc;
          text-align: center; 
  		}

		/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
		h2, .h2 {
			font-size: clamp(16px, 5vw, 26px);
		}

		/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
		h3, .h3 {
			font-size: clamp(14px, 5vw, 18px);
		}

		/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
		h4, .h4 {
			font-size: clamp(14px, 5vw, 0px);          
		}

	 .footer .grid-child {
   padding: 0rem 0em;
   }
 
   .container-footer > div:nth-child(1) {
    padding-bottom: 0px;
    padding-top: 0px;
     }

@media (width >= 1000px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1000px;
    }
      @supports (display: grid) {
  .site-grid {
        grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 13.5rem))[main-end] minmax(0, 1fr)[full-end]; 
   /*/keeps content menus and header aligned/*/
    }
    .grid-child {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
   }
    
      @media (width >= 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1000px;
  display: flex;
   }