@media only screen and (max-height: 575px) {
   .content {
      width: 80%;
      height: 100%;
   }

   .frame {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
   }

   .thumbnail {
      width: 18%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      white-space: initial;
   }

   .thumbnail .thumbnail-image {
      width: auto;
      height: calc((100% / 3) - 30px);
      display: block;
      margin-right: 0;
      margin-bottom: 15px;
   }
   .thumbnail .thumbnail-image-few {
      width: auto;
      height: calc(100% / 2);
      display: block;
   }

   .pages {
      width: 2%;
      height: 100%;
      padding: 8% 0;
   }

   .pages .flex-container {
      flex-direction: column;
      /*padding: 130px 0;*/
   }

   .pages .flex-container .thumb-link {
      margin: 3px 0;
      padding: 0 5px;
   }

   .pages .flex-container .thumb-link div {
      max-height: initial;
      margin: 0 auto;
      max-width: 4px;
   }

   .pages .flex-container .thumb-link:last-child div {
      border-radius: 0 0 8px 8px;
   }

   .pages .flex-container .thumb-link:first-child div {
      border-radius: 8px 8px 0 0;
   }

   .close {
      font-size: 17px;
      width: 23px;
      height: 23px;
      line-height: 23px;
   }
}
@media only screen and (min-height: 576px) {

   .content {
      height: 79%;
   }

   .pages {
      height: 3%;
   }
}

@media only screen and (min-height: 768px) {

   .content {
      height: 80%;
   }

   .pages {
      height: 2%;
   }
}

@media only screen and (min-width: 768px) {
   .content {
      width: 80%;
      height: 100%;
   }

   .frame {
      width: calc(100% - 170px);
      height: calc(100% - 170px);
   }

   .frame img {

      max-height: calc(100% - 105px);
   }

   .thumbnail {
      width: 18%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      white-space: initial;
   }

   .thumbnail .thumbnail-image {
      width: auto;
      height: calc((100% / 3) - 30px);
      display: block;
      margin-right: 0;
      margin-bottom: 15px;
   }
   .thumbnail .thumbnail-image-few {
      width: auto;
      height: calc(100% / 2);
      display: block;
   }

   .pages {
      width: 2%;
      height: 100%;
      padding: 8% 0;
   }

   .pages .flex-container {
      flex-direction: column;
      /*padding: 130px 0;*/
   }

   .pages .flex-container .thumb-link {
      margin: 3px 0;
      padding: 0 5px;
   }

   .pages .flex-container .thumb-link div {
      max-height: initial;
      margin: 0 auto;
      max-width: 4px;
   }

   .pages .flex-container .thumb-link:last-child div {
      border-radius: 0 0 8px 8px;
   }

   .pages .flex-container .thumb-link:first-child div {
      border-radius: 8px 8px 0 0;
   }

   .close {
      font-size: 17px;
      width: 23px;
      height: 23px;
      line-height: 23px;
   }

}


@media only screen and (min-width: 992px) {
   .frame {
      width: calc(100% - 200px);
      height: calc(100% - 200px);
   }
   .pages .flex-container {
      /*padding: 150px 0;*/
   }
   .close {
      font-size: 20px;
      width: 25px;
      height: 25px;
      line-height: 25px;
   }
}

@media only screen and (min-width: 1200px) {
   .frame {
      width: calc(100% - 220px);
      height: calc(100% - 220px);
   }
   .pages .flex-container {
      /*padding: 180px 0;*/
   }
   .close {
      font-size: 22px;
      width: 27px;
      height: 27px;
      line-height: 27px;
   }
}

@media only screen and (min-width: 1440px) {
   .frame {
      width: calc(100% - 240px);
      height: calc(100% - 240px);
   }
   .pages .flex-container {
      /*padding: 210px 0;*/
   }
   .close {
      font-size: 23px;
      width: 28px;
      height: 28px;
      line-height: 28px;
   }
}
@media only screen and (min-width: 1700px) {


   .pages .flex-container {
      /*padding: 240px 0;*/
   }
   .close {
      font-size: 24px;
      width: 29px;
      height: 29px;
      line-height: 29px;
   }
}

@media only screen and (min-width: 2000px) {


   .pages .flex-container {
      /*padding: 280px 0;*/
   }
   .close {
      font-size: 25px;
      width: 30px;
      height: 30px;
      line-height: 30px;
   }
}