/*

######################################################################

CSS for gpEasy Slider Factory - Inner Element Effects

Author: J. Krausz

Date: 2016-10-22

Version: 1.0.2

######################################################################

*/



/*

 *

 * These classes are meant to be used for ELEMENTS INSIDE slides and NOT for the slides themselves!

 * You can use them for sub-sections if the slides themselves are section wrappers

 * or you can apply them to inner elements using CKEditor/Source

 *

 * .gpSlide         = default state for inactive slides

 * .gpSlide-in      = class during in-transition

 * .gpSlide-active  = class of active slide. applied after in-transition has completed and removed before out-transition starts

 * .gpSlide-out     = class during out-transition

 *

 * Do not use "display:none" for inner element hiding as it might break reponsive height calculations - use visibility:hidden instead.

 * Use opacity if you want to animate visibility.

 *

 * YOU WON'T SEE THESE EFFECTS ON INTERNET EXPLORER < 10

 *

 */





/* -- fade -- */

.gpSlide .innerFx-fade { 

opacity:0; 

-webkit-transition:0.5s ease-out;

transition:0.5s ease-out;

}

.gpSlide-in .innerFx-fade {}

.gpSlide-out .innerFx-fade {}

.gpSlide-active .innerFx-fade { opacity:0.999; }







/* -- nested-fade -- */

.gpSlide .innerFx-nested-fade,

.gpSlide .innerFx-nested-fade * { 

opacity:0; 

-webkit-transition:0.5s ease-out;

transition:0.5s ease-out;

}

.gpSlide .innerFx-nested-fade { transition-delay:0.5s; }

.gpSlide .innerFx-nested-fade *:nth-child(1) { transition-delay:0.75s; }

.gpSlide .innerFx-nested-fade *:nth-child(2) { transition-delay:1s; }

.gpSlide .innerFx-nested-fade *:nth-child(3) { transition-delay:1.25s; }

.gpSlide .innerFx-nested-fade *:nth-child(4) { transition-delay:1.5s; }

.gpSlide .innerFx-nested-fade *:nth-child(5) { transition-delay:1.75s; }

.gpSlide .innerFx-nested-fade *:nth-child(6) { transition-delay:2s; }

.gpSlide .innerFx-nested-fade *:nth-child(7) { transition-delay:2.25s; }

.gpSlide .innerFx-nested-fade *:nth-child(8) { transition-delay:2.5s; }

.gpSlide .innerFx-nested-fade *:nth-child(9) { transition-delay:2.75s; }

.gpSlide .innerFx-nested-fade *:nth-child(10) { transition-delay:3s; }

.gpSlide .innerFx-nested-fade *:nth-child(11) { transition-delay:3.25s; }

.gpSlide .innerFx-nested-fade *:nth-child(12) { transition-delay:3.5s; }



.gpSlide-in .innerFx-nested-fade {}

.gpSlide-out .innerFx-nested-fade {}

.gpSlide-active .innerFx-nested-fade,

.gpSlide-active .innerFx-nested-fade * { 

opacity:0.999; 

}





/* -- toast -- */

.gpSlide .innerFx-toast { 

-ms-transform:translate(0%,200%);

-webkit-transform:translate(0%,200%);

transform:translate(0%,200%);

-webkit-transition:0.5s ease-out;

transition:0.5s ease-out;

}

.gpSlide-in .innerFx-toast {}

.gpSlide-out .innerFx-toast,

.gpSlide-active .innerFx-toast { 

-ms-transform:translate(0%,0%);

-webkit-transform:translate(0%,0%);

transform:translate(0%,0%);

}





/* -- early-toast -- */

.gpSlide .innerFx-early-toast,

.gpSlide-out .innerFx-early-toast { 

-ms-transform:translate(0%,200%);

-webkit-transform:translate(0%,200%);

transform:translate(0%,200%);

-webkit-transition:1s ease-out;

transition:1s ease-out;

}

.gpSlide-in .innerFx-early-toast,

.gpSlide-active .innerFx-early-toast { 

-ms-transform:translate(0%,0%);

-webkit-transform:translate(0%,0%);

transform:translate(0%,0%);

}



/* -- left -- */

.gpSlide .innerFx-left {

-ms-transform:translate(200%,0%);

-webkit-transform:translate(200%,0%);

transform:translate(200%,0%);

-webkit-transition:1s ease-out;

transition:1s ease-out;

}

.gpSlide-in .innerFx-left {}

.gpSlide-out .innerFx-left,

.gpSlide-active .innerFx-left {

-ms-transform:translate(0%,0%);

-webkit-transform:translate(0%,0%);

transform:translate(0%,0%);

}



/* -- right -- */

.gpSlide .innerFx-right {

-ms-transform:translate(-200%,0%);

-webkit-transform:translate(-200%,0%);

transform:translate(-200%,0%);

-webkit-transition:1s ease-out;

transition:1s ease-out;

}

.gpSlide-in .innerFx-right {}

.gpSlide-out .innerFx-right,

.gpSlide-active .innerFx-right {

-ms-transform:translate(0%,0%);

-webkit-transform:translate(0%,0%);

transform:translate(0%,0%);

}