.responsivegallery{ width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;position: fixed;display: none;z-index: 1000;}
.responsivegallery:before{ content: '';display: block;position: absolute;width: 100%;height: 100%;cursor: zoom-out;top: 0;left: 0;background: black;opacity: 0.8;z-index: -1;}
.responsivegallery .galleryinner{position: absolute;left: 0;top: 0;width: 100%;height: 100%;margin: auto;text-align: center;vertical-align: middle;white-space: nowrap;}
.responsivegallery .galleryinner:before{content: '';display: inline-block;height: 100%;vertical-align: middle;}
.responsivegallery .figurearea{position: relative;max-width: 100%;vertical-align: middle;display: inline-block;z-index: 1000;}
.responsivegallery .figurearea.isvideo{width: 90%;}
/* video container CSS */
.jkvideocontainer *{width: 100%;}
.jkvideowrapper{position: relative;padding-bottom: 56.25%; height: 0;}
.jkvideowrapper iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;}
/* figure CSS */
.responsivegallery figure{box-shadow: 0 0 15px rgba(0,0,0,.6);opacity: 0;-webkit-transition: opacity 0.5s;-moz-transition: opacity 0.5s;transition: opacity 0.5s;}
.responsivegallery figure img{max-width: 100%;width: 100%;height: auto;line-height: 0;display: block;}
/* Caption CSS */
.responsivegallery .figurearea .thecaption{text-align: left;position: absolute;bottom: 0;padding: 5px;width: 100%;white-space: normal;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.responsivegallery .figurearea.isvideo .thecaption{position: relative;	}
.responsivegallery .figurearea .thecaption:before{ /* caption overlay */content: '';position: absolute;width: 100%;height: 100%;display: block;background: white;top: 0;left: 0;opacity: 0.8;}
.responsivegallery .captioninner{position: relative;padding: 3px;color: black;overflow: hidden;}
.responsivegallery.captioninner span.counter{float: right;font-weight: bold;display: block;height: 100%;line-height: 100%;background: #2D2D2D;color: white;border-radius: 50%;width: 40px;height: 40px;line-height: 40px;text-align: center;box-shadow: 0 0 3px gray;
}
.responsivegallery .close{position: absolute;right: 10px;top: 10px;padding: 5px;width: 55px;height: 55px;border-radius: 50%;background: #000;color: #fff;z-index: 1000;box-shadow: 0 0 5px rgba(0,0,0,.6);cursor: pointer;-webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;
}
.responsivegallery .close::before,
.responsivegallery .close::after{ position:absolute; content:''; width:60%; height:4px; border-radius:4px; background-color:#fff; left:20%; top:50%; margin-top:-2px;}
.responsivegallery .close::before{ transform:rotate(45deg);}
.responsivegallery .close::after{ transform:rotate(-45deg);}
.responsivegallery .close:hover{background-color: #0070c0;}

.responsivegallery .leftnav,
.responsivegallery .rightnav{position: absolute;left: 5px;top: 50%;width: 50px;height: 50px;background: white;border-radius: 50%;margin-top: -25px;cursor: pointer;z-index: 1000;}
.responsivegallery .rightnav{right: 5px;left:auto;}

.responsivegallery .leftnav::before,
.responsivegallery .leftnav::after,
.responsivegallery .rightnav::before,
.responsivegallery .rightnav::after{position:absolute; content:''; width:20px;height:4px; border-radius:4px; background-color:#000; left:50%; margin-left:-10px; top:50%;}
.responsivegallery .leftnav::before{ transform:rotate(45deg); margin-top:6px;}
.responsivegallery .leftnav::after{ transform:rotate(-45deg); margin-top:-6px;}
.responsivegallery .rightnav::before{ transform:rotate(45deg); margin-top:-6px;}
.responsivegallery .rightnav::after{ transform:rotate(-45deg); margin-top:6px;}

.responsivegallery .loadingdiv,
.responsivegallery .errordiv{width: 100px;height: 100px;border-radius: 10px;position: absolute;display: none;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;opacity: 0.6;text-align: center;z-index: 1000;background: black;}
.responsivegallery .loadingdiv span,
.responsivegallery .errordiv span{vertical-align: middle;color: red;font-size: 3em;line-height: 90px;}
.responsivegallery .loadingdiv span{ -webkit-animation: rotate 2s linear infinite;animation: rotate 2s linear infinite;font-size: 3.5em;color: white;display: inline-block;
}
@-webkit-keyframes rotate{
0%{	-webkit-transform: rotate(0deg);}
100%{	-webkit-transform: rotate(360deg);}
}
@keyframes rotate{
0%{		transform: rotate(0deg);}
100%{	transform: rotate(360deg);}
}
@media (max-width: 480px){
.responsivegallery .leftnav,
.responsivegallery .rightnav{	width: 40px;height: 40px;margin-top: -20px;}
}