// MAIN COLOR
@GalleryThemeColor: #FF6633;

// THUMBNAIL
@GalleryThumbWidth: 25%;
@GalleryThumbHeight: 200px;
@GalleryThumbMargin: 0 5px 5px;
@GalleryThumbPadding: 10px;
@GalleryThumbColor: #ccc;

// THUBMNAIL TITLE
@GalleryThumbTitleBackground: #000;
@GalleryThumbTitleColor: #fff;
@GalleryThumbTitleFontSize: 14px;
@GalleryThumbTitleFontLineHeight: 20px;
@GalleryThumbTitleFontLetterSpacing: 0px;
@GalleryThumbTitlePadding: 10px 15px;

// HOVER
@GalleryThumbHoverScale: 1.1;
@GalleryThumbHoverIcon: 'zoom.png';
@GalleryThumbHoverIconSize: 130px;

// LOADING LABEL
@GalleryThumbLoadingLabel: 'LOADING';
@GalleryThumbLoadingLabelSize: 14px;
@GalleryThumbLoadingLabelSpacing: 1px;
@GalleryThumbLoadingLabelColor: black;

// PAGINATION TRIGGER
@GalleryPaginatorBackground: #c7c7c7;
@GalleryPaginatorColor: black;
@GalleryPaginatorColorHover: white;
@GalleryPaginatorBackgroundHover: @GalleryThemeColor;
@GalleryPaginatorPadding: 10px 15px;
@GalleryPaginatorFontSize: 15px;
@GalleryPaginatorFontSpacing: 2px;

// GALLERY POPUP
@GalleryPopUpBackground: white;
@GalleryPopUpPadding: 50px;
@GalleryPopUpImageSize: contain;

// NEEDED FUNCTIONS
.transition(@props: all 0.2s ease 0s) {
	-webkit-transition: @props;
	-moz-transition: @props;
	-ms-transition: @props;
	-o-transition: @props;
	transition: @props;
}
.scale(@factor, @y:@factor) {
	-moz-transform: scale(@factor, @y);
	-webkit-transform: scale(@factor, @y);
	-o-transform: scale(@factor, @y);
	-ms-transform: scale(@factor, @y);
	transform: scale(@factor, @y);
}
.translate(@x,@y,@z) {
    -ms-transform: translate(@x, @y);
    -webkit-transform: translate3d(@x, @y, @z);
    -moz-transform: translate3d(@x, @y, @z);
    -ms-transform: translate3d(@x, @y, @z);
    -o-transform: translate3d(@x, @y, @z);
    transform: translate3d(@x, @y, @z);
}
.cover() {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.radius(@rad) {
	-webkit-border-radius: @rad;
	border-radius: @rad;
}
.origin(@x,@y) {
    -ms-transform-origin: @x @y;
    -webkit-transform-origin: @x @y;
    transform-origin: @x @y;
}
.rotate(@radius) {
	-moz-transform: rotate(@radius);
	-webkit-transform: rotate(@radius);
	-o-transform: rotate(@radius);
	-ms-transform: rotate(@radius);
	transform: rotate(@radius);
}


// POPUPBUTTONS
@PopupButtonBackground: @GalleryThemeColor;
@PopupButtonColor: #fff;
@PopupButtonBackgroundHover: @GalleryThemeColor;
@PopupButtonColorHover: #fff;
@PopupButtonSize: 40px;
@PopupButtonRadius: 20px;
@PopupButtonLine: 4px;
@PopupButtonCloseOffset: 20px;
@PopupButtonArrowOffset: 50px;
@GalleryArrowDelay: 1s;

.GalleryButton() {
    position: absolute;
    width: @PopupButtonSize;
    height: @PopupButtonSize;
    .transition(all 0.4s ease);
    cursor: pointer;
    .radius(@PopupButtonRadius);
    .origin(50%,50%);
    background: @PopupButtonBackground;
    &:hover {
        background: @PopupButtonBackgroundHover;
        &:before, &:after {
            background: @PopupButtonColorHover;
        }
    }
    &:before, &:after {
        position: absolute;
        content: '';
        background: @PopupButtonColor;
        height: @PopupButtonLine;
        .radius(@PopupButtonLine / 2);
        .rotate(45deg);
    }
    &:after {
        .rotate(-45deg);
    }
}
.ArrowTransition() {
    -webkit-transition: all 0.3s ease, left 0.5s ease, right 0.5s ease;
	-moz-transition: all 0.3s ease, left 0.5s ease, right 0.5s ease;
	-ms-transition: all 0.3s ease, left 0.5s ease, right 0.5s ease;
	-o-transition: all 0.3s ease, left 0.5s ease, right 0.5s ease;
	transition: all 0.3s ease, left 0.5s ease, right 0.5s ease;
    &.active {
        -webkit-transition: all 0.3s ease, left 0.5s ease @GalleryArrowDelay, right 0.5s ease @GalleryArrowDelay;
        -moz-transition: all 0.3s ease, left 0.5s ease @GalleryArrowDelay, right 0.5s ease @GalleryArrowDelay;
        -ms-transition: all 0.3s ease, left 0.5s ease @GalleryArrowDelay, right 0.5s ease @GalleryArrowDelay;
        -o-transition: all 0.3s ease, left 0.5s ease @GalleryArrowDelay, right 0.5s ease @GalleryArrowDelay;
        transition: all 0.3s ease, left 0.5s ease @GalleryArrowDelay, right 0.5s ease @GalleryArrowDelay;
    }
}

.GalleryArrow() {
    .GalleryButton;
    .ArrowTransition;
    top: 50%;
    margin-top: @PopupButtonSize / 2;
    &:before, &:after {
        top: ~"calc(50% - @{PopupButtonLine} / 2 - 1px)";
        left: 33%;
        width: 34%;
        .origin(0,50%);
    }
    &:after {
        top: ~"calc(50% - @{PopupButtonLine} / 2 + 1px)";
    }
    &.ArrowLeft {
        left: @PopupButtonSize * -1px;
        &.active {
            left: @PopupButtonArrowOffset;
        }
    }
    &.ArrowRight {
        right: @PopupButtonSize * -1px;;
        .rotate(180deg);
        &.active {
            right: @PopupButtonArrowOffset;
        }
    }
}

// CLOSE BUTTON
.GalleryPopUpClose() {
    .GalleryButton;
    top: @PopupButtonCloseOffset;
    right: @PopupButtonCloseOffset;
    &:hover {
        .rotate(360deg);
    }
    &:before, &:after {
        width: 50%;
        top: 50%;
        left: 25%;
        margin-top: (-1px * @PopupButtonLine / 2);
        .origin(50%,50%);
    }
}

// NEW GALLERY APPROACH CONTAINER MARKUP

.MZGalleryContainer {
    line-height: 0;
    & .MZGalleryImage {
        width: @GalleryThumbWidth;
        height: @GalleryThumbHeight;
        display: inline-block;
        position: relative;
        overflow: hidden;
        .transition(height 0.4s ease);
        margin: @GalleryThumbMargin;
        padding: @GalleryThumbPadding;
        cursor: pointer;
        background-color: @GalleryThumbColor;
        &:before {
            content: @GalleryThumbLoadingLabel;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: @GalleryThumbLoadingLabelSize;
            line-height: @GalleryThumbHeight;
            color: @GalleryThumbLoadingLabelColor;
            letter-spacing: @GalleryThumbLoadingLabelSpacing;
            z-index: 1;
        }
        &:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            content: '';
            background: url(@GalleryThumbHoverIcon) center center no-repeat;
            z-index: 3;
            background-size: @GalleryThumbHoverIconSize auto;
            .transition(all 0.4s ease);
            opacity: 0;
        }
        &:hover {
            & .inner {
                .scale(@GalleryThumbHoverScale);
            }
            &:after {
                opacity: 1;
            }
            & .GalleryImageTitle {
                .translate(0,0,0);
            }
        }
        &.not-loaded {
            height: 0;
            margin: 0;
            display: none;
        }
        & .inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            .cover;
            opacity: 1;
            .transition(all 0.4s ease);
            z-index: 2;
            &.not-loaded {
                opacity: 0;
            }
        }
        &.portrait {
            & .inner {
                background-position: center 20%;
            }
        }
        
        // THUMBNAIL TITLE CSS
        & .GalleryImageTitle {
            z-index: 3;
            position: absolute;
            left: 0;
            width: 100%;
            color: @GalleryThumbTitleColor;
            bottom: 0;
            .translate(0,100%,0);
            background: @GalleryThumbTitleBackground;
            padding: @GalleryThumbTitlePadding;
            .transition(all 0.4s ease);
            font-size: @GalleryThumbTitleFontSize;
            line-height: @GalleryThumbTitleFontLineHeight;
            letter-spacing: @GalleryThumbTitleFontLetterSpacing;
        }
    }
    & .paginator {
        display: block;
        margin-top: 35px;
        text-align: center;
        margin-bottom: 60px;
        & span {
            background-color: @GalleryPaginatorBackground;
            color: @GalleryPaginatorColor;
            cursor: pointer;
            padding: @GalleryPaginatorPadding;
            font-size: @GalleryPaginatorFontSize;
            letter-spacing: @GalleryPaginatorFontSpacing;
            .transition(all 0.4s ease);
            &:hover {
                color: @GalleryPaginatorColorHover;
                background-color: @GalleryPaginatorBackgroundHover;
            }
        }
    }
}


// NEW GALLERY APPROACH POPUP MARKUP
.mzPopGallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: @GalleryPopUpBackground;
    -webkit-animation: fadeIn 1.0s ease;
    -moz-animation: fadeIn 1.0s ease;
    -ms-animation: fadeIn 1.0s ease;
    -o-animation: fadeIn 1.0s ease;
    animation: fadeIn 1.0s ease;
    z-index: 10000;
    & > .wrap {
        overflow: hidden;
        & .close {
            .GalleryPopUpClose;
        }
        & .GalleryArrow {
            .GalleryArrow;
        }
        & .GalleryCounter {
            .GalleryCounter;
        }
        & .newpreloader {
            position: absolute;
            width: 38px;
            height: 38px;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -25px;
            z-index: -1;
            & .wBall {
                position: absolute;
                width: 36px;
                height: 36px;
                opacity: 0;
                .rotate(225deg);
                animation: orbit 3.9325s infinite;
                -o-animation: orbit 3.9325s infinite;
                -ms-animation: orbit 3.9325s infinite;
                -webkit-animation: orbit 3.9325s infinite;
                -moz-animation: orbit 3.9325s infinite;
                & .wInnerBall{
                    position: absolute;
                    width: 6px;
                    height: 6px;
                    background: @GalleryThemeColor;
                    left:0px;
                    top:0px;
                    border-radius: 6px;
                }
                &#wBall_1 {
                    .preloaderDelay(0.856s);
                }
                &#wBall_2 {
                    .preloaderDelay(0.173s);
                }
                &#wBall_3 {
                    .preloaderDelay(0.3465s);
                }
                &#wBall_4 {
                    .preloaderDelay(0.5095s);
                }
                &#wBall_5 {
                    .preloaderDelay(0.693s);
                }
            }
        }
        & .imageContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: @GalleryPopUpPadding;
            display: none;
            & .inner {
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: @GalleryPopUpImageSize;
            }
            & .ImageTitle {
                .PopupTitle();
            }
        }
    }
}

@PopupImageTitleBackground: @GalleryThemeColor;
@PopupImageTitleColor: #fff;
@PopupImageTitleFontSize: 17px;
@PopupImageTitleFontSpacing: 1px;
@PopupImageTitlePadding: 20px;
@PopupImageTitleTopOffset: 0;
@PopupImageCounterBottomOffset: 0;

.PopupLabelFormat() {
    font-size: @PopupImageTitleFontSize;
    letter-spacing: @PopupImageTitleFontSpacing;
    padding: @PopupImageTitlePadding;
    color: @PopupImageTitleColor;
    background: @PopupImageTitleBackground;
    text-align: center;
    position: absolute;
    left: 50%;
    .transition(all 0.5s ease);
    &.active {
        .translate(-50%,0,0);
        .transition(all 0.5s ease @GalleryArrowDelay);
    }
}

.PopupTitle() {
    .PopupLabelFormat;
    top: 0;
    .translate(-50%,-100%,0);
    &.active {
        top: @PopupImageTitleTopOffset;
    }
}
.GalleryCounter() {
    .PopupLabelFormat;
    bottom: 0;
    .translate(-50%,100%,0);
    & span {
        padding-right: 5px;
        margin-right: 5px;
        border-right: 2px solid @PopupImageTitleColor;
    }
    &.active {
        bottom: @PopupImageCounterBottomOffset;
    }
}


.preloaderDelay(@delay) {
    animation-delay: @delay;
    -o-animation-delay: @delay;
    -ms-animation-delay: @delay;
    -webkit-animation-delay: @delay;
    -moz-animation-delay: @delay;
}

// PRELOADER ANIMATION
@keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		transform: rotate(180deg);
		animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		transform: rotate(300deg);
		animation-timing-function: linear;
		origin:0%;
	}

	30% {
		opacity: 1;
		transform:rotate(410deg);
		animation-timing-function: ease-in-out;
		origin:7%;
	}

	39% {
		opacity: 1;
		transform: rotate(645deg);
		animation-timing-function: linear;
		origin:30%;
	}

	70% {
		opacity: 1;
		transform: rotate(770deg);
		animation-timing-function: ease-out;
		origin:39%;
	}

	75% {
		opacity: 1;
		transform: rotate(900deg);
		animation-timing-function: ease-out;
		origin:70%;
	}

	76% {
	opacity: 0;
		transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		transform: rotate(900deg);
	}
}
@-o-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-o-transform: rotate(180deg);
		-o-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-o-transform: rotate(300deg);
		-o-animation-timing-function: linear;
		-o-origin:0%;
	}

	30% {
		opacity: 1;
		-o-transform:rotate(410deg);
		-o-animation-timing-function: ease-in-out;
		-o-origin:7%;
	}

	39% {
		opacity: 1;
		-o-transform: rotate(645deg);
		-o-animation-timing-function: linear;
		-o-origin:30%;
	}

	70% {
		opacity: 1;
		-o-transform: rotate(770deg);
		-o-animation-timing-function: ease-out;
		-o-origin:39%;
	}

	75% {
		opacity: 1;
		-o-transform: rotate(900deg);
		-o-animation-timing-function: ease-out;
		-o-origin:70%;
	}

	76% {
	opacity: 0;
		-o-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-o-transform: rotate(900deg);
	}
}
@-ms-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-ms-transform: rotate(180deg);
		-ms-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-ms-transform: rotate(300deg);
		-ms-animation-timing-function: linear;
		-ms-origin:0%;
	}

	30% {
		opacity: 1;
		-ms-transform:rotate(410deg);
		-ms-animation-timing-function: ease-in-out;
		-ms-origin:7%;
	}

	39% {
		opacity: 1;
		-ms-transform: rotate(645deg);
		-ms-animation-timing-function: linear;
		-ms-origin:30%;
	}

	70% {
		opacity: 1;
		-ms-transform: rotate(770deg);
		-ms-animation-timing-function: ease-out;
		-ms-origin:39%;
	}

	75% {
		opacity: 1;
		-ms-transform: rotate(900deg);
		-ms-animation-timing-function: ease-out;
		-ms-origin:70%;
	}

	76% {
	opacity: 0;
		-ms-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-ms-transform: rotate(900deg);
	}
}
@-webkit-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-webkit-transform: rotate(180deg);
		-webkit-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-webkit-transform: rotate(300deg);
		-webkit-animation-timing-function: linear;
		-webkit-origin:0%;
	}

	30% {
		opacity: 1;
		-webkit-transform:rotate(410deg);
		-webkit-animation-timing-function: ease-in-out;
		-webkit-origin:7%;
	}

	39% {
		opacity: 1;
		-webkit-transform: rotate(645deg);
		-webkit-animation-timing-function: linear;
		-webkit-origin:30%;
	}

	70% {
		opacity: 1;
		-webkit-transform: rotate(770deg);
		-webkit-animation-timing-function: ease-out;
		-webkit-origin:39%;
	}

	75% {
		opacity: 1;
		-webkit-transform: rotate(900deg);
		-webkit-animation-timing-function: ease-out;
		-webkit-origin:70%;
	}

	76% {
	opacity: 0;
		-webkit-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-webkit-transform: rotate(900deg);
	}
}
@-moz-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-moz-transform: rotate(180deg);
		-moz-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-moz-transform: rotate(300deg);
		-moz-animation-timing-function: linear;
		-moz-origin:0%;
	}

	30% {
		opacity: 1;
		-moz-transform:rotate(410deg);
		-moz-animation-timing-function: ease-in-out;
		-moz-origin:7%;
	}

	39% {
		opacity: 1;
		-moz-transform: rotate(645deg);
		-moz-animation-timing-function: linear;
		-moz-origin:30%;
	}

	70% {
		opacity: 1;
		-moz-transform: rotate(770deg);
		-moz-animation-timing-function: ease-out;
		-moz-origin:39%;
	}

	75% {
		opacity: 1;
		-moz-transform: rotate(900deg);
		-moz-animation-timing-function: ease-out;
		-moz-origin:70%;
	}

	76% {
	opacity: 0;
		-moz-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-moz-transform: rotate(900deg);
	}
}