/* Custom CSS v11 added to protostar then cassiopeia template by S Dallyn 160721 and 240223 */

html, body {
  height: fit-content !important; /* Ensure the body takes up the full viewport height */
  background-repeat: repeat !important;
  background-image: url("/images/Photos/groins.jpg") !important;
  background-attachment: fixed !important; 
  background-size: cover !important;
  background-height: auto !important;
  z-index: 100 !important;
}

/* Set default body paragraph text size to responsive size based on 16 px */
body 
{
/*font-size: calc(16px + 0.390625vw) !important;*/
line-height: 24px !important;
font-style: normal !important;
font-weight: normal !important;
color: #000000 !important;
font-family: 'Open Sans',Roboto,sans-serif !important;
display: flex !important;
 

}

@media only screen and (max-width: 575.98px) and (orientation: landscape) {
    p {
        font-size: 0.9em; /* Smaller font size on smaller screens */
    }
}


#page-body {
    flex: 0 1 auto; /* Allow content to grow and push footer down */
}

header /*This is set to full width of screen by Cassiopeia */
{
  background-image: none !important;
  background: none !important;
  background-color: none !important;
}

/* Topbar Module Navbar and container styling */

.container-topbar{
  display: flex !important;
  flex-direction: row !important;
  flex: 0 1 auto !important;
  z-index:1000 !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  overflow: visible !important;
  margin-right: auto !important;
  margin-left: auto !important;
  margin-bottom: 8px !important;
  
}

.container-nav
{
	padding: 0em !important;
    width: fit-content !important;
    /*align-self: flex-end !important;*/
}

/* This is the container for the custom module with the logo in. */
#mod-custom115{
 
  /*display: flex !important;
  flex-direction: row !important;
  flex: 0 1 auto !important;*/
  
}  

.navbar
{
	padding-top: 1em !important;
    padding-bottom: 1em !important;
    padding-left:0em !important;
    padding-right:0em !important;
  	margin-top: 0em !important;
    justify-content: center !important;
  	width: fit-content !important;
  	background-color: none !important; 
  	/*background-image: url('/images/Graphics/lgrey064.jpg') !important;*/
 }

.navbar-brand {
  margin: auto !important;
}

ul.mod-menu, ul.mod-menu_dropdown-metismenu button {
font-weight: bold !important;
justify-content: center !important;
}


/* Article container */
.container-component
{
  display: flex !important; 
  flex-direction: column !important;
  	background-color: white !important;
  	padding : 1rem !important;	
  	border-top: 5px solid white !important;
  	border-left: 10px solid white !important;
  	border-right: 10px solid white !important;
  	border-bottom: 5px solid white !important;
 	background-image: url('/images/Graphics/lgrey064.jpg') !important;
}

/* Container for News Events menu */
.grid-child.container-top-a
{
    display: flex !important; 
    flex-direction: column !important;
    padding : 0rem !important;
    margin : 0rem !important;
   	padding-left : 0rem !important;
    padding-right : 0rem !important;
  	border : 10px solid rgb(00,206,196) !important;
  	/*border-left: 10px solid rgb(00,206,196) !important;
  	border-right: 10px solid rgb(00,206,196) !important;
  	border-bottom: 5px solidrgb(00,206,196) !important;*/
    /*background-color:rgb(00,206,196)*/ /* teal to match menu */
 	/*background-image: url('/images/Graphics/lgrey064.jpg') !important;*/
}
.top-a.card,.card-body
{
  margin : 0px !important;
  padding-bottom : 0px !important;
  padding-top : 0px !important;
}



main
{
  padding-left : 1rem !important;	
  padding-right : 1rem !important;
  position:relative !important;
  background-image: url('/images/Graphics/lgrey064.jpg') !important;
}

/* Custom Footer module */
#mod-custom113
{
    display: flex !important; 
    flex-direction: column !important;
    width: 100% !important;
    background-image: url('/images/Graphics/lgrey064.jpg') !important;
  	padding-left : 1rem !important;	
    padding-right : 25px !important;	
  	border-top: 5px solid white !important;
  	border-left: 10px solid white !important;
  	border-right: 10px solid white !important;
  	border-bottom: 5px solid white !important;
  	margin-top : 0rem !important;
    margin-bottom: 0rem !important;
    margin-right : 0rem !important;
    /*position: fixed !important;*/
    bottom: 0 !important;
    z-index: 100 !important;
    line-height: 16px !important;
    margin-block-end: 0 !important;
  
    
}

.container-footer, .footer, .full-width
{
  /*font-size: calc(16px + 0.390625vw) !important;*/
  width: auto !important;
  background-color: transparent !important;
  background-image: none !important;
  /*padding : 1rem !important;*/
  
  display: flex !important;
  flex-direction: column !important;
 
}
.grid-child
{
  padding-left: 0rem !important;
  padding-right: 0rem !important;
  max-width: 1320px !important;

}




/* Collapsed Hamburger menu to black */
.navbar-toggler
{
  color: black !important;
  background-image: none !important;
  background-color: white !important;
}

/* Style default paragraph */
p 
{
font-size: 18px !important;
line-height: 24px !important;
font-style: normal !important;
font-weight: normal !important;
color: #000000 !important;
font-family: 'Open Sans',Roboto,sans-serif !important;
}


/* Style all paragraph links to same as Little Owls original site */
p a:link {color:blue !important;}
p a:visited {color:blue !important;}
p a:hover {color:red !important;}
p a:active {color:red !important;}








/* Style Main menu links to same colours as logo */
/* This is the full height part not just button so be careful ! */
.metismenu-item
{
  border-radius: 5px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  margin-right: 0.1rem !important;
  
}

.lomenuclass:link
{background-color:rgb(00,206,196) !important;/* Teal from sea on map */
  color:#000000 !important;

}

.lomenuclass:hover 
{background-color:rgb(124,194,66) !important; /* Green from logo */
  color:#000000 !important;}


/* Style down arrow on 2 level menu buttons*/
.mm-toggler-link
{
  color:#000000 !important;
  background-image:none !important;
  background-color:rgb(00,206,196) !important; /* Teal from sea on map */
  border-radius: 5px !important;
  margin-right: 0px !important;
  margin-left: 0px !important;
  padding-right: 10px !important;
  padding-left: 0px !important;
}

button mm-toggler.mm-toggler-link
{
  color:#000000 !important;
  background-image:none !important;
  background-color:rgb(00,206,196) !important; /* Green from logo */
  border-radius: 5px !important;
  margin-right: 0px !important;
  margin-left: 0px !important;
  padding-right: 0px !important;
  padding-left: 0px !important;
}
.mm-toggler-link:hover
{
  background-color:rgb(124,194,66) !important; /* Green from logo */
}


.container-header li:link
{
 background-color: #93be2b !important; /* Logo Green */
 color: white !important;
}
.container-header li:visited
{
 background-color: #93be2b !important; /* Logo Green */
 color: white !important;
}
.container-header li:hover
{
 background-color: #F5F5F5 !important; /* WhiteSmoke */
  color: black !important;
}
.container-header li:active
{
 background-color: #93be2b !important; /* Logo Green */
 color: white !important;
}
.container-header li nav-item:active
{
 background-color: #93be2b !important; /* Logo Green */
 color: white !important;
}

.tos-background
{
  background-image: url('/images/Graphics/lgrey064.jpg') !important;
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}



/* Add standard font */
@font-face {
  font-family:'Times New Roman';
  src: url('../fonts/TimesNewRomanPSMT.woff2') format('woff2'),
       url('../fonts/TimesNewRomanPSMT.woff') format('woff'),
       url('../fonts/times.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.h1 {  /*font-size: 1.75em !important;*/
   font-family: 'Open Sans',serif !important;}
.h2 {  /*font-size: 1.6em !important;*/
   font-family: 'Open Sans',serif !important;}
.h3 {  /*font-size: 1.5em !important;*/
   font-family: 'Open Sans',serif !important;}
.h4 {  /*font-size: 1.3em !important;*/
   font-family: 'Open Sans',serif !important;}


h1 {  /*font-size: 1.75em !important;*/
   font-family: 'Open Sans',serif !important;}
h2 {  /*font-size: 1.6em !important;*/
   font-family: 'Open Sans',serif !important;}
h3 {  /*font-size: 1.5em !important;*/
   font-family: 'Open Sans',serif !important;}
h4 {  /*font-size: 1.3em !important;*/
   font-family: 'Open Sans',serif !important;}