html,
body {
   height: 100vh;
   overflow: hidden;
   padding: 0;
   margin: 0;
   /* font-family: 'Exo 2', sans-serif; */
   font-family: Noto Sans, Trebuchet MS, Helvetica Neue, Arial, sans-serif;
   line-height: 1.3;
   font-size: 1rem;
   color: #666666;
   text-align: justify;
}

/* ul {
   margin: 0;
   padding: 0;
   list-style: none;
} */

.page-wrapper {
   max-width: 1024px;
   display: flex;
   flex-direction: column;
   /* border: solid 1px #222; */
   margin: 0 auto;
   height: 100%;
}

.page-header {
   background: url(./img/headerBG.jpg) center / cover no-repeat;
   /* background-position: center; */
   height: 200px;
   flex-shrink: 0;
   line-height: 30px;
   padding: 0 8px
}

.page-footer {
   /* height: 30px; */
   flex-shrink: 0;
   /* line-height: 30px; */
   padding: 0 8px
}

.page-content {
   border-top: solid 1px #222;
   border-bottom: solid 1px #222;
   flex-grow: 1;
   display: flex;
}

.right-column {
   width: 70%;
   flex-grow: 1;
   /* border-left: solid 1px #222; */
   padding: 8px 16px;
   /* background: pink; */
   overflow-y: auto;
   max-height: calc(100vh - 310px);
}

.right-column-content {
   /* overflow-y: auto;
   max-height: calc(100vh - 100px); */
   padding: 0 1.5rem;
   column-count: 2;
   column-gap: 2.5rem;
   margin-top: 1rem;
}

.right-column-content p {
   margin-inline-start: 0px;
   margin-block-start: 0px;
   font-size: 0.9rem;
}
.left-column {
   width: 30%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-color: rgb(241, 241, 241);
}

.left-column a {color: rgb(0, 127, 253);}

.left-column img {
   max-width: 250px;
   width: 100%;
}

address {
   text-align: center;
   margin: 1rem 0.4rem;
}


.page-title {
   /* height: 40px; */
   flex-shrink: 0;
   align-items: center;
   border-bottom: solid 1px #222;
   display: flex;
   flex-grow: 1;
}

h1 > span{
   text-transform: uppercase;
   font-weight: 900;
   color: rgb(255, 197, 39);
   /* display: inline; */
	padding: 0 .6em;
    background: linear-gradient(to right, rgb(17, 34, 51) 0% 25%, #556 0% 50%, rgb(129, 137, 145) 0% 75%, rgb(164, 168, 172) 0% 100%);
    box-decoration-break: clone;
    line-height: 1.5;
}



footer {
   display: flex;
   align-items: center;
   justify-content: center;
}

nav > ul li       ul { display: none; }
nav > ul li:hover ul { display: block;}

#dropmenu {
   display: table;
   width: 100%;
}

#dropmenu > ul {
   margin: 0;
   padding: 0;
   display: table-row;
   /* background-color: rgb(0, 50, 85); */
   color: #fff;
    background: radial-gradient(rgb(0, 50, 85), rgb(0, 50, 85)) padding-box,
      linear-gradient(45deg, #51ff00 0%, #ffffff 49%, #fe0000 100%) border-box;
      border: 1.5px solid transparent;
}

#dropmenu > ul > li:hover {
   /* background-color: rgb(0, 74, 148); */
    background: radial-gradient(rgb(0, 74, 148), rgb(0, 50, 85)) padding-box,
      linear-gradient(45deg, #51ff00 0%, #ffffff 49%, #fe0000 100%) border-box;
      border: 0.5px solid transparent;
}

#dropmenu > ul > li {
   display: table-cell;
   width: 20%;
  text-align: center;
   position: relative;
   border: 1px solid rgb(0, 74, 148);
}
#dropmenu a {
   text-decoration: none;
   color: white;
    padding: 10px;
    display: block;
}

#dropmenu > ul > li > ul {
   display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 0;
    margin: 0;
    background-color: #036;
}
#dropmenu > ul > li.open > ul {
   display: block;
} 

#dropmenu > ul > li > ul > li {
   border-top: 1px solid white;
   padding: 3px 20px;
cursor: pointer;
  text-align: left;  
  }
  #dropmenu > ul > li > ul > li:hover {
background-color: rgb(0, 74, 148);
background: radial-gradient(rgb(0, 74, 148), rgb(0, 50, 85)) padding-box,
linear-gradient(45deg, #51ff00 0%, #ffffff 49%, #fe0000 100%) border-box;
border: 0.5px solid transparent;
}

.column-gallery > img {
   width: 50%;
}

@media (max-width: 650px) { 
   body {
      font-size: 0.8rem
   }
   .column-gallery > img {
      width: 100%;
   }
}

@media (max-width: 800px) { 
   .right-column-content {
      column-count: 1;
      padding: 0;
   }
}

#map {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
}

.column-gallery {
   display: flex;
   flex-wrap: wrap;
}