@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);

/* Pagination thumbs
========================================================*/
.inner{    
    margin: 20px 0px;
    list-style: none;
    overflow: hidden;
    &.loading{

    }
    >div{
        margin: 0;
        padding: 0;
        .item{
            width: 180px; 
            height: auto;
            overflow: hidden; 
            .box-sizing(border-box);
            background: #838383;
            position: relative;
            // .box-shadow(0 0px 14px 2px rgba(0,0,0,0.1));         
            a{
                display: block; 
                >img{
                    .scale(1, 1);
                    .transition(all 0.3s ease);
                    width: 100%;
                }           
                span.magnifier-overlay {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: #fff;
                    z-index: 2;
                    display: block;
                    .box-sizing(border-box);
                    left: 0px;
                    top: 0px;
                    font-size: 24px;
                    .scale(0, 0);                    
                    .opacity(0.4);
                    .transition(all 0.3s ease);
                }
                span.fa {
                     position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: 5;
                    display: block;
                    .box-sizing(border-box);
                    left: 0px;
                    top: 0px;
                    font-size: 24px;
                    color: #000;
                    .transition(all 0.3s ease);
                    &:before {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-left: -10px;
                        margin-top: -12px;                        
                        .transition(all 0.3s ease);
                        .scale(0, 0);
                    }
                }
            }
            >a:hover, &.active>a {
                text-decoration: none;
                >img {
                }
                span{
                    text-decoration: none;
                }
                span.magnifier-overlay {
                    .scale(1, 1);
                    .transition(all 0.3s ease);
                }
                span.fa:before {
                    .transition(all 0.3s ease);
                    .scale(1.2, 1.2);
                }
            }
        }
    }
}

/* gallery load spinner
========================================================*/
.content-load-spinner{
    position: absolute;
    top: 0;
    left: 0;
    .square(100%); 
    background: url(../images/gallery-loader-list.gif) #f1f1f1 50% 50% no-repeat;
    z-index: 1000;
    overflow: hidden;
}

/* Inner carousel pagination
========================================================*/
.galleryContainer .inner .item{
    width: auto;
    padding: 0;
    border: none; 
}

.carousel-holder{
    overflow: hidden;
    z-index: 1;
    margin: 0 auto;
    padding: 0;
    .transition(all 0.3s ease);
    bottom: -80px;
    position: absolute;
    width: 100%;
    height: 50px;
    &.show{
        bottom: 25px;
    }    
}
.carousel.inner{        
    list-style: none;
    overflow: hidden;
    margin: 0 50px;

    >div{
        position: relative;
        height: 100%;
        white-space: nowrap;
        margin: 0 auto;
        padding: 0;
        >div{
            display: inline-block;
        }
        .item{
            position: relative;
            overflow: hidden;
            width: auto;
            height: 50px;
            border: none;
            padding: 0;
            margin: 0;  
            overflow: hidden; 
            .box-sizing(border-box);
            // .box-shadow(0 0px 14px 2px rgba(0,0,0,0.1));         
            a{
                display: block; 
                >img{
                    .transition(all 0.3s ease);
                    width: auto;
                    height: 50px;
                }           
                span.magnifier-overlay {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: #000;
                    z-index: 2;
                    display: block;
                    .box-sizing(border-box);
                    left: 0px;
                    top: 0px;
                    font-size: 24px;
                    .scale(1, 1); 
                    .opacity(0);
                }
                span.fa {
                    display: none !important;
                    &:before {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-left: -10px;
                        margin-top: -12px;                        
                        .transition(all 0.3s ease);
                        .scale(0, 0);
                    }
                }
            }
            >a:hover, &.active>a {
                text-decoration: none;
                a>img {
                }
                span.magnifier-overlay {                    
                    .scale(1, 1);                    
                    .opacity(0.6);
                    .transition(all 0.3s ease);
                }
                span.fa:before {
                    .transition(all 0.3s ease);
                    .scale(1.2, 1.2);
                }
            }

        }
        .item.active {
            //.scale(1.2, 1.2);
        }
    }
}



/* Gallery bg
========================================================*/
body.galleryOpen{
    position: fixed;
    top: 0;
    left: 0;
    .size(100%,100%);
    overflow: hidden;

    .galleryContainer{
        position: absolute;
        z-index: 1000;
        .size(100%,100%) !important;
    }
    
    #content{
        height: 0 !important;
        overflow: hidden;
    }
}
.galleryContainer{
    position: relative;
    top: 0;
    left: 0;
    .size(100%,0) !important;
    overflow: hidden;
    /*.perspective(1000px);*/
    &.animationDisable{
        .transition(none);
        *{
            .transition(none);
        }
    }
}
.galleryHolder {
    position: absolute;
    left: 0;
    top: 0;
    .size(100%,100%);
    z-index: 0 !important;
    // .transform-origin(center);
    background: #191919;
}
.imageHolder {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
    cursor: default;
    .transition(all 0.7s ease-in-out);
    .frontImg, .backImg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
        .transition(all 0.7s ease-in-out);
    }
    .frontImg, .backImg{
        z-index: 2;
        /*.rotateX(0deg);*/
        .scale(1,1);
    }
    .backImg{
        /*.rotateX(-180deg);*/
        .scale(2,2);
        .opacity(0);
    }
    &.scale{
        .scale(0.75);
    }
    &.flip{
        .transition(all 0.7s ease-in-out);
        /*.rotateX(180deg);*/
        .frontImg{
            .opacity(0);
            .scale(2,2);
        }
        .backImg{
            .opacity(100);
            /*.rotateX(-180deg);*/
            .scale(1,1);
        }
    }
    &.ie9{
        .scale(1,1) !important;  
        .frontImg,
        .backImg {
            .scale(1,1) !important; 
        }
    }
    &.videoInside{
        cursor: pointer;
    }
}
.animation{
    .transition(all 0.7s ease-in-out);
}

/* Description
========================================================*/
.galleryDescription{
    position: absolute;
    left: -500px;
    right: 0;
    height: 0;
    top: 80px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    list-style: none;
    z-index: 10;
    width: 500px;
    .transition(left 0.3s ease);
    &.show{
        left: 0;
    }
    ul{ 
        li{
            position: absolute;
            bottom: -200%;
            .size(100%,auto);
            background: rgba(0, 0, 0, 0.5);
            padding: 15px 20px;
            right: 0;
            .box-sizing(border-box);
            .transition(left 0.2s ease-in-out);
            &.active{
                display: block;
                bottom: 0;
                .transition(left 0.7s ease-in-out);
                .transition-delay(0.8s);
            }     
            p{
                text-align: left;
                color: white;
                line-height: 1.2em;
                margin: 0px 0px 0px 0px;
                &:first-child{
                    font-size: 35px;
                    line-height: 1em;
                    padding-right: 40px;
                }
            }
        }
    }
    .description_list {
        width: 500px;
    }
}

@media only screen and (max-width: 768px) {
    .galleryDescription{
        width: 300px;
    }
}

/* Spinner
========================================================*/
.imgSpinner{
    position: absolute;
    top: 50%;
    left: 50%;
    .square(50px);
    z-index: 99;
    background: url(../images/gallery-loader.gif) center no-repeat #191919;
    background-size: 30px 30px;
    border-radius: 500px;
    margin: -24px 0 0 -24px;
    .transition(all 0.4s ease);
    .opacity(0);
    .scale(0,0);
    &.spinnerShow{
        .opacity(1);
        .scale(1,1);
    }
}


/* ========================================================
                            Buttons
========================================================*/


/* Navigation Bar for gallery and carousel
========================================================*/
// .gallery_nav {
//     width: 100%;
//     height: 62px;
//     position: absolute;
//     bottom: 0;
//     left: 0;
//     right: 0;
//     top: 50%;
//     margin-top: -32px;
//     z-index: 5;
//     .transition(all 0.3s ease-out);
// }

/* Prev Button
========================================================*/
.prevButton {
    position: absolute;
    display: inline-block !important;
    z-index: 5;
    .transition(all 0.3s ease-out);
    background: rgba(0,0,0,0.5);
    padding: 1px 12px 1px 8px;
    border-radius: 10px;
    top: 50%;
    margin-top: -30px;
    i{
        position: relative;
        font-size: 60px;
        line-height: 60px;
        color: white;
        .transition(all 0.3s ease-out);
    }
    &:hover i {
        color: #ccc
    }
}

.prevButton{
    left: -50px;
    &.showButton{
        left: 10px;
    }
}

@media only screen and (max-width: 480px) {
    .prevButton {
        i{
            font-size: 40px;
            line-height: 40px;
        }
    }
}


.prev {
    position: absolute;
    display: inline-block !important;
    z-index: 5;
    .transition(all 0.3s ease-out);
    bottom: 10px;
    i {
        font-size: 30px;
        line-height: 32px;
        position: relative;
        color: white;
        .transition(all 0.3s ease-out);
    }
    &:hover i {
        color: #d05252
    }
}

.prev{
    left: 15px;
    &.hide-button{
        display: none !important;
    }
}




/* Next Button
========================================================*/
.nextButton{
    position: absolute;
    display: inline-block !important;
    z-index: 5;
    .transition(all 0.3s ease-out);
    background: rgba(0,0,0,0.5);
    padding: 1px 8px 1px 12px;
    border-radius: 10px;
    top: 50%;
    margin-top: -30px;
    i{
        position: relative;
        font-size: 60px;
        line-height: 60px;
        color: white;
        .transition(all 0.3s ease-out);
    }
    &:hover i {
        color: #ccc
    }
}

.nextButton{
    right: -50px;
    &.showButton{
        right: 10px;
    }
}

@media only screen and (max-width: 480px) {
    .nextButton {
        i{
            font-size: 40px;
            line-height: 40px;
        }
    }
}

.next {
    position: absolute;
    display: inline-block !important;
    z-index: 5;
    .transition(all 0.3s ease-out);
    bottom: 10px;
    text-align: right;
    i {
        font-size: 30px;
        line-height: 32px;
        position: relative;
        color: white;
        .transition(all 0.3s ease-out);
    }
    &:hover i {
        color: #d05252
    }
}

.next{    
    right: 15px;
    &.hide-button{
        display: none !important;
    }
}



/* Close Button
========================================================*/
.close-icon {
    background: rgba(0, 0, 0, 0.5);
    /* opacity: 0.5; */
    border-radius: 100%;
    width: 100px;
    height: 100px; 
    top: -120px;
    right: -120px; 
    position: absolute;
    display: inline-block !important;
    z-index: 5;
    .transition(all 0.3s ease-out);    
    z-index: 100;
    i{
        position: relative;
        font-size: 50px;
        .transition(all 0.3s ease-out);
    }
    .fa {
        top: 63px;
        font-size: 20px;
        font-weight: 100;
        color: #ffffff;
        left: 23px;
    }  
     &:hover{
        text-decoration: none;
        i{
            color: #d05252;
        }

    }
    &.showButton{
        top: -54px;
        right: -49px; 
    }
}

/* Info Button
========================================================*/
.info-icon{
    background: rgba(0, 0, 0, 0.5);
    /* opacity: 0.5; */
    border-radius: 100%;
    width: 100px;
    height: 100px; 
    top: -120px;
    left: -120px; 
    position: absolute;
    display: inline-block !important;
    z-index: 5;
    .transition(all 0.3s ease-out);    
    z-index: 100;
    color: #fff;
    &.showButton{
        top: -54px;
        left: -49px; 
    }
    i{
        position: relative;
        font-size: 50px;
        .transition(all 0.3s ease-out);
    }
    .fa {
        top: 63px;
        font-size: 20px;
        font-weight: 100;
        color: #ffffff;
        right: -63px;
    }  
    &:hover{
        .transition(all 0.3s ease-out);
    }
}
.close-info-icon{
    position: absolute;
    right: 10px;
    top: 10px;
    left: auto;
    .transition(all 0.3s ease-out);
    i{
        color: #fff !important;
        font-size: 30px;
    }
    &:hover>i{
        .transition(all 0.3s ease-out);
    }
}


/* Play Button
========================================================*/

.playButton, .pauseButton{
    left: 50%;
    top: -100px; 
    .opacity(0.6);
    &.showButton{
        transition-delay: 0.3s;
        top: 50%;
    }
}
.playButton{
    margin: -27px -24px 0 0;
}
.pauseButton{
     margin: -27px -24px 0 0;
}
/* end gallery bg*/



@import "mixins.less"; 
@import "tmMixins.less";