h6 {
  font-display: swap;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 5px;
}

div.galleryPanel {
  background-color: rgba(255, 255, 255, 0.5);
  justify-content: center;
  display:flex;
  border-radius: 4px;
  margin-left: 15px;
  margin-bottom: 15px;
}

div.galleryPanel2 {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
}

div.galleryPanel3 {
  background-color: rgba(192, 192, 192, 0.8);
  border-radius: 4px;
  margin: 15px;
}

div.gallery {
  color:blue;
  background-color: white;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  float: left;
  width: 160px;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

div.gallery2 {
  position: relative;
  color: black;
  background-color: white;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #fff;
  border-radius: 4px;
  float: left;
  height: 350px;
  width: 100%;
  overflow: hidden;
  overflow-x: hidden;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.gallery3 {
  color:black;
  background-color: white;
  margin: 5px 0px 5px 0px;
  border: none; 
  border-radius: 4px;
  float: left;
  width: 100%;
  height: 97%;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.gallery4 {
  color: black;
  background-color: white;
  margin: 0px; 
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 400px;
  width: 100%;
  overflow:scroll;
  overflow-x: hidden;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

div.gallery5 {
  color: black;
  background-color: white;
  margin: 0px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow:scroll;
  overflow-x: hidden;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.gallery:hover {
  border: 2px solid #777;
  border-radius: 4px;
}

div.gallery2:hover {
  border: 1px solid #777;
  border-radius: 4px;
  cursor: pointer;
}

div.gallery img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  text-align: center;
}

div.gallery textarea {
  width: 145px;
  height: 130px;
  object-fit: contain;
  text-align: center;
  resize: none;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px; 
}

div.gallery2 img {
  width: auto;
  height: 210px;
  object-fit: contain;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

div.gallery2 {
  width: 100%;
  height: 270px;
  object-fit: hidden;
  text-align: center;
}

div.gallery3 img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  text-align: center;
  margin: 15px 15px 15px 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.gallery4 img {
  width: 90%;
  height: 90%; 
  object-fit: contain;
  text-align: center;
  margin: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.gallery4 {
  width: 100%;
  height: 270px;
  object-fit: hidden;
  text-align: center;
}

.listImage, .roImage {
  object-fit: cover;
}


.listIgram {
  /* Strip the view profile from the top */
  position:absolute!important;
  top: -54px!important;
  height: 200%!important;
}

.roIgram {
  /* Make sure we get all of the post */
  position:absolute!important;
  height: 200%!important;
}

div.gallery p {
  cursor: pointer;
}

div.gallery2 p {
  cursor: pointer;
}

.msgHeader {
  background-color: #afafaf;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
}

.activeMsgList {
  border: 1px solid #777;
  border-style: solid none solid solid;
  border-width: 1px;
}

.inactiveMsgList {
  border: 1px solid #777;
  border-style: none solid none none;
  border-width: 1px;
}

.msgList {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.msgListRow {
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msgListRow:hover {
  cursor: zoom-in;
 text-decoration: none;
}

.msgListRow:active {
}

.msgListRow:visited {
}

.input-group-hl {
  /* Place holder for following hover behaviour */
}

.input-group-hl input:hover, 
.input-group-hl textarea:hover,
.input-group-hl select:hover {
  background: rgb(240,240,240)!important;
}

select:hover {
  border: 1px solid #777!important;
  background: rgb(240,240,240)!important;
}


.topImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 9;
  background: rgba(255,255,255,0);
}

.pasteHere {
  background-image:url('../../SiteImages/PasteCodeHere2.jpg');
  background-repeat: no-repeat;
  background-position: 50% 35%;
  background-size: 100%;
} 

.dropShadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img.clickable {
  cursor: pointer;
}

img.unclickable {
  cursor: default;
}

div.desc {
  padding: 15px;
  text-align: center;
}

.para {
  color: blue;
}

.maxSize {
  height: auto;
  width: 100%;
}

.maxHeight {
  height: 100%;
}

.maxWidth {
  width: 100%;
}

.height1 {
  height: 25px;
}

.height2 {
  height: 50px;
}

.height3 {
  height: 75px;
}

.height4 {
  height: 100px;
}

.hiddenElement, .hiddenTextInput {
  position: fixed; top: -200em; 
}

.infoButton {
  width: 25px;
  color: white;
  background-color: #5555ff;
  margin: 8px 1px 8px 1px;
  border: 2px;
  border: solid;
  border-width: 1px;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 5px 0px;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.infoButton:hover {
  background-color: #3333ff;
}

.thumbnail {
  width: 100px; height: 100px;
  object-fit: scale-down;
}

.textAlignment {
  text-align: left;
  vertical-align: top;
}

.linkAlignment {
}

.enabledLink {
  color: currentColor;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  vertical-align: top;
}

.disabledLink {
  color: currentColor;
  font-weight: normal;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

.enabledLink2 {
  color: black;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  display:flex;
  border-radius: 4px;
}

.disabledLink2 {
  color: grey;
  cursor: not-allowed;
  font-weight: normal;
  text-decoration: none;
  display:flex;
  border-radius: 4px;
}

.leftAlignedText {
  text-align: left;
  justify-content: left;
  -webkit-justify-content: left;  
  margin-left: 10px;
}

.leftAligned2 {
  text-align: left;
  justify-content: left;
  -webkit-justify-content: left;
}


.leftAlignedTableText {
  text-align: left;
  justify-content: left;
  -webkit-justify-content: left;
  padding: 5px 10px 5px 5px;
}

.rightAlignedText {
  text-align: right;
  justify-content: right;
  -webkit-justify-content: right;
  margin-right: 10px;
}

.rightAlignedTableText {
  text-align: right;
  justify-content: right;
  -webkit-justify-content: right;
  padding: 5px 10px 5px 5px;
}

.centeredText {
  text-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  margin-left: 10px;  
  margin-right: 10px;
}

.centeredTableText {
  text-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  padding: 5px 10px 5px 5px;
}

.ScrollingImageList {
  display: none;
  height: 400px;
  width: auto;
}

.LeftImageScrollButton {
  position: absolute;
  top: 45%;
  left: 0px;
/*  transform: translateX(100%); */
}

.RightImageScrollButton {
  position: absolute;
  top: 45%;
  right: 0px;
/*  transform: translateX(-100%); */
}

.masTooltip {
  position: relative;
  display: inline-block;
}

.masTooltip .masTooltiptext {
  visibility: hidden;
  width: auto;
  background-color: rgba(255,255,255,0.8);
  color: black;
  text-align: center;
  padding: 5px 0;
  margin: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -70px; 
}

.masTooltip .masTooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(255,255,255,0.8) transparent transparent transparent ; 
}

.masTooltip:hover .masTooltiptext {
  visibility: visible;
}

.fullscreenSection {
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  align-items: center;
  -webkit-align-items: center;
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: 3rem;
}

.fullscreenSection .transparentOverlay {
  min-height: 100vh;
}

.transparentOverlay {
  background-color: rgb(35, 35, 35);
  bottom: 0;
  left: 0;
  opacity: .8;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

.sectionWithBackground {
  padding-top: 100px;
  padding-bottom: 200px;
  background-image: url("../../SiteImages/Background.jpg");
  background-attachment: fixed;
}

.sectionWithBackground .centeredContent {
  margin: 0 auto;
  width: 100%;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.sectionWithBackground .centeredContent img {
  height: 100%;
  margin: 0 auto;
}

.whiteSection {
  padding-top: 100px;
  padding-bottom: 200px;
  color: black;
  background-color: white;
}

.center-content {
  -ms-flex-pack:center!important;
  justify-content:center!important
}

.centeredRow {
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  justify-content: center; 
  -webkit-justify-content: center;
}

.centeredVertically {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.page-title {
  font-style: normal;
  line-height: 1.2;
  text-align: center;
}

.text-normal {
  font-style: normal;
  line-height: 1.6;
}

.text-white {
  color: #ffffff;
}

.text-black {
  color: #000000;
}

.text-red {
  color: #ff0000;
}

.text-green {
  color: #00ff00;
}

.text-blue {
  color: #0000ff;
}

.text-bold {
  font-weight: 700;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-big {
  font-family: 'Aral', sans-serif;
  font-size: 1.5rem;
}

.bg-light { 
  background-color: LightGrey!important; 
} 

.bg-dark {
  background-color: #a9a9a9!important;
}

.bg-black {
  background-color: #000000!important;
}

.navbar li > a {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  color: black!important;
}

#activePage {
  background: #bfbfbf;
  border-radius: 10px;
}

.dropdown-menu > a {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.2rem;
  color: black;
}

.navbar a:hover {
  color: DarkBlue!important;
}

.paddingTop1 {
   padding-top:1rem!important;
}

.paddingTop2 {
   padding-top:2rem!important;
}

.paddingTop3 {
   padding-top:3rem!important;
}

.paddingBottom1 {
  padding-bottom:1rem!important;
}

.paddingBottom2 {
  padding-bottom:2rem!important;
}

.paddingBottom3 {
  padding-bottom:3rem!important;
}

.btnEnabled {
  cursor: pointer;
}

.btnDisabled {
  cursor: not-allowed!important;
}

.btnLeft {
  position: absolute;
  left: 0;
}

.btnRight {
  position: absolute;
  right: 0;
}


.blueButton,
.blueButton:active {
  background-color: #149dcc !important;
  border-color: #bfbfbf !important;
  color: #ffffff !important;
}

.blueButton:hover,
.blueButton:focus,
.blueButton.active {
  color: #ffffff !important;
  background-color: #0d6786 !important;
  border-color: #ffffff !important;
}

.blueButton.disabled,
.blueButton:disabled {
  color: #ffffff !important;
  background-color: #0d6786 !important;
  border-color: #0d6786 !important;
}

.redButton,
.redButton:active {
  background-color: #ff3f3f !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}
.redButton:hover,
.redButton:focus,
.redButton.focus,
.redButton.active {
  color: #ffffff !important;
  background-color: #e50039 !important;
  border-color: #ffffff !important;
}
.redButton.disabled,
.redButton:disabled {
  color: #ffffff !important;
  background-color: #e50039 !important;
  border-color: #e50039 !important;
}

.redButton:hover,
.blueButton:hover {
  cursor: pointer;
}

.greenButton,
.greenButton:active {
  background-color: #00AF00 !important;
  border-color: #bfbfbf !important;
  color: #ffffff !important;
}

.fitBtnText {
  width: auto!important;
  text-align: center;
  display: inline-block;
}

.smallButton {
  height: 40px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all .3s ease-in-out;
  border: solid;
  border-width: 1px;
  border-radius: 4px;
  padding: 8px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
}

.mediumButton {
  font-weight: 500;
  letter-spacing: 1px;
  margin: .4rem .8rem !important;
  transition: all .3s ease-in-out;
  border: solid;
  border-width: 1px;
  border-radius: 4px;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
}

.largeButton {
  font-weight: 500;
  letter-spacing: 1px;
  margin: .4rem .8rem !important;
  transition: all .3s ease-in-out;
  border: solid;
  border-width: 1px;
  border-radius: 4px;
  padding: 12px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}


.siteLogo {
  height:50px;
  position: absolute;
  top: 5px;
  left: 5px;
}

/* Font type and sizes */

.masFont, body, p, h1, h2, h6, th, td  {
  font-family: Georgia, "Times New Roman", Times, serif; 
}

.masFont1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 3rem;
  font-display: swap;
}

.masFont2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.5rem;
  font-display: swap;
}

.msgListFont {
  font-family: 'Arial', sans-serif;
  font-size: 1.0rem;
  font-display: swap;
}

.msgTextBox {
  text-align: left;
  justify-content: left;
  -webkit-justify-content: left;
  max-height: 100px;
  overflow: auto;
}

.mtba {
  border-radius: 10px;
  background-color: #D7D7FFAF;
  padding: 7px;
  margin: 0px;
}

.mtbb {
  border-radius: 10px;
  background-color: #FFD7D7AF;
  padding: 7px;
  margin: 0px;
}


.subMenuItem {
  font-weight: 500;
  line-height: 2;
  padding: 0.3846em 4.615em 0.3846em 1.5385em;
  position: relative;
  transition: color .2s ease-in-out, background-color .2s ease-in-out;
}

.subMenuItem::after {
  margin-top: -0.3077em;
  position: absolute;
  right: 1.1538em;
  top: 50%; 
}

.subMenuItem:focus, .subMenuItem:hover {
  background: none; 
}

/* ....................................................................... */
/* Bootstrap LG screen size (greater than 1200 pixels wide */

@media only screen and (min-width: 1200px) {
  .container{max-width:1140px;}

  .masFont1 {
    font-size: 3rem;
  }

  .masFont2 {
    font-size: 1.5rem;
  }

  .msgListFont {
    font-size: 0.9rem;
    line-height: 110%;
   }

  .navbar li > a {
    font-size: 1.4rem;
    letter-spacing: 0.5px;
  }

  .dropdown-menu > a {
    font-size: 1.2rem;
  }

  h6 {
    font-size: 1.4rem;
  }

  p, th, td {
    font-size: 1.0rem;
  }

  .siteLogo {
    height:50px;
  }

}

/* ....................................................................... */
/* Bootstrap MD screen size (992 to less than 1200 pixels wide */

@media only screen and (max-width: 1199px) and (min-width: 1100px) {
  .container{max-width:1040px;}

  .masFont1 {
    font-size: 2.75rem;
  }

  .masFont2 {
    font-size: 1.35rem;
  }

  .msgListFont {
    font-size: 0.85rem;
    line-height: 115%;
   }

  .navbar li > a {
    font-size: 1.3rem;
    letter-spacing: 0.4px;
  }

  .dropdown-menu > a {
    font-size: 1.15rem;
  }

  h6 {
    font-size: 1.3rem;
  }

  p, th, td {
    font-size: 0.95rem;
  }
}

/* ......................................................................... */
/* Custom screen size at which navbar collapses to avoid collision with logo */

@media only screen and (max-width: 1099px) and (min-width: 992px) {

  .container{max-width:932px;}

  .masFont1 {
    font-size: 2.7rem;
  }

  .masFont2 {
    font-size: 1.3rem;
  }

  .msgListFont {
    font-size: 0.80rem;
    line-height: 120%;
   }

  .navbar li > a {
    font-size: 1.2rem;
    letter-spacing: 0.4px;
  }

  .dropdown-menu > a {
    font-size: 1.10rem;
  }

  h6 {
    font-size: 1.25rem;
  }

  p, th, td {
    font-size: 0.90rem;
  }
}

@media only screen and (min-width: 992px) {

  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-custom .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-custom .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  .navbar-expand-custom .navbar-collapse {
    display: flex!important;
  }

  .navbar-expand-custom .navbar-toggler {
    display: none;
  }
}

/* ....................................................................... */
/* Bootstrap SM screen size (768 to 991 pixels wide */

@media only screen and (max-width: 991px) and (min-width: 768px) {
  .container{max-width:718px;}

  .masFont1 {
    font-size: 2.6rem;
  }

  .masFont2 {
    font-size: 1.25rem;
  }

  .msgListFont {
    font-size: 0.75rem;
    line-height: 125%;
   }

  .fitBtnText {
    font-size: 0.90rem;
  }

  .navbar li > a {
    font-size: 1.15rem;
    letter-spacing: 0.3px;
  }

  .dropdown-menu > a {
    font-size: 1.05rem;
  }

  h6 {
    font-size: 1.20rem;
  }

  p, th, td {
    font-size: 0.85rem;
  }

}

/* ....................................................................... */
/* Bootstrap XS screen size (less than 768 pixels wide */

@media only screen and (max-width: 767px) {
  .container{max-width:536px}

  .masFont1 {
    font-size: 2.5rem;
  }

  .masFont2 {
    font-size: 1.2rem;
  }

  .msgListFont {
    font-size: 0.70rem;
    line-height: 130%;
   }

  .navbar li > a {
    font-size: 0.9rem;
    letter-spacing: 0.2px;
  }

  .dropdown-menu > a {
    font-size: 0.9rem;
  }

  .activeMsgList {
    border-style: solid;
  }

  .inactiveMsgList {
    border-style: none;
  }

  .fitBtnText {
    font-size: 0.70rem;
  }

  h6 {
    font-size: 1.1rem;
  }

  p, th, td {
    font-size: 0.80rem;
  }

}

/* ....................................................................... */
/* Custom screen sizes */

@media only screen and (max-width: 450px) {

  .siteLogo {
    height:45px;
  }
}

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

  .siteLogo {
    height:40px;
  }
}

@media only screen and (max-width: 350px) {

  .siteLogo {
    height:30px;
  }
}

/* ....................................................................... */
/*
@media (max-width: 767px) {
  .masFont1 {
    font-size: 0.6rem;  
    font-size: calc( 1rem + (1 - 1) * ((100vw - 20rem) / (48 - 20)));  
    line-height: calc( 1.4 * (1rem + (1 - 1) * ((100vw - 20rem) / (48 - 20))));
  }

  .masFont2 {
    font-size: 1.2rem;
    font-size: calc( 1.175rem + (1.5 - 1.175) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.175rem + (1.5 - 1.175) * ((100vw - 20rem) / (48 - 20))));
  }
}
*/
/* ....................................................................... */
/*
@media (max-width: 576px) {
  .masFont2 {
    font-size: 0.4rem;
    font-size: calc( 1rem + (1 - 1) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1rem + (1 - 1) * ((100vw - 20rem) / (48 - 20))));
  }
}
*/
/* ....................................................................... */

.row {
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-right:-15px;
  margin-left:-15px
}