/* add padding to gallery div */
.gallery {
   padding-left: 5%;
   padding-right: 5%;
}

/* Stylization of every div that contains photo under Gallery in index.html */
.gallery-div-img {
   width: 350px;
   height: 233px;
   margin: 15px;
   margin-bottom: 15px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
}

/* Stylization of every photo under Gallery in index.html */
.gallery-img {
   min-width: 100%;
   max-height: 233px;
   transition: 0.5s;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

/* icon to show picture zoom is available */
.zoom-icon {
   width: 75px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   opacity: 0;
   z-index: 2;
   transition: 0.5s;
}

/* overlay on image focus */
#dark-overlay {
   background-color: #000000;
   height: 100%;
   width: 100%;
   z-index: 10;
   position: fixed;
   display: none;
}

/* overlay on image focus animation */
.show-dark-overlay {
   animation: ShowDarkOverlay 0.3s forwards linear;
}

/* overlay keyframes */
@keyframes ShowDarkOverlay {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 0.8;
   }
}

/* focused image style */
#big-img-div {
   width: 937px;
   height: 620px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   z-index: 15;
   display: none;
}
#big-img {
   max-width: 100%;
   max-height: 100%;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   z-index: 15;
}

/* focused image animation */
.show-big-img {
   animation: ShowBigImg 0.3s forwards linear;
}

/* focused image keyframes */
@keyframes ShowBigImg {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
}

/* focused image actions styles */
#close-big-img {
   position: fixed;
   z-index: 20;
   right: 10px;
   width: 35px;
   cursor: pointer;
}
.gallery-arrow {
	position: fixed;
   width: 45px;
   z-index: 20;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}
#gallery-arrow-right {
   transform: rotate(-90deg);
   right: 10px;
}
#gallery-arrow-left {
   transform: rotate(90deg);
   left: 10px;
}

/* focused image size on smaller screens */
@media screen and (max-width: 992px) {
   #big-img-div {
		width: 750px;
		height: 500px;
   }
}

/* focused image size on smallest screens */
@media screen and (max-width: 786px) {
	#big-img-div {
		width: 520px;
		height: 347px;
	}
}

/* focused image actions on smaller screens */
@media screen and (min-width: 530px) {
   .zoom-icon:hover + .gallery-img {
		transform: translateX(-50%) scale(1.1);
		opacity: 0.7;
   }

   /* Stylization of every photo when hovered under Gallery in index.html */
   .gallery-img:hover {
		transform: translateX(-50%) scale(1.1);
		opacity: 0.7;
   }

   .gallery-div-img:hover > .zoom-icon {
   	opacity: 1;
   }
}

/* gallery size on small screens */
@media screen and (max-width: 420px) {
   .gallery {
		padding-left: 5px;
		padding-right: 5px;
   }
}