* {
  box-sizing:border-box;
}
:root {
  --h_bar: 50px;
  --h_loadingbar: 15px;
  --spacer: calc(var(--h_bar)*2);
  --x_left: 0px;
  --y_left: 0px;
  --w_album_prev : 300px;
}
body {
  background-color: #eee;
  padding: 0px;
  margin: 0px;
}
.container{
  top: 0px;
  visibility: hidden;
  position: fixed;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.6);
  z-index: 1;
}
.imgView{
  display:flex;
  flex-direction: column;
  align-self: center;
  background-color: #333;
}
#img{
  max-width: 100vw;
  height: calc(100vh - var(--spacer));
  object-fit: contain;
  z-index: 1;
  align-self: center;
}
#preview_img{
  max-width: 100vw;
  height: calc(100vh - var(--spacer));
  object-fit: contain;
  position: absolute;
  top:var(--h_bar);
  z-index: 0;
  align-self: center;
}
#next{
  align-self: flex-end;
  float: right;
}
#back{
  align-self: flex-start;
  float: left;
}
.next_back{
  height: calc(100vh - var(--spacer));
  width: calc(5vh + 5vw);
  position: absolute;
  top:var(--h_bar);
  z-index: 5;
  display: flex;
  justify-content: center;
  //align-items: center;
}
.i_x{
  width: 40%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#i_next{
 visibility: hidden;
 background-image: url(next.png);
}
#i_back{
  visibility: hidden;
  background-image: url(back.png);
}

.Info{
  height:var(--h_bar);
  background-color: #777;
}
#imgTitle{
  color: #fff;
  padding: 5px;
  margin: 5px;
  float: left;
  font-family: Arial;
  font-size: calc( 25px - var(--h_loadingbar));
}
#imgText{
  float: left;
  padding:5px;
  font-family: Arial;
  color: #000;
}
#imgMenuBar{
  height:calc( var(--h_bar) - var(--h_loadingbar) );
  overflow: hidden;
}
#MenuBarClose{
  height: 100%;
  width: calc( var(--h_bar) - var(--h_loadingbar) );
  float: right;
  background-color: #777;
  background-image: url(close.png);
  background-size: contain;
}
#MenuBarClose:hover{
  background-color: #333;
}
.quality{
  padding: 5px;
  background-color: #aaa;
  border-left: 2px solid white;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  color: #000;
  float: right;
  text-align: center;
  font-family: Arial;
  margin-left: 10px;
}
.active{
  color: white;
  //padding-bottom: 15px;
  background-color: #333;
}
#loading_bar{
  height: var(--h_loadingbar);
  width: 100%;
  background-color: #fff;
  background-image: url(loading.png);
  background-size: contain;
  animation: move 4s ease infinite;
 -webkit-box-shadow: inset 0px 0px 7px 0px rgba(0,0,0,0.75);
 -moz-box-shadow: inset 0px 0px 7px 0px rgba(0,0,0,0.75);
 box-shadow: inset 0px 0px 7px 0px rgba(0,0,0,0.75);
}
@keyframes move {
  from{background-position: 0 0;}
  to{background-position: 240px 60px;}
}
@keyframes opengallery {
  from{width: 0%;top:var(--y_top);left:var(--x_left)}
  to{width: 100%;top:0px;left:0px}
}
.anim_galllery_open{
  animation: opengallery 1.0s ease-in;
}
#gallery{
  position: relative;
   -webkit-column-count: 4;
   -webkit-column-gap:   0px;
   -moz-column-count:    4;
   -moz-column-gap:      0px;
   column-count:         4;
   column-gap:           0px;
   margin: 4px;
}
#gallery>img{
  padding: 4px;
  width: 100%;
  cursor: pointer;
}
.blur{
  filter: blur(5px);
}
#albums{
  display: flex;
  overflow: hidden;
  //width: 100%;
  height: 30vh;
  background-color: #555;
  justify-content: center;
}
.albums_nav{
  height: 100%;
  width: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #444;
}
.album_prev{
    margin: 6px;
  color: #fff;
  font-family: arial;
  text-align: center;
  line-height: 25vh;
  font-size: 5vh;
  border: 4px solid white;
  align-self: center;
  min-width: 300px;
  height: 25vh;
  background-color: #222;
}
#albums_back{
  float: left;
  //align-self: flex-start;
  background-image: url("back.png");
}
#albums_next{
  float: right;
  background-image: url("next.png");
}

/*------SPECIAL RULES ----------*/

@media (hover) {
  /* only devices that can hover*/
  #next:hover > #i_next{
    visibility: visible;
  }
  #back:hover > #i_back{
    visibility: visible;
  }
  .album_prev:hover{
    background-color: #999;
    cursor: pointer;
  }
  .next_back:hover{
    background-color: rgba(0,0,0,0.6);
  }
  .quality:hover{
   background-color: #fff;
   color: #000;
   cursor: pointer;
  }
  .albums_nav:hover{
    background-color: rgba(0,0,0,0.6);
  }
}

@media (max-width: 1000px) {
  #gallery {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #gallery {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #gallery {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}