/* Remove default symbol in top menu */
.sp-module ul >li >a:before {
    font-family: FontAwesome;
    content: "";
    margin-right: 8px;
}

/* Fix top menu alignment */
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {background: transparent !important; color: #000;}
.helix-social-share {display: none; visibility: hidden;}
.valign-bottom-1 {
 height: 71px;
}
.valign-bottom-2 {
 width: max-content;
 position: absolute;
 right: 0;
 bottom: 0;
}
.nav-pills li {
 display:inline-block;
}
.nav-pills>li>a { padding: 8px 16px 8px 15px; }

/* Single page multiple article smooth anchor */
html {
  scroll-behavior: smooth;
}
.content-anchor {
    display: block;
    height: 92px !important;
    margin-top: -92px;
    visibility: hidden;
}

/* Change colours of header and footer */
div#sp-menu {float: right;}
#sp-header { background: rgba(242,245,234,0.8); }
/* !250324 BW version #sp-header { background: rgba(220,220,220,0.8); } */
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span, #offcanvas-toggler > i { color: #030027; }
.sticky-wrapper.is-sticky #sp-header { background: rgba(242,245,234,0.8)!important; opacity: 0.8; }
/* !250324 BW version .sticky-wrapper.is-sticky #sp-header { background: rgba(220,220,220,0.8)!important; opacity: 0.8; } */


/* #sp-footer { background: #ff8ac0; } */
/* #sp-bottom { padding: 40px 0px !important; } */
#sp-footer { background: #432818; /*fb98b6;*/ }
/* !250324 BW version #sp-footer { background: #707070; } */

/* Custom Table CSS - https://css-tricks.com/responsive-data-tables/ */
/* For regular size screen device */
.custom-table-1 table { 
  width: 100%; 
  border-collapse: collapse; 
}
.custom-table-1 caption {
  display: none;
}
/* Zebra striping */
.custom-table-1 tr:nth-of-type(odd) { 
  background: #fff; 
}
.custom-table-1 th { 
  background: #6f1d1b;
  /* !250324 BW version background: #dcdcdc; */
  color: white; 
  font-weight: bold; 
}
.custom-table-1 td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left;
  word-wrap: break-word;
}
/* For small screen device */
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Force table to not be like tables anymore */
  .custom-table-1 table, thead, tbody, th, td, tr {
    display: block;
    width: 100%;
  }
  
  .custom-table-1 caption {
    display: block;
  }
  
  .custom-table-1 thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .custom-table-1 tr {
    border: 1px solid #ccc;
    margin-bottom: 15px;
  }
	
/*  .custom-table-1 td {
    /* Behave like a "row" */
/*    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 28%;
  }
*/
  #the-imc td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 170px;
  }
  
  #the-imc-zh td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 170px;
  }
  
  #our-staff td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 150px;
  }
  
    
  #our-staff-zh td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 150px;
  }
  
  #public-lesson-2024 td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 150px;
  }

  .custom-table-1 td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  /* Label the data */
  #the-imc td:nth-of-type(1):before { content: "Name of Manager"; }
  #the-imc td:nth-of-type(2):before { content: "Category of Manager"; }
  
  #the-imc-zh td:nth-of-type(1):before { content: "校董芳名"; }
  #the-imc-zh td:nth-of-type(2):before { content: "校董類別"; }
  
  #our-staff td:nth-of-type(1):before { content: "Name"; }
  #our-staff td:nth-of-type(2):before { content: "Class Teacher"; }
  #our-staff td:nth-of-type(3):before { content: "Subject(s) Taught"; }
  
  #our-staff-zh td:nth-of-type(1):before { content: "姓名"; }
  #our-staff-zh td:nth-of-type(2):before { content: "班主任"; }
  #our-staff-zh td:nth-of-type(3):before { content: "任教科目"; }
  
  #public-lesson-2024 td:nth-of-type(1):before { content: "課節"; }
  #public-lesson-2024 td:nth-of-type(2):before { content: "科目"; }
  #public-lesson-2024 td:nth-of-type(3):before { content: "年級"; }
  #public-lesson-2024 td:nth-of-type(4):before { content: "課題"; }
  #public-lesson-2024 td:nth-of-type(5):before { content: "教學語言"; }
  #public-lesson-2024 td:nth-of-type(6):before { content: "任教老師"; }
  #public-lesson-2024 td:nth-of-type(7):before { content: "集合時間"; }
  #public-lesson-2024 td:nth-of-type(8):before { content: "公開課時間"; }
  #public-lesson-2024 td:nth-of-type(9):before { content: "課後交流時間"; }
}

/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
/* flexbox table */
.custom-table-2-wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.custom-table-2-wrapper > * {
  flex: 1 100%;
}

.custom-table-2-header-1 {
  background: #6f1d1b;
  color: #fff;
}

.custom-table-2-header-2 {
  background: #818F9C;
  color: #fff;
}

.main {
  background: #BAA898;
}

.aside-1, .aside-2, .aside-3 {
  background: #EEE0CB;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto;}
}

@media all and (min-width: 800px) {
  /*.main    { flex: 2 0px; } */
  .main    { order: 1; }
  .aside-1 { order: 2; }
  .aside-2 { order: 3; }
  .aside-3 { order: 4; }
  .footer  { order: 5; }
}

/* Fix Main menu bar width */
@media (min-width: 992px) {
  .container { width: 990px; }
}

@media (min-width: 1200px) {
  .container { width: 1170px; }
}

/* footer contact us hanging style */
.hangingindent {
 text-indent: -1.55em;
 margin-left: 2.2em;
}

/* footer bottom */
.col-sm-6 {
 padding-top: 15px;
}

/* Fix Logo shows twice */
img.sp-retina-logo {display: none;}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-moz-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) {
  img.sp-default-logo {display: none;}
  img.sp-retina-logo {display: block;}
}

/* Contact us module valignment */
.customvcentre {
  padding-top: 10px;
}


/* most top bar colour 2 */
.customcolour2 {
  //width: 100vw;
  //margin-left: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50% + 8.5px); /* Half of 17px */ 
  width: calc(100vw - 17px);

//  position: absolute; /* or fixed */

  /* 2. Move the left edge to the container center */
//  left: 50%;

  /* 3. Pull the element back by exactly half its own width */
//  transform: translateX(-50%);
  background-color: #cd75b4;
}

/* most top bar remove top marigin */
.custom-no-top-margin {
  margin-top: 0px;
}
.-no-top-margin {
  margin-top: 0px;
}


/* !250324 BW version qx-element */
/*
.qx-btn {
  background: rgba(233,233,233,1) !important;
}

.qx-btn:hover {
  background: rgba(155,155,155,1) !important;
}

.qx-element-blurb {
  background: rgba(233,233,233,1) !important;
}

.qx-element-blurb:hover {
  background: rgba(155,155,155,1) !important;
}
*/