body {
   background-color: #262626;
}

.container {
   position: absolute;
   width: 100%;
   height: 100%;
}

.content {
   width: 100%;
   height: 78%;
   float: left;
   display: flex;
   flex-direction: column;
   padding: min(30px, 10%) 0;
}

.frame {
   width: calc(100% - 40px);
   height: calc(100% - 140px);
   margin: 20px auto;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   position: relative;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.frame img {
   width: 100%;
   object-fit: contain;
   margin-bottom: 20px;
}


.thumbnail {
   background-color: #262626;
   width: 100%;
   height: 18%;
   overflow: auto;
   white-space: nowrap;
   float: left;
   overflow-y: hidden;
}
.thumbnail .thumbnail-image {
   cursor: pointer;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   display: inline-block;
   width: calc(100% / 3);
   height: 100%;
   margin-right: 10px;
}
.thumbnail .thumbnail-image-few {
   cursor: pointer;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   display: inline-block;
   width: calc(100% / 2);
   height: 100%;
}

.hide {
   visibility: hidden;
   opacity: 0;
}

.show {
   visibility: visible;
   opacity: 1;
}

.pages {
   height: 4%;
   width: 100%;
   float: left;
   padding: 0 20%;
}
.pages .flex-container {
   display: flex;
   width: 100%;
   flex-direction: row;
   height: 100%;
   /*padding: 0 80px;*/
}
.pages .flex-container .thumb-link {
   width: 100%;
   flex-grow: 1;
   margin: 0 3px;
   height: 100%;

}
.pages .flex-container .thumb-link div {
   width: 100%;
   height: 100%;
   background: #a3a3a3;
   max-height: 4px;
   margin: auto 0;
}
.pages .flex-container .thumb-link.active div {
   background-color: #414141;
}
.pages .flex-container .thumb-link:last-child div {
   border-radius: 0px 8px 8px 0px
}
.pages .flex-container .thumb-link:first-child div {
   border-radius: 8px 0px 0px 8px;
}

.close {
   color: white;
   font-size: 15px;
   background: #eeeeee5e;
   width: 20px;
   height: 20px;
   line-height: 20px;
   text-align: center;
   position: fixed;
   top: min(5%, 40px);
   left: min(5%, 40px);
}

footer {
   text-align: center;
}
footer a, footer a p  {
   display: inline-block;
}
footer a p {
   position: initial;
}