/*
 * Scattered Photo and Video Gallery by 54ka
 * =================================================
 * 
 * ffka-sc-photo.js v2.48
 * https://www.54ka.org/apps/scattered-photo-and-video-gallery
 *
 * Scattered Photo Gallery by 54ka is licensed under the GPLv3 
 * http://choosealicense.com/licenses/gpl-3.0
 * For non-commercial projects, please ask me!!!
 *
 * Copyright (c) 2020, www.54ka.org
*/

#preload_overlay { position:absolute; z-index:1000; top:0px; right:0px; bottom:0px; left:0px; background: url(../../js/loader.gif) center center no-repeat #000;}

body { overflow: hidden; background-color: #333; }
@media only screen and (max-width: 550px) { body { background-color: #ebebeb; } }
/**/

#ffka_sc_wrap {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;

  transition: 0.5s;
  -webkit-transition: 0.5s;

  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 
}

@media only screen and (max-width: 550px) { #ffka_sc_wrap {transform: scale(0.55);} }
@media only screen and (min-width: 550px) and (max-width: 750px) { #ffka_sc_wrap {transform: scale(0.75);} }
  
.photo { position: absolute; z-index: 1;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  left: 50%;
  top: 50%;
}

.photo .slide { position: absolute; top: 0; right: 0; }
.selected_IMG { margin: auto; z-index: 3; transition: 0.8s; }

.info_i,
.info_ii,
.info_iii { opacity: 0; }
.selected_IMG .info_i { opacity: 1; background: rgba(255,255,255,1.0); margin-top: -4px; transition: 1s; }
.selected_IMG .info_ii { opacity: 1; background: rgba(0,0,0,0.7); color: #fff; padding: 10px; margin-top: 10px; transition: 1s; }
.selected_IMG .info_iii { opacity: 0; color: #fff; position: absolute; z-index: 4; transition: 0.5s; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.selected_IMG .info_iii span { bottom: 0px; position: absolute; padding: 10px; background: rgba(0,0,0,0.5); width: calc(100% - 20px);}
.selected_IMG:hover .info_iii { opacity: 1; transition: 0.5s;}

.info_hide { display: none; }



.box { 
  position: relative;
  height: 400px;
  margin: 100px auto 100px auto;
}

@media only screen and (max-width: 550px) { .box{ height: 300px; margin: 0px auto 70px auto; } }
@media only screen and (min-width: 550px) and (max-width: 750px) { .box{ height: 300px; margin: 100px auto 100px auto; } }

.video { display: none; }
.selected_IMG .video { display: block; z-index: 5; position: absolute; width: 100%; height: 100%; border: 0px;}
/* sc_nav */

#sc_nav { position: absolute; bottom: 20px; z-index: 10; width: 100%; text-align: center;}
#sc_nav div {}
#sc_nav span { width: 10px; height: 10px; border-radius: 50%; background:rgba(0,0,0,0.6); display: inline-block; margin: 10px; cursor: pointer;}
#sc_nav span:hover {background:rgba(0,0,0,0.8);}