/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none;
  transition:2.5s;
  z-index: 2;
}

/* Expanding image text */
#imgtext {
  position: fixed;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
  z-index:15;
  width: 15%;

  background: #22272d99;
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0px 0 5px 2px #22272d;
}

#imgtext:hover {
  background: #22272d;
}

#imgtext:empty {
  display: none;
}

#expandedImg{
  position:fixed;
  left:10%;
  top:0%;
  height:98%;
  overflow:scroll;
  right:0;left:0;
  margin:auto;
  opacity:inherit;
  transition:2.5s;
  z-index: 6;
}

span.closebtn{
  right: 15px;
  font-size: 35px;
	position:fixed;
	left:50%;
	top:5%;
	color:black;
	z-index:10;
	cursor: pointer;
	text-shadow: 0 0 10px white;
}

div.darkbg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #2c212199;
    z-index: 5;
    display: block;
}