body{
	width:90%;
	margin-left: auto;
            margin-right: auto;
}

#lumenbox-overlay{
	display:none;
	opacity:0;
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:fixed;
	z-index:9999;
background-color:rgba(0,0,0,.75)}
/*#lumenbox{
	position:absolute;
	z-index:10000;
	left:50%;
	top:90%;
	transform:translateX(-50%) translateY(-30%);
	opacity:0;
	display:flex;
	font-family:Arial,sans-serif}
	*/
#lumenbox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  opacity: 0;
  display: flex;
  font-family: Arial, sans-serif;
  align-items: center;
  justify-content: center;
  background: none; /* optionally transparent */
}
#lumenbox-close{
	color:#fff;
	font-size:48px;
	cursor:pointer;
	position:absolute;
	top:-55px;
right:0}
#lumenbox-close:hover{
color:#ddd}
.lumenbox-container
{
position:relative
 display: flex;
  flex-direction: column;
  align-items: center;
  }
#lumenbox-navigation{
height:100%}
#lumenbox-navigation .lumenbox-control{
	cursor:pointer;
	position:absolute;
	top:50%;
	border:solid #fff;
	border-width:0 3px 3px 0;
	width:25px;
	height:25px;
display:none}
#lumenbox-navigation .lumenbox-control:hover{
border-color:#ddd}
.lumenbox-control.lumenbox-prev{
	left:-65px;
transform:rotate(135deg) translateY(-50%)}
.lumenbox-control.lumenbox-next{
	right:-65px;
transform:rotate(-45deg) translateY(-50%)}
.lumenbox-info{
	padding:10px 0;
	position:absolute;
	transform:translateY(100%);
bottom:0}
#lumenbox-caption{
	max-width:100%;
color:#eee}
#lumenbox-counter{
	color:#fff;
	font-weight:700;
	display:block;
	text-align:left;
margin-top:5px}

.column {
  float: left;
  width: 23%;
  padding: 5px;
}


.collapsible {
  background-color: teal;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  color:black;
  font-size:10px;
}

.footer {
   position: sticky;
   margin:auto;
   left: 0;
   bottom: 0;
   width: 70%;
   background-color: teal;
   color: white;
   opacity:.5;
   text-align: center;
   height=50px;
}

/* side by side divs */
.mainbox {
    width: 100%; 
    border-radius: 5px;
    display :inline-block;
    background-color:#33cc99;
    padding:2px;
}
.childdiv{
	margin:1px;
  display: inline-block;
  float: center;
   width: 24%;
}