:root {
   --rgap: 20px;
   --cgap:  30px;
   --backcolor:  #eee;
   --square:  100px;
   --columns: 4;
}

.summaryContainer {
   display: inline-flex;
   flex-flow: row wrap;
   justify-content: center;
   row-gap:  var(--rgap,20px);
   column-gap:  var(--cgap,20px);;
   width:  100%;
   margin:  20px auto;
}

.summaryContainer .item {
   box-sizing: border-box;
   width:  calc(( 100% / var(--columns,4) ) - (2 * var(--gap,12px)));
   margin:  0;
   min-width:  200px;
   position:  relative;
}
.summaryContainer .item * {
   box-sizing: inherit;
}
.summaryContainer .itemImage {
   display:  block;
}

.summaryContainer .itemContent {
   display:  block;
}

.summaryContainer div.fullDescr {
   display:  none;
}
.summaryContainer .item img {
   width: 100%;
   margin:  0;
   object-fit: cover;
}
.summaryContainer .item figitem {
   flex: 1 1 50%;
}

.summaryContainer .item .title {
   font-size: 20px;
   font-weight: normal;
   text-align: left;
   font-style: normal;
   opacity: .9;
   margin-top: 0;
}
.summaryContainer .item p {
   font-size: 16px;
   font-weight:  300;
   opacity:  1;
}

.summaryContainer .item a, .item a:hover, 
.summaryContainer .item a:visited {
    text-decoration: none;
    color: black;
}

.summaryContainer .item .summary-read-more-link {
   margin: 0 0 10px 0;
   font-size: 14px;
   line-height: 20px;
   text-align: left;
}

.summaryContainer .info {
   display:  none;
}

.summaryContainer .theCat,
.summaryContainer .theLoc {
   display:  inline-block;
   font-size:  .8rem;
   font-style:  italic;
}

.summaryContainer .theCategories {
   display:  block;
   font-size:  .8rem;
   font-style:  italic;
}

.summaryContainer .postedBy {
   display:  block;
   font-size:  .8rem;
   font-style:  italic;
}

.summaryContainer div.item {
   display:  none;
}

.summaryContainer div.item.showme {
   display:  block; 
}


@media all and (max-width: 600px) {
   .summaryContainer .item {
      min-width:  auto;
      width:  100%;
   }
   .summaryContainer .item img {
      max-width:  unset;
   }
}

/* ------------------------------------------------------------------- */
/* Filter checkboxes for programs, events                              */
/* ------------------------------------------------------------------- */

// Filter flexbox

#filterContainer .flexBox .filterGroup > span {
    background: rgb(131, 124,124);
    color: white;
}

#filterContainer {
    display: flex; 
}

#filterContainer .flexBox {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    flex-basis: auto;
    flex-grow: 1;
    margin-left:  -10px;
}

#filterContainer .flexBox .filterGroup {
    margin: 0 10px;
    flex-basis: auto;
    font-size:  1rem;
}
#filterContainer .flexBox .filterGroup > span {
    /*background: #EC2625;
    color: white;
    font-weight: bold;*/
    background: rgb(131, 124,124);
    width: 100%;
    display: block;
    padding: 5px;
    margin-bottom: 5px;
    color:  white;
}

#filterContainer .flexBox .filterGroup div.outer {
   /* list-style-type: none; /* Remove bullets */
    padding: 0; 
    margin: 0; 
    margin-bottom: 20px;
    list-style: none;
    margin-left: 0; 
}

#filterContainer .flexBox .filterGroup select {
   height:  25px;
}

#filterContainer {
    /*margin: 0 auto;*/
    max-width: 900px;
}

#filterContainer .flexBox .filterGroup div.outer div span {
    margin-left: 10px;
}

#filterContainer .flexBox .filterGroup table tr td span {
    margin-left: 10px;
}

#filterContainer table tr {
   background-color:  unset;
}

#filterContainer table tr td {
   padding: 0px;
   text-align: left;
}

#filterContainer table tr td:not(:first-child) {
  padding-left: 10px;
}

div.summary-metadata .filterCat {
    pointer-events: none;
}

div.summary-metadata .active.filterCat {
    color: red;
}

#resetValues { 
  display: none;
  margin-left:  10px;
}
#resetValues.show {
  display:  inline-block;
}

/* wrap blog entry boxes with flexbox */

body.flex-gap 
  .filterValuesSection 
  .sqs-block-summary-v2 
  .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
}
body.flex-gap 
  .filterValuesSection 
  .sqs-gallery-design-autogrid-slide {
    margin: 0 !important;
}  

#target table tr td,
#target table tr th {
   padding: 0px 10px;
   text-align: left;
   font-size:  21px;
}

#target table th, #target table td, #target table td select {
    border: none;
}

#itemDetail {
    position: relative;
    border: 1px solid black;
    z-index: 999;
    background: #eee;
    padding:  10px;
    display:  none;
    z-index:  1;
    border-radius:  10px;
    width:  70%;
    margin: 0 auto;
}

#itemDetail div.itemImage img {
   width:  100%;
   object-fit:  cover;
   height: calc(70vw / 2 - 8px);
}

#itemDetail div.itemImage {
   width: 60%;
   margin-left: auto;
   margin-right: auto;
   display: block;
   overflow: hidden;
}

#itemDetail div.imageThumbs {
   display: flex;
   flex-wrap: wrap;
   padding: 0;
   width: 90%;
   margin: 0 auto;
   margin-left: auto;
   margin-right: auto;
   justify-content:  center;
}

#itemDetail .itemContact {
   margin-top:  10px;
}

#itemDetail .itemContact span {
   font-weight:  bold;
}

#itemDetail .itemCat {
   font-style:  italic;
}

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

   #itemDetail {
      width:  100%;
   }

   #itemDetail div.itemImage img {
      height: calc(100vw / 2 - 8px);
   }

   #itemDetail div.itemImage {
      width: 100%;
   }

   #itemDetail div.imageThumbs {
      width: 100%;
   }

}

#itemDetail div.imageThumbBox {
   width:  80%;
   margin:  0 auto;
}

#itemDetail div.imageThumbs img {
   margin:  5px;
   width:  100px;
   height:  100px; 
   background:  white;
   object-fit:  cover;
}
#itemDetail div.imageThumbs img.active {
   border: 3px solid red;
}

#itemDetail div.itemTitle {
   text-align:  left;
   font-weight:  bold;
   font-size:  1.2rem;
   margin-top:  10px;
}


#itemDetail .itemDetailClose.topClose {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 1.5em;
 
}
#itemDetail .itemDetailClose.bottomClose {
    position: relative;
    text-align: center;
    font-size: 1.5em;
    clear: both;

}

#itemDetail .itemDetailClose a:visited,
#itemDetail .itemDetailClose a {
   color:  black;
}