/* --------------------------- Collapse Button --------------------------- */

.collapsible {
  background-color: #72BAA9;
  color: #000;
  cursor: pointer;
  padding: 15px;
  margin: 0 0 15px 0;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-family: system-ui, tahoma, sans-serif;
}

.collapsible:after {
  content: '\1406'; 
  font-size: 13px;
  color: #000;
  float: left;
  margin: 0 5px 0 0;
}

.active {
  background-color: #AE2448;
  color: #FFF;
  margin: 0;
}

.collapsible:hover:after {
  background-color: #AE2448;
  color: #FFF;
}

.collapsible:hover {
  background-color: #AE2448;
  color: #FFF;
}

.active:after {
  content: "\140D"; 
  color: #FFF;
}

.content {
  padding: 10px 10px;
  margin: 0;
  display: none;
  overflow: hidden;
  background-color: none;
}



/* --------------------------- Gallery Image Effects --------------------- */

* {box-sizing: border-box;}

.boxmain {
  position: relative;
  width: 50%;
  max-width: 100px;
  float: left;
  margin: 0 15px 15px 0;
}

.thumby {
  display: block;
  width: 100%;
  height: auto;
  border-style: dotted;
}

div.boxmain a {
  color: #AE2448;
}

div.boxmain a:hover {
  color: #996666;
}

.thumby:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

.thumb-over {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity: 0;
  font-size: 10px;
  padding: 5px;
  text-align: center;
}

.boxmain:hover .thumb-over {
  opacity: 1;
}