div.gallery
{
padding-top: 20px;
padding-left:10%;
width:80%;
position: center;

}



#close
{position: absolute;
right:0px; 
top: 0px;
}
#extend
{position: absolute;
right:0px; 
bottom: 0px;
}
#exit
{position: absolute;
right:0px; 
bottom: 0px;
display:none;	
}
div.mainImage
{
position: sticky;
padding-top:0px;
top: 80px;
height:40vh;
background: black;
z-index:99998;
float: bottom;
overflow:hidden;

    display: none;
    align-items: center;
    justify-content: center
}
#top{
	  max-height: 40vh;
	width:auto;
	
}

#mainImage:-webkit-full-screen #top{
	max-height: 100vh;
	}

#mainImage:-moz-full-screen #top{
	max-height: 100vh;
	}

#mainImage:-ms-fullscreen #top{
	max-height: 100vh;
	}

#mainImage:fullscreen #top{
	max-height: 100vh;
	}
	--
#mainImage:-webkit-full-screen #exit{
	display:inline-block;
	}

#mainImage:-moz-full-screen #exit{
	display:inline-block;
	}

#mainImage:-ms-fullscreen #exit{
	display:inline-block;
	}

#mainImage:fullscreen #exit{
	display:inline-block;
	}
#mainImage:-webkit-full-screen #extend{
	display:none;
	}

#mainImage:-moz-full-screen #extend{
	display:none;
	}

#mainImage:-ms-fullscreen #extend{
	display:none;
	}

#mainImage:fullscreen #extend{
	display:none;
	}



.np{
	max-height: 30vh;
	width:auto;
	
	opacity:50%;
	scale: 0.5;
	
	
}
.np:hover
{opacity:100%;
}



div.gallery img{
	
  position: left;
  height:30vh;
  width: auto;  
  object-fit: cover;
  padding-left: 10px;

  
  
}
.flikr
{margin-top:30px;
display:flex; 
justify-content:center; 
flex-wrap: wrap;
max-width:100%:
}
.flikr img  
{
height: 30px;
vertical-align:bottom;
padding:0;
padding-bottom: 3px;

}
.flikr a  
{padding:5px;
margin:5px;
font-size: 30px;
text-decoration:none;
color: white;
background-color: #74B958;
display:inline-block;


}
.flikr a:hover
{text-decoration: underline;
}
@media screen and (min-width: 801px) {
div.gallery img:hover{
  scale: 1.05;
  
}
}


@media screen and (max-width: 800px) {
	div.gallery img{
	width:99%;
	height: auto;
	padding-left:0;
	
	}
	div.gallery
	{width:100%;
	padding-left:0;
	margin:0;
	}
	
	div.mainImage
{display: none;
}

}
@media screen and (max-width: 500px) {
	.hide{
		display:none;
	}
}