/* AABC 2024-08-14T10:44:00+00:00 AABC 2024-03-06T17:17:00+00:00 */ /* AABC 2024-01-10T19:40:00+00:00 */




/*******************
 * START SECTION ABOUT primary colours
         ************/



:root {
  --cassiopeia-color-primary: var(--aabc2colour);
  --cassiopeia-color-hover: var(--aabc4colour);
  --cassiopeia-color-link, var(--aabc2colour);

--emphasis-color-rgb: 111, 66, 194;

--emphasis-color-rgb: var(--aabc2colour-rgb);

--table-striped-bg: rgba(var(--aabc2colour-rgb), .05);

  
}



.container-header,
.footer {
    background-color: var(--aabc2colour);
    background-image: none;
}

 /* start this was the body links 
a:not([class]) {
    text-decoration: none;
    border-bottom: 2px dotted;
    color: #e05e00;
    font-weight: 500;
}
  end this was the body links */

/*
a:link.aabcanobb {
  border-bottom: 1px var(--btn-border-color) solid;
}
*/
.com-content-article__body  a.btn:link {
    border-bottom: var(--btn-border-width) solid var(--btn-border-color);
}




/******
 * END SECTION ABOUT primary colours
********************/


/*******************
 * START SECTION ABOUT Google Fonts
         ************/

.tangerine-regular {
  font-family: "Tangerine", cursive;
  font-weight: 400;
  font-style: normal;
}

.tangerine-bold {
  font-family: "Tangerine", cursive;
  font-weight: 700;
  font-style: normal;
}





/******
 * END SECTION ABOUT Google Fonts
********************/



/*******************
 * START SECTION ABOUT Top of Page Banner images
         ************/


.container-banner .banner-overlay-aabc {
  background-attachment: unset;   
    background-position: top,50%;
    background-repeat: no-repeat;
    background-size: cover;
  color: #fff;
  height: 20vh;

}

.container-banner {
    margin: 0;
}


@media (min-width: 576px) {
  
  .container-banner .banner-overlay-aabc {
    height: 28vh;
  }
  
}


@media (orientation: landscape) {
  
  .container-banner .banner-overlay-aabc {
    height: 50vh;
  }
  
}


@media (orientation: landscape) and (min-width:1200px) {
  
  .container-banner .banner-overlay-aabc {
    height: 66vh;
  }  
  
}


.container-banner .banner-overlay .overlay,
.container-banner .banner-overlay-aabc .overlay {
  background-color: rgba(0,0,0,.25);   /* was rgba(0,0,0,.5)  */
}


.container-banner .banner-overlay {
  background-position: unset;
  background-attachment: unset;  
  height: 90vh;  /* was 70vh */
}

@media (min-width: 1200px) {
  
  .container-banner .banner-overlay	{
    background-attachment: fixed;    
  }  
  
}

@media (width: 1366px) and (height: 1024px) {
  
  .container-banner .banner-overlay	{
    background-attachment: unset;    
  }  
  
}



.container-banner .banner-overlay-aabc .overlay {
    align-items: center;
 /*   background-color: rgba(0,0,0,.5); */
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 1em;
    text-align: center;
}


.aabcTopHeroHomeText {
    /* font-family: 'Tangerine', cursive;  */
    font-size: 9.75vw;  /* had tried 11.5vw  but too big on desktop */
    color: white;
    text-shadow: 1px 1px 2px black;
}

.aabcCardNoBorder {
    background-color: transparent;
    border: none;
}



#mod-custom132notneeded {
    /* background-position: unset; */
}

/******
 * END SECTION ABOUT Top of Page Banner images
********************/


/******
 * START SECTION ABOUT site grid and grid template areas
********************/

.container-bottom-c {
  grid-area: bot-c;
}

.container-bottom-c {
  position: relative;
}

.container-bottom-c > * {
  flex: 1;
  margin: .5em 0;
}



@media (width <= 991.98px) {
  .container-bottom-c {
    flex-direction: column;
  }

  .container-bottom-c > * {
    flex: 0 auto;
  }
}


@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 ."
                         ". comp comp comp comp ."
                         ". side-r side-r side-r side-r ."
                         ". side-l side-l side-l side-l ."
                         ". bot-a bot-a bot-a bot-a ."
                         ". bot-b bot-b bot-b bot-b ."
    ". bot-c bot-c bot-c bot-c .";
    display: grid;
  }

  .site-grid > [class^="container-"], .site-grid > [class*=" container-"] {
    column-gap: 1em;
    width: 100%;
    max-width: none;
  }

  .site-grid > .full-width {
    grid-column: full-start / full-end;
  }

  @media (768px <= width <= 991.98px){
    .site-grid {
      grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". comp comp comp side-r ."
        ". side-l side-l side-l side-l ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b ."
    ". bot-c bot-c bot-c bot-c .";
    }
  }
  
    @media (width >= 992px) {
    .site-grid {
      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-b bot-b ."
      ". bot-c bot-c bot-c bot-c .";
    }
  }
}









/******
 * END SECTION ABOUT site grid and grid template areas
********************/




.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  /*
    --offcanvas-zindex: 1045;
    --offcanvas-width: 400px;
    --offcanvas-height: 30vh;
    --offcanvas-padding-x: 1rem;
    --offcanvas-padding-y: 1rem;
    --offcanvas-color: ;
    --offcanvas-bg: #fff;
    --offcanvas-border-width: 1px;
    --offcanvas-border-color: var(--border-color-translucent);
    --offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
  */
    
  --offcanvas-width: 80%;
}  


.offcanvas {
  /* 
  position: fixed;
  bottom: 0;
  z-index: var(--offcanvas-zindex);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 100%;
  color: var(--offcanvas-color);
  visibility: hidden;
  background-color: var(--offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  */
  max-width: 80%;  
  transition: transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
}

.offcanvas.show {
    /*  visibility: visible; 
    top: 5em;                  removed because this drop    made it wobble on iPhone */
}
.offcanvas.show .navbar-collapse {
    display: flex;
}

/* start hide are these needed - or are they in the mod override

.offcanvas .navbar-nav .nav-link {
    color: #000;
}
.offcanvas .navbar-nav .nav-link:hover {
    color: #d11818;
}

  end hide are these needed - or are they in the mod override */



.container-header-aabc-menu-bar {
    background-color: var(--aabc2colour);
    /*
    background-image: -o-linear-gradient(315deg,var(--cassiopeia-color-primary) 0,var(--cassiopeia-color-hover) 100%);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary) 0,var(--cassiopeia-color-hover) 100%);
    -webkit-box-shadow: inset 0 5px 5px rgba(0,0,0,.03);
    box-shadow: inset 0 5px 5px rgba(0,0,0,.03);
    position: relative;
  */
    z-index: 1030;
}


.container-header-aabc-menu .navbar-toggler {
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
}

.position-sticky-aabc-menu {
    position: sticky!important;
}



.sticky-aabc-t-425 {
  top: 4.25em;
}

.sticky-aabc-t-525 {
  top: 5.25em;
}

.icon-speed-aabc-10 {
  animation-duration: var(--fa-animation-duration,10s);
}

.icon-speed-aabc-5 {
  animation-duration: var(--fa-animation-duration,5s);
}



/********************
start of nav-pills for side menu
*********************/





.nav-pills .nav-link {
    border-radius: .25rem;
/*    background-color: white;  */
    border: var(--aabc2colour) solid 1px;
    margin: 4px 0;
    padding: 8px;
    color: var(--aabc2colour);
/*    color: #e05e00;  */
}

/*
.current.active {
    color: green;
    background-color: red;
}
*/

.current.active.deeper.parent {
    color: pink;
    /*  background-color: yellow;  */
}

.active.deeper.parent {
    color: brown;
    /*  background-color: orange;  */
}


.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
/*    background-color: rgba(0,0,0,.25);  */
  background-color: purple;
}


.nav-pills .current.active .nav-link {
    color: white;
    background-color: var(--aabc2colour);
}


#navbar127 .nav-pills .nav-link,
#navbar129 .nav-pills .nav-link {
/*    border-radius: .25rem;
    background-color: white;  */
    border: var(--gray-500) solid 1px;
    margin: 2px 0;
    padding: 4px 10px;
    color: #fff; 
/*    color: var(--aabc2colour);  
  font-size: 22px; */
}


#navbar127 .nav-pills .current.active .nav-link,
#navbar129 .nav-pills .current.active .nav-link {
    color: var(--aabc2colour);
    background-color: #fff;
}




/********************
end of nav-pills for side menu
*********************/






.page-header h2, .content-category h2,
.page-header h1, .content-category h1 {
    text-align: center;
    font-family: 'Tangerine', cursive;
    font-size: 4rem;
    color: var(--dark);
   /*    text-shadow: 2px 2px 6px black;
         background-color: #f8f9fa!important; */
}




.metismenu.mod-menu .metismenu-item-aabctop {
    padding: 0.1em 1em;
    font-size: 1.1rem;
}





.aabc-cardish-border {
  border: var(--border-width) solid #dfe3e7;
  border-radius: var(--border-radius);

}



/*******************
 * START SECTION ABOUT breadcrumb
         ************/

.breadcrumb {
    background-color: var(--aabc2colour-bg-subtle);
    border-radius: var(--border-radius);
}

/******
 * END SECTION ABOUT breadcrumb
********************/



/*******************
 * START SECTION ABOUT back to top link
         ************/

.back-to-top-link {
  position: fixed;
  right: unset;
  left: 50%;
  width: 52px;
  margin-left: -26px;
  text-align: center;
  color: var(--aabc1colour, #112855);
  background-color: rgba(255, 255, 255, 0.75);  /* can change the colour here */
}



/******
 * END SECTION ABOUT back to top link
********************/




/*******************
 * START SECTION ABOUT footer copyright
         ************/

footer div.mod-footer {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
@media (min-width: 768px) {
  footer div.mod-footer {
    flex-direction: row;
  }
}


/******
 * END SECTION ABOUT footer copyright
********************/