/* CSS File */
html {
 font-size: 14px;
}

body {
  /*font-family: 'Noto Sans JP', sans-serif;*/
}

main p, main h1, main h2, main h3, main h4, main h5 {
  margin: 1.8rem 0;
}

footer {
  background-color: #004479;
  min-height: 72px;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 1fr;
  font-family: 'Roboto', sans-serif;
  padding:  0 10%;
}


footer p, footer a {
  color: white;
  font-size: 1.4rem;
  text-align: center;
}

footer a:hover {
  color: yellow;
}

footer .footerLogo {
  margin-top: 20px;
  max-width:  50%;
}

.footerSingle {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
}

.footerDouble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}


/*footer img {
  margin:  24px;
  height: 60%;
}*/

.overall {
  margin:  0 ;
  font-family: 'Roboto', sans-serif;

  /* max-width: 1920px; */
}

.header {
  display: grid;
  background-color: #004479;
  grid-template-columns: 1fr 3fr;
}

.header-image {
  padding: 2rem 4rem;
  max-width:  250px;
}

.header-image img {
  height: 80px;  
}

.mainBlock.singleHome {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("/images/CA762P.jpg") no-repeat;
  background-size: cover;
  margin: 0;
  padding: 4rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10%;
  align-content: center;
  margin-bottom: 2rem;
}

.mainBlock.dual {
  margin: 0;
  padding: 4rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10%;
  align-content: center;
}

.mainBlock.dual.blue {
  display: grid;
  background-color: #004479;
  color: white;
}

.mainBlock.dual.inset1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  padding:  0 10%;
  margin:  0;
  /*max-width: 1200px;  */
  align-content: center;
}

.mainBlock.dual.inset2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding:  0 10%;
  /*max-width: 1200px;  */
  align-content: center;
}

.mainBlock.dual.inset3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1%;
  padding:  0 1rem;
  margin:  0;

  /*max-width: 1200px;  */
  align-content: center;
}


.mainBlock.dual.insetStd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding:  0 10%;
  /*max-width: 1200px;  */
  align-content: center;
}

.mainBlock.triple {
  margin: 0;
  padding: 4rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 4%;
  align-content: center;
}


.mainBlock.single {
  display: grid;
  grid-template-columns: 1fr;
  padding:  0 10%;
  /*max-width: 1200px;  */
  align-content: center;
}

.mainBlock.single.blue {
  display: grid;
  grid-template-columns: 1fr;
  padding:  2rem 10%;
  /*max-width: 1200px;  */
  align-content: center;
  background-color: #004479;
  color: white;
}

.mainBlock.multi, .mainBlock.shop {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-content: center;
  grid-column-gap: 5% ;
  padding: 0 4rem;
}

.mainBlock.multi img, .mainBlock.shop img {
  width:  50%;
} 

.mainBlock.shop {
  padding:  0 10%;
  grid-column-gap: 2% ;
}

.mainBlock.basket {
  padding:  0 10%;
  margin:  0;
}

.mainBlock.basket h3 {
  margin: 0;
  padding:  0;
}

.mainBlock.basket td {
  font-size:  1.3rem;
  padding: 0 8px;
}

.mainBlock.basket th {
  font-size:  1rem;
  font-style: italic;
  font-weight: normal;
  text-align: center;
  padding: 0 8px;
}


.itemArticle {
}

.itemArticle img {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 600px;
}

.itemArticle.white {
  padding:  2rem 6rem;
  color: white;
  opacity: 1;
}
  
.itemArticle.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 8%;
}

.itemArticle.three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 4%;
}

.itemArticle.threeBorder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 4% ;
  box-shadow: 0 8px 6px -6px gray;;

}


.itemArticle h1,.itemArticle h2, .itemArticle h3, .itemArticle h4, .itemArticle h5, .heading.blue h1, .heading.white h1  {
  font-family: georgia;
  font-size: 3rem;
/*  margin:  1rem 1rem 2rem 1rem;*/
  margin:  1rem 1rem 2rem 0;
  font-weight: normal;
}

.heading.blue h1 a {
  color:  white;
  font-family: georgia;
  font-size: 3rem;
}

.itemArticle h2, .heading.blue h2, .heading.white h2  {
  font-family: georgia;
  font-size: 2.6rem;
}

.itemArticle h3, .heading.blue h3, .heading.white h3  {
  font-family: georgia;
  font-size: 2.4rem;
}

.itemArticle h4, .heading.blue h4, .heading.white h4  {
  font-family: georgia;
  font-size: 2rem;
}

.itemArticle h5, .heading.blue h5, .heading.white h5  {
  font-family: georgia;
  font-size: 2rem;
}

.itemArticle p, .itemArticle li, .plainTable td, .generalTable td {
  font-size: 1.8rem;
  line-height: 2.4rem;
}

.itemArticle.shadow {
  border-radius: 8px;
  box-shadow: 4px 6px 8px -6px #004479; /*DCDAEA*/
  margin:  4px 6px;
  padding:  2px 4px;
}

.generalTable.basket td {
  padding: 4px 10px;
  border-top:  1px solid #cccccc;
} 

.generalTable.basket th {
  font-size:  1rem;
  font-style: italic;
  font-weight: normal;
  text-align: center;
  padding: 0 8px;
}

.generalTable.smallText td {
  font-size:  1.2rem;
}

.generalTable td {
  padding: 4px 8px;
}

.basketTotal {
  border-top: thick double #004479 !important;
}

.itemArticle a {
  color: black;
}

.itemArticle a:hover {
  color: #ab1942;
}

.itemArticle li {
  margin-top: 8px;
  margin-left: 24px !important;
}

.itemArticle.shop {
 /* border:  1px solid #dddddd;
  box-shadow: 4px 4px #dddddd; */
  border-bottom:  1px solid #dddddd;
  padding:  4px;
  margin-bottom: 10px;
}

.itemArticle.shopBasket {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-column-gap: 4% ;
/*  border:  1px solid #dddddd;
  box-shadow: 4px 4px #ddddff; */
  border-bottom:  1px solid #dddddd;
  padding:  4px;
  margin-bottom: 10px;
}

.itemArticle hr {
  border:  0;
  height:  0;
  box-shadow: 0 0 6px 1px #004479;
  margin-left: 5%;
  width:  90%;
}

details {
  background-color: #004479;
  color: white;
  font-size: 1.4rem;
  padding:  6px 12px;
  margin-bottom: 12px;
}

details p {
  font-size:  1.4rem !important;
}

.eventDetails, .classificationDetails {
  background-color: white;
  color: #000000;

}

.classificationDetails summary {
  font-size:  2rem;
}


.bioDetails {
 background-color: white;
 color: #000000;
 font-size: 1.8rem;
 padding:  6px 12px;
 margin-bottom: 12px;
}

.mType details {
  background-color: white;
  color: black;
  padding:  0;
  margin:  6px 0 0 0;
  font-size: 1.2rem;
  line-height: normal;
}

.mType summary {
  background-color: white;
  color: black;
  padding:  0;
  margin:  0;
  font-size: 1.2rem;
  line-height: normal;
}

.itemArticle.shop details {
  margin-left:  8px;
/*  background-color: lightcyan;*/
  background-color: white;
  color: #004479;

}

.burgonNotes {
  background-color: white;
  color: black;
}

.burgonNotes summary {
  font-size: 2rem;
}

.burgonNotes p {
  font-size:  1.8rem !important;
}

.readmore a {
  color: #004479;
  font-size: 1.4rem;
  font-weight: 700;
}

.readmore a:hover {
  color: #ab1942;

}

.heroImage {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.heroImage img {
  width:  100%;
}

.whiteButton, .whiteButton.small {
  margin: 4px 3px;
  padding: 0.6rem 2rem;
  font-size: 1.6rem;
  background-color: white;
  color: black;
  cursor: pointer;
  border-radius: 6px;
}

.whiteButton.small {
  margin: 1px 2px;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border-radius: 6px;
}

.whiteButton:hover {
  background-color: black;
  color:  white;  
}

.darkButton, .darkButton.small, .darkButton.notes  {
  margin: 4px 3px;
  padding: 0.6rem 2rem;
  font-size: 1.6rem;
  background-color: #004479;
  color: white;
  cursor: pointer;
  border-radius: 6px;
}

.darkButton:hover {
  background-color: #ab1942;
}

.smallDate{
  font-size: 1.3rem !important;
  color:  #888888;
  padding:  0;
  margin: -1.2rem 0;
}

.subMenu {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;

}

.plainTable td {
  padding: 2px 6px;
}

.smallText p, .smallText li {
  font-size: 1.3rem;
  line-height: 1.6rem;
}

.heading.blue,  .heading.white {
  background-color: #004479;
  margin:  0;
  padding:  0.1rem 0;
  color: white;
  text-align: center;
}

.heading.white {
  background-color: white;
  padding:  0 10%;
  padding-top:  4rem;
  margin: 0;
  color: black;
  text-align: left;
}


input[type="text"], input[type="date"], input[type="time"], input[type="email"], textarea, input[type="password"] {
 background-color: #eeeeee; 
 font-size: 1.6rem;
 font-family: 'Roboto', sans-serif;
 padding:  ;
}

input[type="number"] {
 background-color: #eeeeee; 
 font-size: 1.6rem;
}

input[type="checkbox"] {
 width:  25px;
 height:  25px; 
 background-color: #ffeeee; 
}

select {
 background-color: #eeeeee; 
 font-size: 1.6rem;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width:  90%;
}

.wideBorder {
  margin:  6px 10px 12px 0;
  padding:  4px 6px 8px 6px;
  border-bottom: 1px solid #999;
  /*box-shadow: 4px 8px 10px #004479;*/
}
.archiveBorder {
  margin:  6px 1% 12px 1%;
  padding:  4px 6px 8px 6px;
/*  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1%;
justify-items: center;*/
}


.multiBlockFull {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  column-gap: 1%;
}

.multiBlockFull h3 {
  text-align: center;
  color:  #004479;
}

.clearfix {
  clear:both;
}

.iconAction:hover {
  cursor: pointer;
}

.highlightPara {
  color:  #004479;
  font-weight: 400;
}

.littleText {
  font-size: 1.1rem !important;
  line-height: 1.3rem !important;
  margin:  0 6% 0 2%;
  padding: 0;
  font-style: italic;
}

.ulSmall li {
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin-left: 28px;
}

.boxBlock {
  width:  97%;
  padding: 1%;
  border: 1px solid #004479;
  border-radius: 4px;
  margin-bottom:  1rem;
  box-shadow: 4px 4px 6px #004479;
}

iframe {
   width: 100%;
   aspect-ratio: 16 / 9;
}

.highlight {
  background-color: yellow;
}

.splitBox, .dualBox, .notesBox {
   display: grid;
   grid-template-columns: 1fr 1fr;  
   width:  max-content;
}

.crumbBox {
   display: grid;
   grid-template-columns: 1fr 1fr;  
   width:  100%;
}

.splitBox p {
  display:inline-block;
  padding: 1rem 0;
  margin: 0;
}

.tnEdit {
  width: 45%;
  padding-left:  16px;
  margin-left:  16px;
  margin-top: 16px;
  margin-bottom: 6px;
  float:right;
  background-color: #eeeeee;
  box-shadow: 5px 5px 6px #cccccc;
/*  border-top: 1px solid #000000;
  border-bottom: 1px  solid #000000;*/
}

.notesBox {
  width: 100%;
  grid-template-columns: 1fr 8fr;  
  align-items: center;
  grid-column-gap: 1%;
}

.smallButton {
  margin: 0 3px 0 3px;
  padding: 0.2rem 1rem;
  font-size: 1.0rem;
  background-color: #004479;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

.compareBox {
  width: 15px !important;
  height: 15px !important;
}

.archiveNotes {
 font-size: 1.1rem;
 color: #004479 ;
}

.archiveNotes a {
 color: #004479 ;
}

.subTitle {
  font-size:  1.3rem;
  font-style: italic;
}

input[type="radio"] {
  height: 20px;
  width: 20px;
}

.mainBlock.dual.blue  a {
  color:white;
}

.mainBlock.dual.blue  a:hover {
  color:lightcyan;
  text-decoration: none;
}

.generalTable.treasurer td {
  border-bottom: 1px solid grey;
}

.eventShow {
  border: 1px solid #dddddd;
  margin: 20px 8px;
  padding: 0 10px;
  border-radius: 8px;
  box-shadow: 6px 6px #dddddd;
}

.srchResult details {
  color: black;
  font-size: 1.6rem;
}

.srchResult summary {
  font-size: 1.6rem;
}

.renewalReminder {
  background: linear-gradient(135deg, #ffffa8 81%,#ffffa8 82%,#ffffa8 82%,#ffffd6 100%);
  padding: 0.4rem 1rem;
  margin: 0.2rem 1rem;
  box-shadow:2px 12px 5px rgba(0, 0, 0, 0.40);
  border-bottom-right-radius: 60px 5px;
}

.fourBlock {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;  
   column-gap: 1%;

}

.bNotesD {
  color: black !important;
  font-size: 1.4rem;
}

.bNotesD p, .bNotesD li {
  font-size: 1.4rem;  
}

.bNotesD summary {
  font-family: georgia;
  font-size: 2.4rem;
  margin:  1rem 1rem 2rem 0;
  font-weight: normal;  
}

.latestBox {
   display: grid;
   grid-template-columns: 1fr 1fr;  
   column-gap: 1%;
}

.breadCrumb {
  float:right; 
  margin: 0;
  padding: 0;
  font-size: 1.2rem !important;
}

.breadCrumb a {
  font-size: 1.2rem;
  margin: 0;
  padding: 0;
  padding-right: 16px;
}

.breadCrumbNav {
  font-size: 1.3rem;
  padding: 8px 8px;
  background-color: #ffffff;
  text-align: right;
  float:right;
}

.breadCrumbNav-item {
  display: inline;
  font-size: 1.3rem !important;
  padding: 0;
  margin: 0;

}

.breadCrumbNav-item + .breadCrumbNav-item::before {
  content: "›";
  padding: 0 4px;
  font-size: 1.8rem;
}

.breadCrumbNav-item a {
  color: #004479;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

.breadCrumbNav-item.active {
  color: #6c757d;
}

.linkSpecialD {
  cursor:pointer !important; 
  text-decoration: underline;
}

/*
----------------------------------------------------------------------------------
Responsive css here....... 
----------------------------------------------------------------------------------
*/
@media all and (max-width : 1200px) {

 footer {
    display: grid;
    grid-template-columns: 1fr;  
 }

.mainBlock.singleHome {
  display: grid;
  grid-template-columns: 1fr;
}

.multiBlockFull {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  column-gap: 1%;
}

.mainBlock.multi, .mainBlock.shop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  grid-column-gap: 5% ;
  margin: 0 6px;
  padding: 0 2rem;
}

.mainBlock.dual.inset1,
.mainBlock.dual.inset2,
.mainBlock.dual.inset3 {
  display: grid;
  grid-template-columns: 1fr;
}

.mainBlock.triple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4%;
}

.darkButton.small, .darkButton.notes {
  margin: 4px 3px;
  padding: 0.2rem 1rem;
  font-size: 1.1rem;
  border-radius: 4px;
}

.generalTable td {
  font-size: 1.4rem;
  line-height: 1.8rem;
}

input[type="text"], input[type="date"], input[type="time"], input[type="email"], textarea, input[type="password"] {
 font-size: 1.3rem;
}

input[type="number"] {
 font-size: 1.3rem;
}

.splitBox {
   display: grid;
   grid-template-columns: 1fr;  
   width:  max-content;
}

.crumbBox {
   display: grid;
   grid-template-columns: 1fr;

}

.breadCrumbNav {
  order: -1;
 }

.splitBox p {
  padding: 0;
  margin: 0;
}

.tnEdit {
  width: 100%;
}

.darkButton.notes {
  margin: 8px 3px;
  padding: 0.2rem 0.4rem;

}

.fourBlock {
   display: grid;
   grid-template-columns: 1fr 1fr;  
   column-gap: 1%;

}


} /* End of max 1200px */ 

@media all and (max-width : 1000px) {

.itemArticle.three {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 4%;
}

.mainBlock.triple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2%;
}

.multiBlockFull {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  column-gap: 1%;
}

.itemArticle.notes p, .itemArticle.notes li {
  font-size: 1.3rem ;
  margin: 0;
  padding: 0;
}

.mainBlock.dual {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2%;
}

.latestBox {
   display: grid;
   grid-template-columns: 1fr;  
}


} /* End of max 1000px */ 

@media all and (max-width : 600px) {

.multiBlockFull {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  column-gap: 1%;
}

.itemArticle.three {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 4%;
}

.mainBlock.triple {
  display: grid;
  grid-template-columns: 1fr;
}


.mainBlock.multi, 
.mainBlock.shop, 
.mainBlock.dual,
.mainBlock.dual.insetStd,
.mainBlock.dual.inset1 {
  display: grid;
  grid-template-columns: 1fr;
  padding:  0 1rem;
}

footer img {
  max-width: 100%;
}

.fourBlock {
   display: grid;
   grid-template-columns: 1fr;  

}

.notesBox {
   display: grid;
  grid-template-columns: 1fr;  
  border-top: 1px solid #dddddd;
}

} /* End of max 600px */ 

@media all and (max-width : 400px) {

  .headerBlock {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  footer {
    grid-template-columns: 1fr;
  }

.multiBlockFull {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1%;
}

.darkButton {
  margin: 4px 3px;
  padding: 0.5rem 1rem;
  font-size: 1.4rem;
  background-color: #004479;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  text-align: left !important;
}


}