/* Custom styles - matching original myStyle.css */
html {
  scroll-behavior: smooth;
}

/* Home CTA buttons */
.btn-home {
  background-color: #729ddc;
  border-color: #5a87cc;
  color: #fff;
  font-family: Georgia, serif;
}

.btn-home:hover,
.btn-home:focus {
  background-color: #5a87cc;
  border-color: #4470b8;
  color: #fff;
}

.myFont {
  font-family: Georgia, serif;
}

.myButton {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition-duration: 0.4s;
}

.myButton:hover {
  color: black;
}

.myCustomPopover {
  margin: 0 auto;
  list-style-type: none;
  width: 300px;
  padding: 0;
}

.myCustomPopoverItem {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  text-align: left;
  font-family: Georgia, serif;
  max-width: 200px;
}

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

.textTitle {
  color: #666;
  text-align: center;
  font-family: Georgia, serif;
}

.textBlob {
  text-align: justify;
  font-family: Georgia, serif;
}

.textBlob p {
  margin-left: 5px;
  padding-left: 5px;
}

.textElement {
  color: #666;
  text-align: justify;
  font-family: Georgia, serif;
  font-size: 17px;
  padding-top: 40px;
}

.gap-right {
  margin-right: 10px;
}

#map {
  display: block;
  width: 100%;
  height: 400px;
}

.verticalScroll {
  max-height: 500px;
  overflow-y: auto;
}

/* Parallax background images */
.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4,
.bgimg-5,
.bgimg-6,
.bgimg-7,
.bgimg-8,
.bgimg-9,
.bgimg-10 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  background-image: url(../img/01_p.jpg);
  min-height: 400px;
}

.bgimg-2 {
  background-image: url(../img/DSC_1490.JPG);
  min-height: 400px;
}

.bgimg-3 {
  background-image: url(../img/DSC_1507.JPG);
  min-height: 400px;
}

.bgimg-4 {
  background-image: url(../img/DSC_1486.JPG);
  min-height: 200px;
}

.bgimg-5 {
  background-image: url(../img/DSC_1488.JPG);
  min-height: 500px;
}

.bgimg-6 {
  background-image: url(../img/DSC_1500.JPG);
  min-height: 400px;
}

.bgimg-7 {
  background-image: url(../img/DSC_1500.JPG);
  min-height: 300px;
}

.bgimg-8 {
  background-image: url(../img/08_p.jpg);
  min-height: 400px;
}

.bgimg-9 {
  background-image: url(../img/02_p2.jpg);
  min-height: 400px;
}

.bgimg-10 {
  background-image: url(../img/10_p.jpg);
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 20%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption div.border {
  background-color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
  margin-right: 30px;
  margin-left: 30px;
  color: #000;
  padding: 18px;
  font-size: 20px;
  letter-spacing: 10px;
  border: 2px #000 solid;
}

@media only screen and (max-device-width: 1024px) {
  .bgimg-1,
  .bgimg-2,
  .bgimg-3,
  .bgimg-4,
  .bgimg-5,
  .bgimg-6,
  .bgimg-7,
  .bgimg-8,
  .bgimg-9,
  .bgimg-10 {
    background-attachment: scroll;
  }
}

.grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 16px;
  text-align: center;
}