#imagelightbox, .imagelightbox{
   cursor: pointer;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 100;
   -ms-touch-action: none;
   touch-action: none;
   border: 2px solid #fff;
   box-shadow: 5px 7px 20px rgba( 0, 0, 0, .3 ); 
   }


		/* ACTIVITY INDICATION */

#imagelightbox-loading, #imagelightbox-loading div{border-radius: 50%;}

#imagelightbox-loading{
   width: 2.5em; /* 40 */
   height: 2.5em; /* 40 */
   background-color: #444;
   background-color: rgba( 0, 0, 0, .5 );
   position: fixed;
   z-index: 10003;
   top: 50%;
   left: 50%;
   padding: 0.625em; /* 10 */ 
   margin: -1.25em 0 0 -1.25em; /* 20 */
   box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40*/ 
   }
			
#imagelightbox-loading div{
   width: 1.25em; /* 20 */
   height: 1.25em; /* 20 */
   background-color: #fff;
   -webkit-animation: imagelightbox-loading .5s ease infinite;
   animation: imagelightbox-loading .5s ease infinite;
}

			@-webkit-keyframes imagelightbox-loading
			{
				from { opacity: .5;	-webkit-transform: scale( .75 ); }
				50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
				to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
			}
			@keyframes imagelightbox-loading
			{
				from { opacity: .5;	transform: scale( .75 ); }
				50%	 { opacity: 1;	transform: scale( 1 ); }
				to	 { opacity: .5;	transform: scale( .75 ); }
			}


		/* OVERLAY */

#imagelightbox-overlay, .imagelightbox-overlay{
   background: #039e71;
   background: linear-gradient(rgba(85, 197, 67, .9), rgba(3, 158, 113, .9));
   position: fixed;
   z-index: 6;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   }


#imagelightbox-close{
   width: 50px; 
   height: 50px; 
   background: none;
   padding: 0;
   opacity: .8;
   position: fixed;
   z-index: 7;
   top: 15px; 
   right: 30px; 
   transition: all .3s ease;
   cursor: pointer
		}
			
#imagelightbox-close:hover, #imagelightbox-close:focus{
   opacity: 1
   }
			
#imagelightbox-close:before, #imagelightbox-close:after{
   width: 1px;
   background-color: #000;
   content: '';
   position: absolute;
   top: 3px;
   bottom: 3px;
   left: 50%;
   margin-left: -1px;
}

#imagelightbox-close:before{
   -webkit-transform: rotate( 45deg );
   -ms-transform: rotate( 45deg );
   transform: rotate( 45deg );
   }
#imagelightbox-close:after{
   -webkit-transform: rotate( -45deg );
   -ms-transform: rotate( -45deg );
   transform: rotate( -45deg );
   }

/* CAPTION */

#imagelightbox-caption{
   font-size: 13px;
   color: #000;
   position: fixed;
   z-index: 111;
   text-align: center;
   letter-spacing: 1px;
   background-color: rgba(255,255,255,.2);
   width: 100%;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 10px;
   }

/* NAVIGATION */

button{border: none;}

#imagelightbox-nav{
   background: #000;
   background: rgba( 0, 0, 0, .5 );
   border-radius: 20px;
   position: fixed;
   z-index: 3;
   left: 50%;
   bottom: 3.75em; /* 60 */
   padding: 0.313em; /* 5 */
   -webkit-transform: translateX( -50% );
   -ms-transform: translateX( -50% );
   transform: translateX( -50% );
  }

#imagelightbox-nav button{
   width: 1em; /* 20 */
   height: 1em; /* 20 */
   background-color: transparent;
   border-radius: 50%;
   border: 1px solid #fff;
   display: inline-block;
   margin: 0 0.313em; /* 5 */
  }

#imagelightbox-nav button.active{background-color: #fff;}



#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,



   
@media only screen and (max-width: 760px){



   
#imagelightbox-close{
   top: 10px;
   right: 10px;
   }
   
#imagelightbox-nav{bottom: 1.25em; }

.imagelightbox-arrow{
   width: 2.5em; /* 40 */
   height: 3.75em; /* 60 */
   margin-top: -2.75em; /* 30 */
}

.imagelightbox-arrow-left{left: 1.25em;}

.imagelightbox-arrow-right{right: 1.25em; }

}


@media only screen and (max-width: 420px) {
   
.imagelightbox-arrow-left{left: 0;}

.imagelightbox-arrow-right{right: 0;}

}