/*  
					*{margin: 0; padding: 0;}
					body{background-color: black;}
				*/

.container
{
  width: 100%;
  height: 100%;
}
.trans
{
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
}
.top
{
  display: flex;
  width: 80vw;
  height: 80vh;
  margin-top: 10vh;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10vh;
}

				/*  
					.top ul
					{
					  list-style: none;
					  width: 100%;
					  height: 100%;
					  z-index: 1;
					  box-sizing: border-box;
					}
					.top ul li
					{
					  position: relative;
					  float: left;
					  width: 25%;
					  height: 25%;
					  overflow: hidden;
					}

					.top ul li::before
					{
					  position: absolute;
					  top: 0;
					  left: 0;
					  width: 100%;
					  height: 100%;
					  background-color: #000;
					  content: '';
					  color: white;
					  opacity: 0.4;
					  text-align: center;
					  box-sizing: border-box;
					  pointer-events: none;
					  transition: all 0.5s ease;
					  -moz-transition: all 0.5s ease;
					  -ms-transition: all 0.5s ease;
					  -o-transition: all 0.5s ease;
					  -webkit-transition: all 0.5s ease;
					}
					.top ul li:hover::before
					{
					  opacity: 0;
					  background-color: rgba(0,0,0,0.90);
					}
					.top ul li img
					{
					  width: 100%;
					  height: auto;
					  overflow: hidden;
					}
				*/

.lightbox
{
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.75);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}
.lightbox img
{
  max-width:  100vw;
  max-height: 100vh;

  /*
  max-width: 90%;
  max-height: 80%;
  width: 45vw;
  height: 75vh; 
  */
  position: relative;
  top: -100%;
  /* Transition */
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
}
.lightbox:target
{
  outline: none;
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 1.2s ease;
  -moz-transition: all 1.2s ease;
  -ms-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  -webkit-transition: all 1.2s ease;
}
.lightbox:target img
{
  top: 0;
  top: 50%;
  filter: grayscale(0);
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

@media only screen and ((min-width:20em) or (min-width:20em) or (min-width:30em) or (min-width:38em) or (min-width:50em)) { /* smartphones, Android phones, landscape iPhone */ 
	.gallery img {
	.lightbox:target
	{
	  top: -2.5em;
	}
	.lightbox
	{
	  height: 121%;
	}
}