#gallery{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
	height: 100%; /*use 100%  not bottom 0, on android chrome sometimes it opens and not fill height depending address bar visibility - maybe browser bug */
    background-color: rgba(0,0,0,0.9);
    z-index: 1031;

    color: #FFFFFF;
    
    min-width: 320px;
}

#gallery:focus{
    outline: none;
}

#gallery,#gallery * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#gallery a.closer{
    display:block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 23px;
    z-index: 100;
}

@media (max-width: 750px) {
    #gallery a.closer{
        top: -10px;
        right: -10px;
    }
}


#gallery a.closer span{
    display:block;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}

#gallery a.closer:hover span{
    display:block;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}


#gallery a.arrow{
    display:block;
    position: absolute;
    height: 140px;
    top: 50%;
    margin-top: -70px;
    width: 60px;
    z-index: 100;

    -webkit-transition: opacity 0.4s, visibility 0s;
    transition: opacity 0.4s, visibility 0s;

    -webkit-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
}

@media (max-width: 650px) {
    #gallery a.arrow{
        display:none;
    }
}

#gallery a.arrow.disabled{
    opacity: 0;
    visibility: hidden;

    -webkit-transition-delay: 0s, 0.4s;
    transition-delay: 0s, 0.4s;
}

#gallery a.arrow .icon{
    position: absolute;
    top: 50%;
    margin-top: -20px;

    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

#gallery .arrow.left{
    left: 0;
}


#gallery .arrow.left .icon{
    left: 18px;
}

#gallery .arrow.left:hover .icon{
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
}

#gallery .arrow.right{
    right: 0;
}

#gallery .arrow.right .icon{
    right: 18px;
}

#gallery .arrow.right:hover .icon{
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}


#gallery .items-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 46px;
}

#gallery.small-controls .items-wrapper{
    bottom: 78px; 
    /*top: 10px;*/
}


#gallery .items-wrapper .item{
    position: absolute;
    visibility: hidden; 
}


#gallery.transition-fade-move .items-wrapper .item{
    opacity: 0;

    -webkit-transition: visibility 0s, opacity 0.4s, -webkit-transform 0.3s;
    transition: visibility 0s, opacity 0.4s, transform 0.3s;

    -webkit-transition-delay: 0.4s, 0s, 0s; 
    transition-delay: 0.4s, 0s, 0s; 
}


#gallery.transition-fade .items-wrapper .item{
    opacity: 0;

    -webkit-transition: visibility 0s, opacity 0.4s;
            transition: visibility 0s, opacity 0.4s;
    
    -webkit-transition-delay: 0.4s, 0s; 
            transition-delay: 0.4s, 0s; 
}


#gallery .items-wrapper .item img{
    display:block;
    position: absolute;
    width: 100%;
    height: 100%;

    opacity: 1;

    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

#gallery .items-wrapper .item.loading img{
    opacity: 0;

    -webkit-transition: none;
    transition: none;
}

#gallery .items-wrapper .item .preloader{
    display:none;
}

#gallery .items-wrapper .item.loading .preloader{
    display:block;
}


#gallery.transition-fade-move .items-wrapper .item.next:not(.active){
    -webkit-transform: translateX(110px) scale(0.8);
    transform: translateX(110px) scale(0.8);
}

#gallery.transition-fade-move .items-wrapper .item.prev:not(.active){
    -webkit-transform: translateX(-110px) scale(0.8);
    transform: translateX(-110px) scale(0.8);
} 


#gallery .items-wrapper .item.active{
    visibility: visible; 
    z-index: 99;
}


#gallery.transition-fade-move .items-wrapper .item.active,
#gallery.transition-fade .items-wrapper .item.active{
    opacity: 1;

    -webkit-transition-delay: 0s; 
    transition-delay: 0s; 
}

#gallery .items-wrapper .item .saving{
    position: absolute;
    visibility: hidden; 
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    
    text-align: center;


    -webkit-transition: opacity 0.15s linear, visibility 0s;
    transition: opacity 0.15s linear, visibility 0s;

    -webkit-transition-delay: 0s, 0.15s;
    transition-delay: 0s, 0.15s;
}

#gallery .items-wrapper .item .saving:before{
    display: inline-block;
    content: '';
    height: 100%;
    vertical-align: middle;
    font: 0/0 a; 

}

#gallery .items-wrapper .item .saving p{
    display: inline-block;
}

#gallery.blocked .items-wrapper .item.active .saving{
    visibility: visible; 
    opacity: 1;   

    -webkit-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
}



#gallery .items-wrapper .item.arrow  {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
#gallery .items-wrapper .item.arrow:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
#gallery .items-wrapper .item.arrow a {
    display: inline-block;
    vertical-align: middle;
    text-decoration: inherit;
    padding: 20px;
    color: #FFF;
}

#gallery .items-wrapper .item.arrow a div:last-child{
    margin-top: 12px;
}

#gallery .items-wrapper .item.arrow a:hover div:last-child {
    text-decoration: underline;
}

#gallery .items-wrapper .item.arrow .icon{
    display: inline-block;
}




#gallery .controls{
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
/*    left: 10px;
    right: 10px;*/
    text-align:center;
}


#gallery .controls .group{
    position: relative;
    display:inline-block;
    margin-bottom: 9px;
}

#gallery .controls .group .org-filename,
#gallery .controls .group .tagging-comp,
#gallery .controls .group .commenting-comp,
#gallery .controls .group .rating-comp,
#gallery .controls .group .colors-comp{
    display:inline-block;
    vertical-align:middle;
    margin-right: 10px;
    margin-left: 10px;
    /*position: absolute;*/
}

#gallery .controls > div:last-child{
    margin-right: 0;
}


/*small screen, ratings and colors enabled, make between then more space*/
#pageGalleryBrowse.rating-enabled.colors-enabled #gallery.small-controls .controls .rating-comp{
    margin-right: 25px;
}

#gallery .controls .colors-comp{
    /*width like all circles activated*/
    min-width: 101px; 
    text-align:right;
}


#pageGalleryBrowse:not(.rating-enabled) #gallery.small-controls .controls .colors-comp{
    text-align:center;
}

#gallery .controls .colors-comp .btn-link{
    color: #CCC;
}


#gallery .controls .org-filename{
    width: 170px;
    text-align: center;
}

#gallery .controls .org-filename > span{
    display:inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align:middle;
    padding-bottom: 2px;
}

/*any of controls available from first group*/
.tagging-enabled #gallery.small-controls .controls .org-filename,
.commenting-enabled #gallery.small-controls .controls .org-filename{
    text-align:right;
}

#pageGalleryBrowse:not(.tagging-enabled):not(.commenting-enabled) #gallery:not(.small-controls) .controls .org-filename{
    text-align:left;
}

#pageGalleryBrowse:not(.colors-enabled):not(.rating-enabled) #gallery:not(.small-controls) .controls .org-filename{
    text-align:right;
}

#pageGalleryBrowse:not(.colors-enabled):not(.rating-enabled):not(.taging-enabled):not(.commenting-enabled) #gallery:not(.small-controls) .controls .org-filename{
    text-align:center;
}


#gallery #galleryColorsPopup{
    z-index: 100;
}