/* CSS File */

html {
 font-size: 16px;
 margin:    0 auto;
 max-width: 1920px;
}

body {
 font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
}

nav {
  display: grid;
}

.mainHeader {
  position: sticky;
  left:  0;
  top:  0;
  width: 100%;
  z-index: 1000;
}

.overall {
  margin: auto;  
}

.headerBlock {
  background-color: #002147; /*Was 667486*/
  background-size: cover;
  padding: 1rem 0;

  /* Grid styles */
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
}

.headerBlock img {
  max-width: 400px;
  margin: auto;
  display: block;
  padding: 1rem 0;
}

.headerBlock p {
  font-size:  1.2rem;
}

.headerBlock h1 {
  font-family: 'Faustina', serif;
  font-weight:  600;
  font-size: 3rem;
  padding: 0.8rem 0;
  margin: 0;  
  color:  white;
  letter-spacing: 1px;
}

.headerBlock a {
  text-decoration: none;
}


.mainBlock, .mainBlockHome, .mainBlock.news, .mainBlock.memAdmin, .mainBlock.memAdminDual {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 5%;
}

.mainBlock.memAdminDual {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0%;

}

.mainBlock.news {
  grid-column-gap: 3%;
  grid-row-gap:  24px;
}

.mainBlock.single {
  grid-template-columns: 1fr;
  margin: 0 5%;
}

.mainBlock.basket, .mainBlock.eventBasket {
  grid-template-columns: 1fr 3fr;
  padding:  2px 18px;
  margin-bottom: 6px;
  margin-top: 0;
  background-color: #edf5ff; /* For browsers that do not support gradients */
  background-image: linear-gradient(white, #edf5ff);
}

.mainBlock.eventBasket {
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0 6px;
  background-color: #fafdff; /* For browsers that do not support gradients */
  background-image: linear-gradient(white, #fafdff);
}

.mainBlock.Membership, .mainBlock.dual, .mainBlock.dualGap, .mainBlock.noGap {
  padding:  1rem 5% 1rem 5%;
/*  padding-top: 1rem;
  padding-bottom: 1rem; */
  grid-template-columns: 1fr 1fr;
  margin-top: 0;

}

.mainBlock.Membership {
  padding:  1rem 0 1rem 0;
  margin: 0;
}

.mainBlock.memAdmin, .mainBlock.memAdminDual {
  padding:  0;
  margin:  24px 0 12px 0;
  column-gap: 2%;
}

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

.mainBlock.dualGap {
  grid-column-gap:  10%;
}

.mainBlock.noGap {
  padding:  1rem 0 1rem 0;
}

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

.mainBlock.thirdSplit {
  grid-template-columns: 1fr 2fr;
}

.mainBlock.shop {
  margin:  0 3%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap:  1%;
}

.mainBlock p, .mainBlock li, .mainBlockHome p, .mainBlockHome li, .bookingTable td, .indentText p {
  font-size: 1.3rem;
  padding: 0.6rem 0;
  margin: 0;
}

.mainBlock li {
  padding: 0.5rem 1rem;
  margin: 0.2rem 0;
}

.itemArticle {
  padding: 6px;
}

.itemArticle h1, .itemArticle h2, .itemArticle h3, .itemArticle h4  {
  font-family: 'Faustina', serif;
  font-weight:  600;
  color: #002147;
  font-size: 2.2rem;
  padding: 0.8rem 0;
  margin: 0;  
}

.itemArticle h1 {
  padding: 2rem 0 0.6rem 0;
 }


.itemArticle h2 {
  font-size: 1.8rem;
 }

.itemArticle h3 {
  font-size:  1.6rem;
}

.itemArticle h4 {
  font-size:  1.4rem;
}

.itemArticle img {
  width:  100%;
}

.itemArticle ul {
  padding-top: 0;
  margin-top: 0;
}

.itemArticle.newsImage img {
  width:  auto;
}

.itemArticle.newsImage summary {
  font-size: 1.6rem;
  line-height: 2rem;
  color:  #b58d2f;
}

.itemArticle.shadow {
  border-radius: 8px;
  box-shadow: 4px 6px 8px -6px #667486;
  margin:  4px 6px;
  padding:  2px 4px;

}


.itemArticle p, .bookingTable td, .itemArticle li {
  font-weight: 300;
}

.itemArticle p {
 line-height: 1.4;
}

.itemArticle li {
  margin: 8px 0;
  padding: 0;
 line-height: 1.4;
}

.itemArticle a:hover {
  text-decoration: none;
  color: #805500 ;
}

.itemArticle a {
  color:  #000;
}

.itemArticle.event, .itemArticle.cart {
  border-right: 1px solid #DBA718;
  border-bottom: 1px solid #DBA718;
  margin-bottom: 5px;
  border-bottom-right-radius:  12px;
}

.itemArticle.cart {
  grid-column-start: 1;
  grid-column-end: 3;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(243,240,230,1) 0%, rgba(255,255,255,1) 100%);
  /*background-color: #FAF8F4;*/
}

.itemArticle.shopBasket {
  grid-template-columns: 1fr 4fr;
}

.itemArticle.dual {
  grid-template-columns: 1fr 1fr;
  border:  1px solid red !important;
}

.itemArticle.shop {
  border:  1px solid lightgrey;
  padding-left:  6%;
  padding-right:  6%;
  margin-bottom: 12px;
}

.indentText {
  margin-left: 18px !important;
}

.mainBlock.news > .itemArticle {
   border-bottom: 1px solid #667486;
}

.mainBlock.Membership  > .itemArticle {
  border: 1px solid lightgrey;
  margin: 5px;
}

.mainBlock.memAdmin > .itemArticle, .mainBlock.memAdminDual > .itemArticle {
  background-color: #fafafa;
  padding-left: 12px;
  padding-right: 12px ;
}

.blankBook {
  width:  100%;
  min-height: 300px;
  background-color: #b6c4d6;
}

.blankBook h2 {
  color: black;
  text-align: center;
  margin: auto;
  padding: 12px 5%;
}

.subEntry {
  background: rgb(238,228,192);
  background: linear-gradient(90deg, rgba(238,228,192,1) 0%, rgba(202,184,134,1) 18%, rgba(255,255,255,1) 100%);
  padding:  0 0.1rem;
}

.subEntry h1, .subEntry h2 {
  font-family: 'Faustina', serif;
  color: #000000;
  margin:  3px;
}

.subEntry p {
  font-weight: 300;
}

.subEntry a {
  color:  #000;
}

.subEntry a:hover {
  text-decoration: none;
  color: #805500 ;
}

.atrisk {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 2rem;
}

.atriskImages img {
  width:  15% !important;
}

.itemArticle.bg {
 background: rgb(249,243,226);
 background: linear-gradient(-90deg, rgba(209, 201, 180,1) 0%, rgba(250, 250, 242,1) 80%); /* Was 249,243,226 */
 /*background: linear-gradient(90deg, rgba(209, 201, 180,1) 0%, rgba(255,255,255,1) 80%); /* Was 249,243,226 */
 margin:  4px 0;
}

.smallText {
  font-size: 1.2rem !important;
}

.smallText.italic {
  font-size: 1.1rem !important;
  font-style: italic;
}

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

footer {
  width:  100%;
  display: grid;
  align-items: center;
  column-gap: 2%;
  grid-template-columns: 1fr 1fr 1fr;

  background-color: #002147; /* was 4682B4 */
  margin:  0;
  color: white;
  text-align: center;
  font-size: 1.2rem;
}

footer > div > p > a {
  color: white;
  text-decoration: none;
}

footer > p  {
  color: #fff;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

footer > div > p > a:hover {
  color: green;
}


input[type="text"], input[type="date"], input[type="time"], input[type="email"], textarea, input[type="password"] {
 background-color: #e0e3e7; 
 font-size: 1.2rem;
}


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

select {
 background-color: #e0e3e7; 
 font-size: 1.2rem;
 /*-webkit-appearance: menulist;*/
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width:  90%;
}

.homeKeySearch{
 font-size:  1.4rem;
 background-color: #ffffff; 
}


.generalTable td {
  font-size: 1.4rem;
  font-weight: 300;
  padding: 0.6rem 1rem;
  margin: 0;
  border-bottom: 1px solid #EADEBD;
}

.generalTable td span {
  color:  lightgrey;
}

.generalTable th {
  font-size: 1.2rem;
  font-weight: 300;
  font-style: italic;
  text-align: left;
}

.orsButton, .blankLetter {
  margin: 6px 3px;
  padding: 6px 12px;
  font-size: 1.3rem;
  background-color: #002147;
  color: white;
  cursor: pointer;
  box-shadow: 3px 3px 2px #AAAAAA;
}

.orsButton.fRight {
 float: right;
}

.orsButton.Light {
  background-color: #666666;  
}

.orsButton:hover {
  background-color: #b7d5f7;  
  color: #002147;
}

.orsButton:disabled {
  color:darkgrey;
  background-color: lightgrey;
}


.blankLetter {
  margin-top: 4px;
  pointer-events: unset;
  cursor: default;
  background-color: #dddddd;
  color: #333333;
  box-shadow: 3px 3px 2px #666666;
}

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

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

.actionIcon {
  cursor: pointer;
}

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

hr {
  color: #DBA718;
}

details summary { 
  cursor: pointer;
}

summary {
  font-size:  1.2rem;
}

.smallBorder {
  border-bottom: 1px solid #eee4c0;
  font-size:  1.1rem !important;
}

.gazSearchBlock {
  border-right: 2px solid #eee4c0;
  border-bottom: 2px solid #eee4c0;
  border-radius:  6px 0;
  margin-top:  18px;
}

.headerImage {
  width:  100%;
  margin: auto;
  display: block;
}

.headerImage img {
  width:  100%;
  margin: auto;
  display: block;

}
.headerImage p {
  text-align: center;
  width:  70%;
  margin: auto;
  display: block;
  font-size:  0.8rem;

}

.iconAction {
  cursor:  pointer;
}

.essential {
  color: black !important;
  font-weight: bold;
  margin-left: 6px;
}

.pinned {
  width: 48px !important;
  height: 48px;
  position:absolute;
  top: 10px;
  right: 20px;
  animation: fadeIn 3s;

}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.orsLinkButton {
  margin: 4px 3px;
  font-size: 1.3rem;
  background-color: #212934;
  color: #ffffff !important;
  text-decoration: none;
  box-shadow: 5px 5px 3px #AAAAAA;
  padding: 5px 12px 5px 12px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

.orsLinkButton a:hover {
  background-color: white;
}

.publicationsGrid {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr 1fr;
  margin: 2%;
  overflow: hidden;
  grid-row-gap: 1px;
  background-color: #EADEBD;
}

.publicationsGrid > * {
  background-color: white;
}

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

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

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

 .headerBlock h1 {
   font-size: 1.7rem;
 }

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

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

  .itemArticle.cart td {
    font-size:  1rem;
  }

  .orsButton.fRight {
   float: left;
  }


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

  .orsForm, .orsForm3 {
    grid-template-columns: 1fr;
  }

  .orsForm3 select {
    max-width: 100px;
  }

  .itemArticle.b {
    grid-row-start: 1;
    grid-row-end: 2;
  }


}

/* ----------------------------------------------------------------- */

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

   .mainBlock, .mainBlockHome, .mainBlock.thirdSplit, .mainBlock.memAdmin, .mainBlock.dualGap, .mainBlock.memAdminDual {
     margin: 0;
     display: grid;
     grid-template-columns: 1fr;
   }

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

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


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

.headerImage img {
  width:  100%;
  margin: auto;
  display: block;

}

.headerBlock h1 {
  font-size: 2rem;
}

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


}

/* ----------------------------------------------------------------- */

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

   .mainBlock.dual, .mainBlock.shop {
     margin: 0;
     display: grid;
     grid-template-columns: 1fr;
   }
  
   .headerBlock img {
     width: 90%;
   }

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

  footer {
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;

  }

.publicationsGrid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  margin: 2%;
  background-color: white;

}


}

/* ----------------------------------------------------------------- */
 
@media all and (max-width : 1200px) {

   .orsForm3 {
    grid-template-columns: 1fr 2fr;
    border-bottom: 1px solid #cab886;
  }

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

  }


}

/* ----------------------------------------------------------------- */
 
@media all and (min-width : 1900px) {

   .mainBlock.shop {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   }
 }
/* ----------------------------------------------------------------- */

/* Handle height of header image in case of landscape phones  */

@media all and (max-height: 500px) {
 .headerImage {
  display: none;
 }
 .headerImage img {
  width: 50%;
 }
}

/* ----------------------------------------------------------------- */