.popup {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    z-index:10000;
    transition:0.2s;
}

.popup .overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    z-index:1;
    background: rgb(0, 0, 0) none repeat scroll 0% 0%;
    opacity: 0.8;
}

.popup .image {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:max-content;
    height:max-content;
    display:block;
    z-index:2;
    border: 1px solid #999999;
}

.popup .image a {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    z-index:2;
}

.popup .image img {
    width:auto;
    height:auto;
    max-width:80vw;
    max-height:80vh;
    display:block;
    margin-top:0;
    z-index:1;
    position:relative;
}

.popup .image .close {
  position: absolute;
  width: 26px;
  height: 26px;
  line-height: 26px;
  top: -10px;
  right: -10px;
  cursor: pointer;
  z-index: 9999;
  color: #222222;
  background: #FFFFFF;
  border-radius: 100%;
  box-shadow: 0 0 1px #FFFFFF;
  text-align: center;
  font-size: 16px;
  opacity: .8;
  transition: linear 100ms all;
  font-family: FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.popup .image .close:hover {
  box-shadow: 0 0 5px #FFFFFF;
  color: #222222;
  opacity: 1;
}

.popup .image .close::after {
  content: "\f00d";
}