.blogallery {
  font-size:0px;
  border:1px dashed #999;
  cursor:pointer;
  padding:8px;
  text-align:center;
}

.blogallery * {
  display:none;
}

.blogallery a   {
  display:inline;
}
.blogallery figure  {
  display:inline;
}

.blogallery img {
    display: inline-block;
    width:auto;
    height:100px;
    margin:4px;
    max-width:300px;
}

.blogallery .blogallery-caption {
    display: block;
    font-size:20px;
    width: 240px;
    background-color:#ddd;
    border-radius:8px;
    margin:auto;
    
}

.blogallery-caption {
    display: none;   
}

#mini-gallery-image-wrap .caption {
    font-size:24px;
    position: absolute;
    background-color:#ccc;
    background-color:rgb(0,0,0,.1);
    color: white;
}

.blogallery-viewer {
    height: 100%;
    width:100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.8);
    overflow-x: hidden;
    color:#ccc;
    
    display: flex;
    justify-content: space-between;
    font-size:60px;
    font-weight: bold;
}

.blogallery-viewer .img {
    width:100%;
    height:100%;    
}

.blogallery-viewer img {
    width:100%;
    height:100%;
    object-fit: contain;
    background-position: center; 
    background-size: contain;
    background-repeat:no-repeat; 
}

.blogallery-sidebutton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.blogallery-sidebutton .topper {
  height:60px;
  padding:4px;
}

.blogallery-sidebutton .action {
    flex-grow:20;
    padding:12px;
    display: flex;
    align-items: center;
}

.blogallery-sidebutton .action:hover, .blogallery-sidebutton .actiontopper:hover {
    background-color: rgb(40,40,40);
    background-color: rgba(100,100,100, 0.8);
}