#wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
	}

h1 {font-size: 22px; padding-bottom: 15px;}

hovered {color: #000!important; background-color: #ccc!important;}

* {box-sizing: border-box;}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 100%; 
}
.left {/*width: 20%; text-align: center; padding-top: 47px;*/ 
	width: 220px;
	display: flex; 
	/*justify-content: center;*/ 
	align-items: center;
}

div.w3-accordion > a.w3-light-gray::after {content: " △";}
div.w3-accordion > a::after {content: " ▽"; float: right; font-size: 8px!important; margin-top: 10px; margin-right: 5px; font-weight: bold;}
div.w3-accordion-content {padding-left: 22px; border: solid 1px #eee;}
nav .w3-large { font-size: 17px!important;}
#smallnav {width: 50px; padding-top: 20px;}
#mainnav {width: 240px;}
.right {/*width: 80%;*/
	flex-grow: 1;
}
nav a:focus {
  outline: none;
}
.buttons {    /*font-weight: bold;*/}
.buttons a {padding: 3px 16px !important;}

/* Clear floats after the columns */
/*.wrap:after {
  content: "";
  display: table;
  clear: both;
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  /*.column {width: 100%;}*/
}

#lightgallery {position: relative;}
.lg-backdrop {position: absolute; left: 20%;}
.lg-outer {
 /* position: absolute;  temporary to avoid scrollbar while I fix lightgallery in div issue */
}
.lg-outer .lg-item, .lg-outer .lg-img-wrap, .lg-outer .lg-video-cont {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.lg-sub-html {position: absolute;}
.lg-outer {left: 20%; width: 80%} /*temporary to avoid gallery covering links */
.left a {width:100%;}

/* disable close -> home conversion */
/*.lg-close {display: none;} */

#light {border: none; height: 100%; width: 100%;}