.zs-enabled{position:relative}

.zs-enabled .zs-slideshow,.zs-enabled .zs-slides,.zs-enabled  .zs-slide{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;overflow:hidden;
			-webkit-perspective: 1500px; 
    -moz-perspective: 1500px; 
    -o-perspective: 1500px; 
    perspective: 1500px;transform-style: preserve-3d;backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden; }


.zs-enabled .zs-slideshow .zs-slides .zs-slide{background:transparent none no-repeat 50% 50%;background-size:cover;position:absolute;visibility:hidden;opacity:0;

}

/*For Transition types (data-zs-transtype)*/

/*TRANSITION TYPE: ZOOM*/
.zs-zoom{-webkit-transform:scale(1.2, 1.2);-moz-transform:scale(1.2, 1.2);-ms-transform:scale(1.2, 1.2);-o-transform:scale(1.2, 1.2);transform:scale(1.2, 1.2)}

/*TRANSITION TYPE: ROTATE 2D*/
.zs-rotate2d{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20deg);transform:rotate(20deg)}

/*TRANSITION TYPE: ROTATEX 3D*/
.zs-rotateX3d{-webkit-transform:rotateX(120deg);-moz-transform:rotateX(120deg);-ms-transform:rotateX(120deg);-o-transform:rotateX(120deg);transform:rotateX(120deg)}

/*TRANSITION TYPE: ROTATEY 3D*/
.zs-rotateY3d{-webkit-transform:rotateY(120deg);-moz-transform:rotateY(120deg);-ms-transform:rotateY(120deg);-o-transform:rotateY(120deg);transform:rotateY(120deg);-webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    -o-transition: -o-transform 1s; 
    transition: transform 1s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; }

/*TRANSITION TYPE: ROTATEZ 3D*/
.zs-rotateZ3d{-webkit-transform:rotateZ(90deg);-moz-transform:rotateZ(90deg);-ms-transform:rotateZ(90deg);-o-transform:rotateZ(90deg);transform:rotateZ(90deg)}

/*TRANSITION TYPE: MOVE*/
.zs-move{-webkit-transform:translate(50px,100px);-moz-transform:translate(50px,100px);-ms-transform:translate(50px,100px);-o-transform:translate(50px,100px);transform:translate(50px,100px)}

/*TRANSITION TYPE: SKEWX*/
.zs-skewX{-webkit-transform:skewX(20deg);-moz-transform:skewX(20deg);-ms-transform:skewX(20deg);-o-transform:skewX(20deg);transform:skewX(20deg)}

/*TRANSITION TYPE: SKEWY*/
.zs-skewY{-webkit-transform:skewY(20deg);-moz-transform:skewY(20deg);-ms-transform:skewY(20deg);-o-transform:skewY(20deg);transform:skewY(20deg)}


/*TRANSITION TYPE: MATRIX....The matrix method combines all the 2D transform methods into one.The matrix method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.The parameters are as follow:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())*/
.zs-matrix{-webkit-transform:matrix(1, 0, 0.5, 1, 150, 0);-moz-transform:matrix(1, 0, 0.5, 1, 150, 0);-ms-transform:matrix(1, 0, 0.5, 1, 150, 0);-o-transform:matrix(1, 0, 0.5, 1, 150, 0);transform:matrix(1, 0, 0.5, 1, 150, 0)}

/*TRANSITION TYPE: SLIDELTR*/
.zs-slideLTR{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);}

/*TRANSITION TYPE: SLIDERTL*/
.zs-slideRTL{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);}

/*TRANSITION TYPE: SLIDEDOWN*/
.zs-slideDown{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%);}

/*TRANSITION TYPE: SLIDEUP*/
.zs-slideUp{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%);}



/*my custom spinner transition*/
@-webkit-keyframes spinner5 {
    from,15% { -webkit-transform: rotateY(0deg);    }
    /*20%,35%  { -webkit-transform: rotateY(-72deg);  }
    40%,55%  { -webkit-transform: rotateY(-144deg); }
    60%,75%  { -webkit-transform: rotateY(-216deg); }
    80%,95%  { -webkit-transform: rotateY(-288deg); }*/
    to       { -webkit-transform: rotateY(-360deg); }
  }

  @keyframes spinner5 {
    from,15% {
      -moz-transform: rotateY(0);
      -ms-transform: rotateY(0);
      transform: rotateY(0);
    }
    
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }
  
  .zs-spinner {
    -webkit-animation-name: spinner5;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 7s;

    animation-name: spinner5;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration: 7s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }



/*Bounce Transition*/
@-webkit-keyframes bounce { 
            0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
            40% {-webkit-transform: translateY(-30px);} 
            60% {-webkit-transform: translateY(-15px);} 
         } 
         
         @keyframes bounce { 
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
            40% {transform: translateY(-30px);} 
            60% {transform: translateY(-15px);} 
         }
         
         .zs-bounce { 
            -webkit-animation-name: bounce; 
            -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 7s;
	

    animation-name: bounce;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration: 7s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
         }




.zs-stack {
transform-origin: center right;
transform: rotateY(120deg) translateZ(430px) scale(1.9);
transition: transform .6s, opacity .6s, -webkit-filter 2s ease-out;
}



.zs-opac{animation:opac 7s infinite ease-out}@keyframes opac{0%{opacity:0}10%,97%{opacity:1}100%{opacity:0}}



@-webkit-keyframes stzoom {
    0%, 96%   {-webkit-transform: scale(1,1);}
    100% {-webkit-transform: scale(3.8,3.8);}
}
@keyframes stzoom {
    0%, 96% { transform: scale(1,1); }
    100% {transform: scale(3.8,3.8); }
}
.zs-stzoom {
  -webkit-animation: stzoom 7s infinite linear;
  animation: stzoom 7s infinite linear;
}



@keyframes breathe {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes breathe {
  from {
    -webkit-transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
  }
}


.zs-breathe {
  animation: breathe 7s infinite;
  -webkit-animation: breathe 7s infinite;
}



@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  3% {
    transform: scale3d(1.25, 0.75, 1);
  }

  4% {
    transform: scale3d(0.75, 1.25, 1);
  }

  5% {
    transform: scale3d(1.15, 0.85, 1);
  }

  7% {
    transform: scale3d(.95, 1.05, 1);
  }

  9% {
    transform: scale3d(1.05, .95, 1);
  }

  10%,to {
    transform: scale3d(1, 1, 1);
  }
}

.zs-rubberBand {
  animation: rubberBand 7s infinite;
}







@keyframes hanging {
  2% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  4% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  6% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  8% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  10%,to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.zs-hanging {
  transform-origin: top center;
  animation: hanging 7s infinite;
}



@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  6% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  8% {
    transform: translate3d(0, 10px, 0);
  }

  10% {
    transform: translate3d(0, -5px, 0);
  }

  12%,to {
    transform: translate3d(0, 0, 0);
  }
}

.zs-bounceInUp {
  animation: bounceInUp 7s infinite;
}








@keyframes bounceOutLeft {
	from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 1;
    transform: translate3d(2000px, 0, 0);
  }

  6% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  8% {
    transform: translate3d(10px, 0, 0);
  }

  10% {
    transform: translate3d(-5px, 0, 0);
  }

  12% {
    transform: none;
  }
  
	
	
  /*89% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  90% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }*/
}

.zs-bounceOutLeft {
  animation: bounceOutLeft 7s infinite;
  backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
}


/*Transition type ends*/


.zs-enabled .zs-slideshow .zs-slides .zs-slide.active{visibility:visible;opacity:1}

.zs-enabled .zs-slideshow .zs-bullets{position:absolute;z-index:4;bottom:20px;left:0;width:100%;text-align:center}

.zs-enabled .zs-slideshow .zs-bullets .zs-bullet{display:inline-block;cursor:pointer;border:2px solid #ccc;width:14px;height:14px;border-radius:8px;margin:10px;background-color:#4a4a4a}

.zs-enabled .zs-slideshow .zs-bullets .zs-bullet.active{background-color:#ccc}

.zs-enabled .zs-slideshow:after{content:" ";position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:transparent none repeat 0 0}

.zs-enabled.overlay-plain .zs-slideshow:after{background-image:url(../images/plain.png)}

.zs-enabled.overlay-dots .zs-slideshow:after{background-image:url(../images/dots.png)}

inner-content {
			z-index: 99999;
		}