@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400&subset=latin,latin-ext);

html,body,#gridContainer {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:300;
}

body {

    margin:0;

    background:#111;

    width:100vw;
    height:100vh;

    overflow:hidden;

}



#gallery {

    width:100vw;
    height:100vh;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}



#gallery img {

    position:absolute;

    width:100%;
    height:100%;

    object-fit:contain;

    opacity:0;

}



#layerA {

    opacity:1;

}



#controls {

    position:fixed;

    top:30px;

    right:50px;

/*    transform:translateX(-50%);*/

    z-index:10;
    font-size: 12px;
    color: rgb(125,125,125);
    text-transform: uppercase;


}



button {

    font-size:18px;

    padding:5px 10px;

/*    border: 2px solid rgb(50,50,50);*/
    background: rgb(25,25,25);
    border-radius: 20px;
    cursor: pointer;
    opacity: .5;
    color: rgb(255,255,255);
    font-weight: bold;
}
button:hover {
/*    border: 2px solid rgb(255,255,255);*/
    color: rgb(255,255,255);
    background-color: rgb(150,0,0);
    opacity: .9;
}


    #slideshowBtn {
      width: 96px;
      height: auto;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
        cursor: pointer;
    }


#speedControl {

    margin-top:20px;

    color:white;

    text-align:center;

    display: block;

}
#speedControl label {
    color: rgb(125,125,125);
    font-weight: bold;
}

/*#speedControl {

    position: fixed;

    top: 164px;
    right: 45px;

    z-index: 9999;

}*/


#speedSlider {

    width:200px;

}



#speedSlider {

    width: 105px;

}

#speedSlider {
  -webkit-appearance: none;
  appearance: none;

  width: 105px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  accent-color: #000;
}

/* Track (WebKit) */
#speedSlider::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, #bbbbbb 0%, #9b9b9b 100%);
/*  background: #ccc;*/
  border-radius: 999px;
}

/* Thumb (WebKit) */
#speedSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;

  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #555;
  border: 1px solid #111;
  margin-top: -5px; /* centers thumb on track */
  transition: transform 0.15s ease;
}

#speedSlider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Firefox track */
#speedSlider::-moz-range-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}

/* Firefox progress */
#speedSlider::-moz-range-progress {
  background: #fff;
  height: 6px;
  border-radius: 999px;
}

/* Firefox thumb */
#speedSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #000;
/*  border: 2px solid #000;*/
  cursor: pointer;
}




#loader{

    position:fixed;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    color:white;

    font-family:Arial,sans-serif;

    text-align:center;

    z-index:100;

    pointer-events:none;

}


#loadingText{

    display:none;

    margin-bottom:6px;

}


#imageCounter{

    opacity:.8;

}









#imageSliderContainer {

    position:fixed;

    right:30px;

    top:5.5vh;

    height:85vh;

    z-index:50;

}



#imageSlider {

    writing-mode:vertical-lr;

    direction:ltr;

    width:20px;

    height:85vh;

}