/*
 * Scattered Photo Gallery by 54ka
 * =================================================
 * 
 * ffka_scatt_photo.js v1.23
 * https://www.54ka.org/apps/scattered-photo-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) 2019, www.54ka.org
*/
/**/
#preload_overlay { position:absolute; z-index:1000; top:0px; right:0px; bottom:0px; left:0px; background: url(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_scatt_wrap {
  width: 100%;
  height: 100%;
  position: absolute;

  -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_scatt_wrap {transform: scale(0.55);} }
@media only screen and (min-width: 550px) and (max-width: 750px) { #ffka_scatt_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; cursor: pointer; }
.selected_IMG .slide {cursor: auto;}

.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; }