/* DNP SLIDER
* 
* License: Commercial
* Copyright: Dan Partac
* 
*/

/* sequence status keys */
@-webkit-keyframes paused { 0% { width: 100%; opacity: 0; } 100% { width: 100%; opacity: .7; } }
@keyframes paused { 0% { width: 100%; opacity: 0; } 100% { width: 100%;  opacity: .7; } }

@-webkit-keyframes status-bar { 0% { width: 0; opacity: 0.2 } 100% { width: 100%; opacity: 1 } } 
@keyframes status-bar { 0% { width: 0; opacity: 0.2 } 100% { width: 100%; opacity: 1 } } 


/* prepare */
[data-animation*="dnpfade"],
[data-animation*="zoom"],
[data-animation*="flip"],
[data-animation*="fade"],
[data-animation*="slide"],
[data-animation*="rotate"],
[data-animation*="roll"],
[data-animation*="robotic"],
[data-animation*="stage"] { opacity: 0; filter: alpha(opacity=0) }

/* overlap animations */
[data-animation*="overlap"] { position: absolute !important; top: 0 }
[data-animation*="overlap"]:first-child { position: relative !important; display: inline-block }

/* sequence animation */
[data-animation*="flipX"] { -webkit-transform:perspective(400px) rotateX(90deg); transform:perspective(400px) rotateX(90deg); }
.active-slide [data-animation*="flipX"] { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-transform:perspective(400px) rotateX(0deg); transform:perspective(400px) rotateX(0deg); }

[data-animation*="flipY"] { -webkit-transform:perspective(400px) rotateY(90deg); transform:perspective(400px) rotateY(90deg); }
.active-slide [data-animation*="flipY"] { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-transform:perspective(400px) rotateY(0deg); transform:perspective(400px) rotateY(0deg); }

[data-animation*="dnpfade"] {opacity:0;}
.active-slide [data-animation*="dnpfade"] {opacity:1;}

[data-animation*="fadeUp"] { -webkit-transform:translateY(50%); transform:translateY(50%); }
.active-slide [data-animation*="fadeUp"] { -webkit-transform:translateY(0); transform:translateY(0); }

[data-animation*="fadeDown"] { -webkit-transform:translateY(-50%); transform:translateY(-50%); }
.active-slide [data-animation*="fadeDown"] { -webkit-transform:translateY(0); transform:translateY(0); }

[data-animation*="fadeLeft"] { -webkit-transform:translateX(50%); transform:translateX(50%); }
.active-slide [data-animation*="fadeLeft"] { -webkit-transform:translateX(0%); transform:translateX(0%); }

[data-animation*="fadeRight"] { -webkit-transform:translateX(-50%); transform:translateX(-50%); }
.active-slide [data-animation*="fadeRight"] { -webkit-transform:translateX(0%); transform:translateX(0%); }

[data-animation*="slideUp"] { -webkit-transform:translateY(200%); transform:translateY(200%); }
.active-slide [data-animation*="slideUp"] { -webkit-transform:translateY(0); transform:translateY(0); }

[data-animation*="slideDown"] { -webkit-transform:translateY(-200%); transform:translateY(-200%); }
.active-slide [data-animation*="slideDown"] { -webkit-transform:translateY(0); transform:translateY(0); }

[data-animation*="slideLeft"]{ -webkit-transform:translateX(200%); transform:translateX(200%); }
.active-slide [data-animation*="slideLeft"] { -webkit-transform:translateX(0%); transform:translateX(0%); }

[data-animation*="slideRight"] { -webkit-transform:translateX(-200%); transform:translateX(-200%); }
.active-slide [data-animation*="slideRight"] { -webkit-transform:translateX(0%); transform:translateX(0%); }

[data-animation*="zoomIn"] { -webkit-transform:scale(.3); transform:scale(.3); }
.active-slide [data-animation*="zoomIn"] { -webkit-transform:scale(1); transform:scale(1); }

[data-animation*="zoomInUp"] { -webkit-transform:translateY(50%) scale(.3); transform:translateY(50%) scale(.3); }
.active-slide [data-animation*="zoomInUp"] { -webkit-transform:translateY(0) scale(1); transform:translateY(0) scale(1); }

[data-animation*="zoomInDown"] { -webkit-transform:translateY(-50%) scale(.3); transform:translateY(-50%) scale(.3); }
.active-slide [data-animation*="zoomInDown"] { -webkit-transform:translateY(0) scale(1); transform:translateY(0) scale(1); }

[data-animation*="zoomInRight"] { -webkit-transform:translateX(-50%) scale(.3); transform:translateX(-50%) scale(.3); }
.active-slide [data-animation*="zoomInRight"] { -webkit-transform:translateX(0) scale(1); transform:translateX(0) scale(1); }

[data-animation*="zoomInLeft"] { -webkit-transform:translateX(50%) scale(.3); transform:translateX(50%) scale(.3); }
.active-slide [data-animation*="zoomInLeft"] { -webkit-transform:translateX(0) scale(1); transform:translateX(0) scale(1); }

[data-animation*="zoomOut"] { -webkit-transform:scale(1.5); transform:scale(1.5); }
.active-slide [data-animation*="zoomOut"] { -webkit-transform:scale(1); transform:scale(1); }

[data-animation*="zoomOutDown"] { -webkit-transform:translateY(50%) scale(1.5); transform:translateY(50%) scale(1.5); }
.active-slide [data-animation*="zoomOutDown"] { -webkit-transform:translateY(0) scale(1); transform:translateY(0) scale(1); }

[data-animation*="zoomOutUp"] { -webkit-transform:translateY(-50%) scale(1.5); transform:translateY(-50%) scale(1.5); }
.active-slide [data-animation*="zoomOutUp"] { -webkit-transform:translateY(0) scale(1); transform:translateY(0) scale(1); }

[data-animation*="zoomOutRight"] { -webkit-transform:translateX(-50%) scale(1.5); transform:translateX(-50%) scale(1.5); }
.active-slide [data-animation*="zoomOutRight"] { -webkit-transform:translateX(0) scale(1); transform:translateX(0) scale(1); }

[data-animation*="zoomOutLeft"] { -webkit-transform:translateX(50%) scale(1.5); transform:translateX(50%) scale(1.5); }
.active-slide [data-animation*="zoomOutLeft"] { -webkit-transform:translateX(0) scale(1); transform:translateX(0) scale(1); }

.rotate, [data-animation*="rotate"] { -webkit-transform-origin:center center; transform-origin:center center; -webkit-transform:rotate(-200deg); transform:rotate(-200deg); }
.active-slide .rotate, .active-slide [data-animation*="rotate"] { -webkit-transform-origin:center center; transform-origin:center center; -webkit-transform:rotate(0); transform:rotate(0); }

[data-animation*="rotateUpLeft"] { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate(90deg); transform:rotate(90deg); }
.active-slide [data-animation*="rotateUpLeft"] { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate(0); transform:rotate(0); }

[data-animation*="rotateDownLeft"] { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); }
.active-slide [data-animation*="rotateDownLeft"] { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate(0); transform:rotate(0); }

[data-animation*="rotateUpRight"] { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); }
.active-slide [data-animation*="rotateUpRight"] { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(0); transform:rotate(0); }

[data-animation*="rotateDownRight"] { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(90deg); transform:rotate(90deg); }
.active-slide [data-animation*="rotateDownRight"] { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(0); transform:rotate(0); }

[data-animation*="lightSpeed"]{ -webkit-transform:translateX(100%) skewX(-30deg); transform:translateX(100%) skewX(-30deg); }
.active-slide [data-animation*="lightSpeed"] { -webkit-transform:translateX(0%) skewX(0deg); transform:translateX(0%) skewX(0deg); }

[data-animation*="roll"]{ -webkit-transform:translateX(-100%) rotate(-120deg); transform:translateX(-100%) rotate(-120deg); }
.active-slide [data-animation*="roll"] { -webkit-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg); }

[data-animation*="robotic"] { display: inline-block; position: relative; }
[data-animation*="stage"] { display: inline-block; position: absolute !important }

.active-slide [data-animation*="roboticTopLeft"] { -webkit-animation-name: roboticTopLeft; animation-name: roboticTopLeft; }
.active-slide [data-animation*="roboticBottomLeft"] { -webkit-animation-name: roboticBottomLeft; animation-name: roboticBottomLeft; }
.active-slide [data-animation*="roboticTopRight"] { -webkit-animation-name: roboticTopRight; animation-name: roboticTopRight; }
.active-slide [data-animation*="roboticBottomRight"] { -webkit-animation-name: roboticBottomRight; animation-name: roboticBottomRight; }

@keyframes roboticTopLeft { 0% { opacity: 0; left: -100%; top: -50%; } 75% { opacity: 1; left: 0; top:-50%; } 100% { opacity: 1; left: 0; top: 0; } }
@-webkit-keyframes roboticTopLeft { 0% { opacity: 0; -webkit-transform: translateX(-100%) translateY(-50%); } 75% { opacity: 1; -webkit-transform: translateX(0) translateY(-50%); } 100% { opacity: 1; -webkit-transform: translateX(0) translateY(0); } }

@keyframes roboticBottomLeft { 0% { opacity: 0; left: -100%; top:50%; } 75% { opacity: 1; left: 0; top:50%; } 100% { opacity: 1; left: 0; top: 0; } }
@-webkit-keyframes roboticBottomLeft { 0% { opacity: 0; -webkit-transform: translateX(-100%) translateY(50%); } 75% { opacity: 1; -webkit-transform: translateX(0) translateY(50%); } 100% { opacity: 1; -webkit-transform: translateX(0) translateY(0); } }

@keyframes roboticTopRight { 0% { opacity: 0; left: 100%; top: -50%; } 75% { opacity: 1; left: 0; top: -50%; } 100% { opacity: 1; left: 0; top: 0; } }
@-webkit-keyframes roboticTopRight { 0% { opacity: 0; -webkit-transform: translateX(100%) translateY(-50%); } 75% { opacity: 1; -webkit-transform: translateX(0) translateY(-50%); } 100% { opacity: 1; -webkit-transform: translateX(0) translateY(0); } }

@keyframes roboticBottomRight {	0% { opacity: 0; left: 100%; top: 50%; } 75% { opacity: 1; left: 0; top: 50%; } 100% { opacity: 1; left: 0; top: 0; } }
@-webkit-keyframes roboticBottomRight {	0% { opacity: 0; -webkit-transform: translateX(100%) translateY(50%); } 75% { opacity: 1; -webkit-transform: translateX(0) translateY(50%); } 100% { opacity: 1; -webkit-transform: translateX(0) translateY(0); } }

[data-animation*="stage"],
[data-animation*="robotic"] {
	animation-iteration-count: 1; -webkit-animation-iteration-count: 1; 
	animation-direction: normal; -webkit-animation-direction: normal; 
	animation-play-state: running; -webkit-animation-play-state: running; 
	 -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
	animation-timing-function: ease-out !important; -webkit-animation-timing-function: ease-out !important;
}

.active-slide [data-animation*="stageRight"] { -webkit-animation-name: stageRight; animation-name: stageRight;  }
.active-slide [data-animation*="stageLeft"] { -webkit-animation-name: stageLeft; animation-name: stageLeft; }
.active-slide [data-animation*="stageTop"] { -webkit-animation-name: stageTop; animation-name: stageTop; }
.active-slide [data-animation*="stageBottom"] { -webkit-animation-name: stageBottom; animation-name: stageBottom; }

.browserIE8 [data-animation*="stageTop"],
.browserIE8 [data-animation*="stageBottom"],
.browserIE8 [data-animation*="stageLeft"],
.browserIE8 [data-animation*="stageRight"],
.browserIE9 [data-animation*="stageTop"],
.browserIE9 [data-animation*="stageBottom"],
.browserIE9 [data-animation*="stageLeft"],
.browserIE9 [data-animation*="stageRight"] { display: none }

@keyframes stageLeft { 0% { opacity: 0; left: -100%; } 20% { opacity: 1; left: -2.5%; } 80% { opacity: 1; left: 2.5%; } 100% { opacity: 0; left: 1000%; } }
@-webkit-keyframes stageLeft { 0% { opacity: 0; left: -100%; } 20% { opacity: 1; left: -2.5%;  } 80% { opacity: 1; left: 2.5%; } 100% { opacity: 0; left: 1000%; } }

@keyframes stageRight { 0% { opacity: 0; left: 100%; } 20% { opacity: 1; left: 2.5%; } 80% { opacity: 1; left: -2.5% } 100% { opacity: 0; left: -1000%; } }
@-webkit-keyframes stageRight { 0% { opacity: 0; left: 100%; } 20% { opacity: 1; left: 2.5%; } 80% { opacity: 1; left: -2.5% } 100% { opacity: 0; left: -1000%;  } }

@keyframes stageTop { 0% {  opacity: 0; top: 100%; } 20% { opacity: 1; top: 2.5%; } 80% { opacity: 1; top: -2.5%; } 100% { opacity: 0; top: -1000%; } }
@-webkit-keyframes stageTop { 0% { opacity: 0; top: -100%; } 20% { opacity: 1; top: -2.5%; } 80% { opacity: 1; top: 2.5%; } 100% { opacity: 0; top: 1000%; } }

@keyframes stageBottom { 0% { opacity: 0; top: 1000%; } 20% { opacity: 1; top: 2.5%; } 80% { opacity: 1; top: -2.5%; } 100% { opacity: 0; top: -1000%; } }
@-webkit-keyframes stageBottom { 0% { opacity: 0; top: 100%; } 20% { opacity: 1; top: 2.5%; } 80% { opacity: 1; top: -2.5%; } 100% { opacity: 0; top: -1000%; } }




/* opacity */
.active-slide [data-animation*="dnpfade"],
.active-slide [data-animation*="zoom"], 
.active-slide [data-animation*="flip"],
.active-slide [data-animation*="fade"],  
.active-slide [data-animation*="rotate"], 
.active-slide [data-animation*="slide"], 
.active-slide [data-animation*="roll"],
.active-slide [data-animation*="robotic"],
.active-slide [data-animation*="stage"] {
	opacity: 1; filter: alpha(opacity=100)
}

/* easing */
.linear {
-webkit-transition-timing-function: linear; transition-timing-function: linear;
-webkit-animation-timing-function: linear; animation-timing-function: linear;
}
.ease {
-webkit-transition-timing-function: ease; transition-timing-function: ease;
-webkit-animation-timing-function: ease; animation-timing-function: ease;
}
.ease-in {
-webkit-transition-timing-function: ease-in; transition-timing-function: ease-in;
-webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;
}
.ease-out {
-webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
-webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;
}
.ease-in-out {
-webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
}
.ease-in-circ {
-webkit-transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335); transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
-webkit-animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335); animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
}
.ease-out-circ {
-webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
.ease-in-out-circ {
-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); animation-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
.ease-in-expo {
-webkit-transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035); transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
-webkit-animation-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035); animation-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
.ease-out-expo {
-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.ease-in-out-expo {
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
}
.ease-in-back {
-webkit-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045); transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
-webkit-animation-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045); animation-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
}
.ease-out-back {
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
.ease-in-out-back {
-webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
-webkit-animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
}