body{
overflow-y: hidden;}

#gallery-content{
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  height: 100vh;
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.galleryPage{
	padding-top: 0;
	padding-bottom: 0;
	padding-right: calc(4px + 1.5vw);
	padding-left: calc(4px + 1.5vw);
  width: calc(97vw - 8px);
  height: 94vh;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
}
.imageX{
		z-index: 2;
  display: block;
  background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
margin-right: auto;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
border: 1px solid black;
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.90), 0 0 20px 0 rgba(0, 0, 0, 0.75);
}

.startClickArea {
		border-radius: 6vh 1vh 1vh 6vh;
	border: 1px solid black;
    position: absolute;
  left: 0px;
top: 48vh;
transform: translate(0, -50%);
  width: calc(12px + 2vh + 3vw);
  height: 40vh;
  z-index: 5;
  background-image: url('greenBG.png');
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: darkgreen;
}

.previousClickArea{
			border-radius: 6vh 1vh 1vh 6vh;
    position: absolute;
  left: 0px;
top: 48vh;
transform: translate(0, -50%);
  width: calc(12px + 2vh + 3vw);
  height: calc(2px + 40vh);
  z-index: 5;
border: 0;
}
.nextClickArea{
		border-radius: 1vh 6vh 6vh 1vh;
    position: absolute;
  right: 0px;
top: 48vh;
transform: translate(0, -50%);
  width: calc(12px + 2vh + 3vw);
  height: calc(2px + 40vh);
  z-index: 5;
  border: 0;
}

.endClickArea {
		border-radius: 1vh 6vh 6vh 1vh;
	border: 1px solid black;
    position: absolute;
  right: 0px;
top: 48vh;
transform: translate(0, -50%);
  width: calc(12px + 2vh + 3vw);
  height: 40vh;
  z-index: 5;
  background-image: url('galleryNav.png'), url('greenBG.png');
  background-position: center center, center right;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-color: darkgreen;
}

.imageBox {
background-image: url('loading.png');
background-repeat: no-repeat;
background-position: center 20%;
background-size: 25vh 25vh;
position: relative;
}


body {
  counter-reset: my-counter;
  list-style-type: none;
}

.picLabel {
	white-space: nowrap;
display: block;
border: 1px solid rgba(0,0,0,0.5);
/*text-shadow: -2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 2px 2px 0 #000;*/
background-color: rgba(0,0,0,0.3);
border-radius: 2vh;
margin-left: auto;
margin-right: auto;
transform: translate(-50%, -8%);
padding-left: 1vw;
padding-right: 1vw;
position: absolute;
bottom: 0;
left: 50%;
font-weight: bold;
color: rgba(255,255,255,0.8);
font-size: calc(7px + 0.4vh + 0.7vw);
counter-increment: my-counter;
}

.picLabel::after {
  content: " #" counter(my-counter);
  color: rgba(255,255,255,0.9);
}

.arrow{
  text-align: center;
  z-index: 3;
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 50%;
  text-decoration: none;
  color: black;
  opacity: 0.5; 
  transition: opacity 200ms ease;
}
.arrow:hover{
  opacity: .8;
}
.arrow span{
  position: relative;
  top: 2px;
}
.arrow.arrow-prev{
  top: 50%;
  left: 5px;
}
.arrow.arrow-next{
  top: 50%;
  right: 5px;
}
.arrow.arrow-disabled{
  opacity: 0.1;
}


#pageButtons {
/*  display: flex;*/
  justify-content: center;
  z-index: 4;
  position: absolute;
 bottom: 0;
 padding-bottom: 1vh;
  width: 100%;
left: 50%;
transform: translate(-50%, 0);
  text-align: center;
 
white-space: nowrap;
overflow-y: hidden;
overflow-x: visible;
height: 5vh;
}

::-webkit-scrollbar {
  height: 1.5vh;
}

/* Track */
::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,0.5);
	border: 2px solid black;
  border-radius: 0.5vh;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.5);
  border-radius: 0.5vh;
}

.controls__dot {
	color: white;
	font-size: calc(9px + 0.1vh + 0.7vw );
	font-style: bold;
	text-decoration: none;
  border-radius: 2vh;
  padding: 0.2vw;
  border: 2px solid black;
  background-color: rgba(0,0,0,0.7);
}
.controls__dot:not(:first-child) {
  margin-left: 0.1vw;
}


#leftArrowButtonBackground{
	border-radius: 6vh 1vh 1vh 6vh;
	border: 1px solid black;
position: absolute;
z-index: 3;
left: 0;
top: 48vh;
transform: translate(0, -50%);
height: 40vh;
width: calc(12px + 2vh + 3vw);
  background-image: url('galleryNav.png'), url('greenBG.png');
  background-position: center left, center left;
  background-repeat: no-repeat, no-repeat;
  background-size: calc(36px + 9vh + 12vw) 50vh, cover;
  background-color: darkgreen;
  box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, 0.5), 0 0 8px 0 rgba(0, 0, 0, 0.4);
}
#rightArrowButtonBackground{
	border-radius: 1vh 6vh 6vh 1vh;
	border: 1px solid black;
position: absolute;
z-index: 3;
right: 0;
top: 48vh;
transform: translate(0, -50%);
height: 40vh;
width: calc(12px + 2vh + 3vw);
  background-image: url('galleryNav.png'), url('greenBG.png');
  background-position: center right, center right;
  background-repeat: no-repeat, no-repeat;
  background-size: calc(36px + 9vh + 12vw) 50vh, cover;
  background-color: darkgreen;
  box-shadow: -2px 3px 4px 0 rgba(0, 0, 0, 0.5), 0 0 8px 0 rgba(0, 0, 0, 0.4);
}

body{
  font-family: Georgia;
  margin: 0px;
  padding: 0px;
}


@media (max-aspect-ratio: 8 / 7) {
  .galleryPage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: 91vh;
}
.imageX {
width: 46vw;
height: 29vh;
}

}


@media (min-aspect-ratio: 8 / 7) {
	.galleryPage {
  		grid-template-columns: 1fr 1fr 1fr;
  		grid-template-rows: auto;
}
.imageX{
width: 30.5vw;
height: 45vh;
}
}