@import url('https://fonts.googleapis.com/css?family=Muli:400,800&display=swap');

body{
  margin: 0px;
  background: black;
}
/*
nav {
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 200px;
  background: grey;
}
*/
main{
  position: absolute;
 /* left: 200px;*/
}

a.imgbox{
  text-decoration: none;
}

#photogrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 10px;
}

.imgbox {
  display: flex;
  width: 250px;
  height: 250px;
  flex-grow: 1;
  border: 0px;
  margin: 10px;
  box-shadow: 0px 0px 0px 5000px rgba(0,0,0,.5) inset;
  transition: transform 200ms;
  -moz-transition: -moz-transform 200ms; 
  -webkit-transition: -webkit-transform 200ms; 
  -o-transition: -o-transform 200ms;
  justify-content: center;
  align-items: flex-end;
}

.boxtitle {
  position: relative;
  display: flex;
  font-family: 'Muli', sans-serif;
  font-size: 800;
  width: 92%;
  background: rgba(0,0,0,.7);
  justify-content: center;
  text-align: center;
  font-size: 20px;
  margin: 0px;
  color: white;
  visibility: hidden;
  margin-bottom: 10px;
}

.boxtitle p {
  margin: 10px;
}


.box1 {
  background: url("../../img/gallery/gal1.jpg");
  background-position: center center;
  background-size: cover;  
}

.box2 {
  background: url("../../img/gallery/gal2.jpg");
  background-position: center center;
  background-size: cover;  
}

.box3 {
  background: url("../../img/gallery/gal3.jpg");
  background-position: center center;
  background-size: cover;  
}

.box4 {
  background: url("../../img/gallery/gal4.jpg");
  background-position: center center;
  background-size: cover;  
}

.box5 {
  background: url("../../img/gallery/gal5.jpg");
  background-position: center center;
  background-size: cover;  
}

.box6 {
  background: url("../../img/gallery/gal6.jpg");
  background-position: center center;
  background-size: cover;  
}

.box7 {
  background: url("../../img/gallery/gal7.jpg");
  background-position: center center;
  background-size: cover;  
}

.box8 {
  background: url("../../img/gallery/gal8.jpg");
  background-position: center center;
  background-size: cover;  
}

.box9 {
  background: url("../../img/gallery/gal9.jpg");
  background-position: center center;
  background-size: cover;  
}

.box10 {
  background: url("../../img/gallery/gal10.jpg");
  background-position: center center;
  background-size: cover;  
}

.box11 {
  background: url("../../img/gallery/gal11.jpg");
  background-position: center center;
  background-size: cover;  
}

.box12 {
  background: url("../../img/gallery/gal12.jpg");
  background-position: center center;
  background-size: cover;  
}

.box13 {
  background: url("../../img/gallery/gal13.jpg");
  background-position: center center;
  background-size: cover;  
}

.box14 {
  background: url("../../img/gallery/gal14.jpg");
  background-position: center center;
  background-size: cover;  
}

.box15 {
  background: url("../../img/gallery/gal15.jpg");
  background-position: center center;
  background-size: cover;  
}

.box16 {
  background: url("../../img/gallery/gal16.jpg");
  background-position: center center;
  background-size: cover;  
}

.box17 {
  background: url("../../img/gallery/gal17.jpg");
  background-position: center center;
  background-size: cover;  
}

.box18 {
  background: url("../../img/gallery/gal18.jpg");
  background-position: center center;
  background-size: cover;  
}

.box19 {
  background: url("../../img/gallery/gal19.jpg");
  background-position: center center;
  background-size: cover;  
}

.box20 {
  background: url("../../img/gallery/gal20.jpg");
  background-position: center center;
  background-size: cover;  
}

.box21 {
  background: url("../../img/gallery/gal21.jpg");
  background-position: center center;
  background-size: cover;  
}

.box22 {
  background: url("../../img/gallery/gal22.jpg");
  background-position: center center;
  background-size: cover;  
}

.box23 {
  background: url("../../img/gallery/gal23.jpg");
  background-position: center center;
  background-size: cover;  
}

.box24 {
  background: url("../../img/gallery/gal24.jpg");
  background-position: center center;
  background-size: cover;  
}

.box25 {
  background: url("../../img/gallery/gal25.jpg");
  background-position: center center;
  background-size: cover;  
}

.box26 {
  background: url("../../img/gallery/gal26.jpg");
  background-position: center center;
  background-size: cover;  
}

.box27 {
  background: url("../../img/gallery/gal27.jpg");
  background-position: center center;
  background-size: cover;  
}

.box28 {
  background: url("../../img/gallery/gal28.jpg");
  background-position: center center;
  background-size: cover;  
}

.box29 {
  background: url("../../img/gallery/gal29.jpg");
  background-position: center center;
  background-size: cover;  
}

.box30 {
  background: url("../../img/gallery/gal30.jpg");
  background-position: center center;
  background-size: cover;  
}

.box31 {
  background: url("../../img/gallery/gal31.jpg");
  background-position: center center;
  background-size: cover;  
}

.box32 {
  background: url("../../img/gallery/gal32.jpg");
  background-position: center center;
  background-size: cover;  
}

.box33 {
  background: url("../../img/gallery/gal33.jpg");
  background-position: center center;
  background-size: cover;  
}

.box34 {
  background: url("../../img/gallery/gal34.jpg");
  background-position: center center;
  background-size: cover;  
}

.box35 {
  background: url("../../img/gallery/gal35.jpg");
  background-position: center center;
  background-size: cover;  
}

.box36 {
  background: url("../../img/gallery/gal36.jpg");
  background-position: center center;
  background-size: cover;  
}

.box37 {
  background: url("../../img/gallery/gal37.jpg");
  background-position: center center;
  background-size: cover;  
}

.box38 {
  background: url("../../img/gallery/gal38.jpg");
  background-position: center center;
  background-size: cover;  
}

.box39 {
  background: url("../../img/gallery/gal39.jpg");
  background-position: center center;
  background-size: cover;  
}

.box40 {
  background: url("../../img/gallery/gal40.jpg");
  background-position: center center;
  background-size: cover;  
}

.box41 {
  background: url("../../img/gallery/gal41.jpg");
  background-position: center center;
  background-size: cover;  
}

.box42 {
  background: url("../../img/gallery/gal42.jpg");
  background-position: center center;
  background-size: cover;  
}

.box43 {
  background: url("../../img/gallery/gal43.jpg");
  background-position: center center;
  background-size: cover;  
}

.box44 {
  background: url("../../img/gallery/gal44.jpg");
  background-position: center center;
  background-size: cover;  
}

.box45 {
  background: url("../../img/gallery/gal45.jpg");
  background-position: center center;
  background-size: cover;  
}

.box46 {
  background: url("../../img/gallery/gal46.jpg");
  background-position: center center;
  background-size: cover;  
}

.box47 {
  background: url("../../img/gallery/gal47.jpg");
  background-position: center center;
  background-size: cover;  
}

.box48 {
  background: url("../../img/gallery/gal48.jpg");
  background-position: center center;
  background-size: cover;  
}

.box49 {
  background: url("../../img/gallery/gal49.jpg");
  background-position: center center;
  background-size: cover;  
}

.box50 {
  background: url("../../img/gallery/gal50.jpg");
  background-position: center center;
  background-size: cover;  
}

.box51 {
  background: url("../../img/gallery/gal51.jpg");
  background-position: center center;
  background-size: cover;  
}

.box52 {
  background: url("../../img/gallery/gal52.jpg");
  background-position: center center;
  background-size: cover;  
}

.box53 {
  background: url("../../img/gallery/gal53.jpg");
  background-position: center center;
  background-size: cover;  
}

.box54 {
  background: url("../../img/gallery/gal54.jpg");
  background-position: center center;
  background-size: cover;  
}



.imgbox:hover {  
  transform: scale(1.03);
  -moz-transform: scale(1.03);
  -webkit-transform:  scale(1.03);
  -o-transform: scale(1.03);
  box-shadow: 0px 0px 0px 9000px rgba(0,0,0,0) inset;
  box-shadow: 0px 0px 0px 1px grey inset;
}

.imgbox:hover .boxtitle {
  visibility: visible;
}


.lightbox {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.5);
}

.lightbox:target {
	outline: none;
	display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox img {
  max-width: 80%;
  max-height: 80%;
  border: solid 2px grey;
}