%[if edit]% #%id% .effects-preview{background:#4966b7;color:white;padding:3px 0}#%id% .effects-preview i.fa{font-size:1.6rem}#%id% .effects-preview .design-note{margin-left:30px}#%parentId% .s-pro .com_joeworkman_stacks_foundation_clearing_stack{padding-top:16px}#%parentId% .s-pro .com_joeworkman_stacks_foundation_clearing_stack::before{position:absolute;top:0;left:0;z-index:10;content:"NOTE: You cannot use the animations when a section contains Clearing Gallery<br>Remove the animate child from this SectionsPro";background:red;color:white;font-size:16px;padding:6px 3px;font-weight:bold}%[endif]% %[if!edit]% #%parentId% .s-box-content>.keyframes-target.pre-animate{display:%id=preKeyHidden%}%[if %("%id=motionEffect%"!= "motion-none")%]% #%parentId%>.s-pro.animate-%id%>.shear-wrapper>.shear-inner,#%parentId%>.s-pro[class*="eff-"]>.shear-wrapper>.shear-inner{position:relative;%[if!%id=allowOverflow%]% overflow:hidden;%[endif]% border-radius:0!important;-webkit-box-shadow:none!important;box-shadow:none!important}#%parentId%>.s-pro.animate-%id%>.shear-wrapper>.shear-inner>.top-edge,#%parentId%>.s-pro.animate-%id%>.shear-wrapper>.shear-inner.bot-edge,#%parentId%>.s-pro[class*="eff-"]>.shear-wrapper>.shear-inner>.top-edge,#%parentId%>.s-pro[class*="eff-"]>.shear-wrapper>.shear-inner.bot-edge{display:none}#%parentId%>.s-pro.animate-%id%>.shear-wrapper>.shear-inner::before,#%parentId%>.s-pro.animate-%id%>.shear-wrapper>.shear-inner::after,#%parentId%>.s-pro[class*="eff-"]>.shear-wrapper>.shear-inner::before,#%parentId%>.s-pro[class*="eff-"]>.shear-wrapper>.shear-inner::after{border-radius:0!important;-webkit-box-shadow:none!important;box-shadow:none!important}%[endif]% %[if %("%id=applyTo%" == ".section-box-custom")%]% %[if %(%("%id=startOn%" == "hover")% || %("%id=startOn%" == "elementHover")%)%]% #%parentId%>.s-pro.pre-hover .section-box-custom-%id=boxID%{-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transition-delay:0ms;transition-delay:0ms}%[else]% %[if %("%id=startOn%" == "click")%]% #%parentId%>.s-pro.pre-hover .section-box-custom-%id=boxID%{-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transition-delay:0ms;transition-delay:0ms}%[else]% #%parentId%>.s-pro[class*="pre-eff-"] .section-box-custom-%id=boxID%{-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transition-delay:0ms;transition-delay:0ms}%[endif]% %[endif]% #%parentId%>.s-pro .section-box-custom-%id=boxID%{-webkit-transition-duration:%[if %id=advTiming%]% %id=animOutTime%ms %[else]% %id=animTime%ms %[endif]%;transition-duration:%[if %id=advTiming%]% %id=animOutTime%ms %[else]% %id=animTime%ms %[endif]%;-webkit-transition-delay:%[if %id=advTiming%]% %id=outDelay%ms %[else]% %id=animDelay%ms %[endif]%;transition-delay:%[if %id=advTiming%]% %id=outDelay%ms %[else]% %id=animDelay%ms %[endif]%;-webkit-transition-timing-function:%[if %id=advTiming%]% %id=outEaseType% %[else]% %id=easeType% %[endif]%;transition-timing-function:%[if %id=advTiming%]% %id=outEaseType% %[else]% %id=easeType% %[endif]%}#%parentId%>.s-pro.animate-%id% .section-box-custom-%id=boxID%{-webkit-transition-duration:%id=animTime%ms;transition-duration:%id=animTime%ms;-webkit-transition-delay:%id=animDelay%ms;transition-delay:%id=animDelay%ms;-webkit-transition-timing-function:%id=easeType%;transition-timing-function:%id=easeType%}%[if %("%id=motionEffect%" == "motion-none")%]% %[if %("%id=effect%" == "eff-opacity")%]% #%parentId%>.s-pro .section-box-custom-%id=boxID%{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transform:translateZ(0);transform:translateZ(0)}%[else]% #%parentId%>.s-pro .section-box-custom-%id=boxID%{-webkit-transition-property:filter;transition-property:-webkit-filter;transition-property:filter;transition-property:filter,-webkit-filter;-webkit-transition-property:-webkit-filter;-webkit-transform:translateZ(0);transform:translateZ(0)}%[endif]% %[else]% %[if %("%id=effect%" == "eff-no-filter")%]% #%parentId%>.s-pro .section-box-custom-%id=boxID%{-webkit-transition-property:transform;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}%[else]% %[if %("%id=effect%" == "eff-opacity")%]% #%parentId%>.s-pro .section-box-custom-%id=boxID%{-webkit-transition-property:transform,opacity;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform}
%[else]% #%parentId%>.s-pro .section-box-custom-%id=boxID%{-webkit-transition-property:transform,filter;-webkit-transition-property:-webkit-transform,-webkit-filter;transition-property:-webkit-transform,-webkit-filter;transition-property:transform,filter;transition-property:transform,filter,-webkit-transform,-webkit-filter;-webkit-transition-property:transform,-webkit-filter}%[endif]% %[endif]% %[endif]% %[if %("%id=motionEffect%" == "motion-3d")%]% #%parentId%>.s-pro .section-box-custom-%id=boxID%{-webkit-transform:scaleX(%id=scale[0]%) scaleY(%id=scaleY[0]%) scaleZ(%id=scaleZ[0]%) rotateX(%id=rotate[0]%deg) rotateY(%id=rotateY[0]%deg) rotateZ(%id=rotateZ[0]%deg) skew(%id=skewX[0]%deg,%id=skewY[0]%deg) translate3d(%id=shiftX[0]%%id=shiftUnits%,%id=shiftY[0]%%id=shiftUnits%,%id=shiftZ[0]%px);transform:scaleX(%id=scale[0]%) scaleY(%id=scaleY[0]%) scaleZ(%id=scaleZ[0]%) rotateX(%id=rotate[0]%deg) rotateY(%id=rotateY[0]%deg) rotateZ(%id=rotateZ[0]%deg) skew(%id=skewX[0]%deg,%id=skewY[0]%deg) translate3d(%id=shiftX[0]%%id=shiftUnits%,%id=shiftY[0]%%id=shiftUnits%,%id=shiftZ[0]%px);-webkit-transform-origin:%id=focalPoint[0]%% %id=focalPoint[1]%%;transform-origin:%id=focalPoint[0]%% %id=focalPoint[1]%%}#%parentId%>.s-pro.animate-%id% .section-box-custom-%id=boxID%{-webkit-transform:scaleX(%id=scale[1]%) scaleY(%id=scaleY[1]%) scaleZ(%id=scaleZ[1]%) rotateX(%id=rotate[1]%deg) rotateY(%id=rotateY[1]%deg) rotateZ(%id=rotateZ[1]%deg) skew(%id=skewX[1]%deg,%id=skewY[1]%deg) translate3d(%id=shiftX[1]%%id=shiftUnits%,%id=shiftY[1]%%id=shiftUnits%,%id=shiftZ[1]%px);transform:scaleX(%id=scale[1]%) scaleY(%id=scaleY[1]%) scaleZ(%id=scaleZ[1]%) rotateX(%id=rotate[1]%deg) rotateY(%id=rotateY[1]%deg) rotateZ(%id=rotateZ[1]%deg) skew(%id=skewX[1]%deg,%id=skewY[1]%deg) translate3d(%id=shiftX[1]%%id=shiftUnits%,%id=shiftY[1]%%id=shiftUnits%,%id=shiftZ[1]%px)}%[endif]% %[if %("%id=effect%" == "eff-opacity")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-opacity .section-box-custom-%id=boxID%{opacity:%id=opacityChange[0]%}#%parentId%>.s-pro.animate-%id%.eff-opacity .section-box-custom-%id=boxID%{opacity:%id=opacityChange[1]%}%[else]% %[if %("%id=effect%" == "eff-hue-rotate")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-hue-rotate .section-box-custom-%id=boxID%{-webkit-filter:hue-rotate(%id=hue[0]%deg);filter:hue-rotate(%id=hue[0]%deg)}#%parentId%>.s-pro.animate-%id%.eff-hue-rotate .section-box-custom-%id=boxID%{-webkit-filter:hue-rotate(%id=hue[1]%deg);filter:hue-rotate(%id=hue[1]%deg)}%[endif]% %[if %("%id=effect%" == "eff-to-mono")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-to-mono .section-box-custom-%id=boxID%{-webkit-filter:grayscale(%id=tomono[0]%%);filter:grayscale(%id=tomono[0]%%)}#%parentId%>.s-pro.animate-%id%.eff-to-mono .section-box-custom-%id=boxID%{-webkit-filter:grayscale(%id=tomono[1]%%);filter:grayscale(%id=tomono[1]%%)}%[endif]% %[if %("%id=effect%" == "eff-to-color")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-to-color .section-box-custom-%id=boxID%{-webkit-filter:grayscale(%id=tocolor[0]%%);filter:grayscale(%id=tocolor[0]%%)}#%parentId%>.s-pro.animate-%id%.eff-to-color .section-box-custom-%id=boxID%{-webkit-filter:grayscale(%id=tocolor[1]%%);filter:grayscale(%id=tocolor[1]%%)}%[endif]% %[if %("%id=effect%" == "eff-blur")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-blur .section-box-custom-%id=boxID%{-webkit-filter:blur(%id=blur[0]%px);filter:blur(%id=blur[0]%px)}#%parentId%>.s-pro.animate-%id%.eff-blur .section-box-custom-%id=boxID%{-webkit-filter:blur(%id=blur[1]%px);filter:blur(%id=blur[1]%px)}%[endif]% %[if %("%id=effect%" == "eff-lighten")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-lighten .section-box-custom-%id=boxID%{-webkit-filter:brightness(%id=brightness[0]%%);filter:brightness(%id=brightness[0]%%)}#%parentId%>.s-pro.animate-%id%.eff-lighten .section-box-custom-%id=boxID%{-webkit-filter:brightness(%id=brightness[1]%%);filter:brightness(%id=brightness[1]%%)}%[endif]% %[if %("%id=effect%" == "eff-sat")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-sat .section-box-custom-%id=boxID%{-webkit-filter:brightness(%id=saturate[0]%%);filter:brightness(%id=saturate[0]%%)}#%parentId%>.s-pro.animate-%id%.eff-sat .section-box-custom-%id=boxID%{-webkit-filter:brightness(%id=saturate[1]%%);filter:brightness(%id=saturate[1]%%)}%[endif]% @media screen and (min-width:0) and (-webkit-min-device-pixel-ratio:.75),screen and (min-width:0) and (min-resolution:72dpi){#%parentId%>.s-pro[class*="animate-"] .section-box-custom-%id=boxID%{%[if %("%id=filterFallback%" == "fb-color")%]% background:%id=fb-color%!important;%[endif]% %[if %("%id=filterFallback%" == "fb-transparent")%]% background:transparent!important;background-color:transparent!important;%[endif]%}
}_:-ms-fullscreen #%parentId%>.s-pro[class*="animate-"] .section-box-custom-%id=boxID%,:root #%parentId%>.s-pro[class*="animate-"] .section-box-custom-%id=boxID%{%[if %("%id=filterFallback%" == "fb-color")%]% background:%id=fb-color%!important;%[endif]% %[if %("%id=filterFallback%" == "fb-transparent")%]% background:transparent!important;background-color:transparent!important;%[endif]%}%[endif]% %[else]% %[if %(%("%id=startOn%" == "hover")% || %("%id=startOn%" == "elementHover")%)%]% #%parentId%>.s-pro.pre-hover %id=applyTo%{-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transition-delay:0ms;transition-delay:0ms}%[else]% %[if %("%id=startOn%" == "click")%]% #%parentId%>.s-pro.pre-hover %id=applyTo%{-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transition-delay:0ms;transition-delay:0ms}%[else]% #%parentId%>.s-pro[class*="pre-eff-"] %id=applyTo%{-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transition-delay:0ms;transition-delay:0ms}%[endif]% %[endif]% #%parentId%>.s-pro %id=applyTo%{-webkit-transition-duration:%[if %id=advTiming%]% %id=animOutTime%ms %[else]% %id=animTime%ms %[endif]%;transition-duration:%[if %id=advTiming%]% %id=animOutTime%ms %[else]% %id=animTime%ms %[endif]%;-webkit-transition-delay:%[if %id=advTiming%]% %id=outDelay%ms %[else]% %id=animDelay%ms %[endif]%;transition-delay:%[if %id=advTiming%]% %id=outDelay%ms %[else]% %id=animDelay%ms %[endif]%;-webkit-transition-timing-function:%[if %id=advTiming%]% %id=outEaseType% %[else]% %id=easeType% %[endif]%;transition-timing-function:%[if %id=advTiming%]% %id=outEaseType% %[else]% %id=easeType% %[endif]%}#%parentId%>.s-pro.animate-%id% %id=applyTo%{-webkit-transition-duration:%id=animTime%ms;transition-duration:%id=animTime%ms;-webkit-transition-delay:%id=animDelay%ms;transition-delay:%id=animDelay%ms;-webkit-transition-timing-function:%id=easeType%;transition-timing-function:%id=easeType%}%[if %("%id=motionEffect%" == "motion-none")%]% %[if %("%id=effect%" == "eff-opacity")%]% #%parentId%>.s-pro %id=applyTo%{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transform:translateZ(0);transform:translateZ(0)}%[else]% #%parentId%>.s-pro %id=applyTo%{-webkit-transition-property:filter;transition-property:-webkit-filter;transition-property:filter;transition-property:filter,-webkit-filter;-webkit-transition-property:-webkit-filter;-webkit-transform:translateZ(0);transform:translateZ(0)}%[endif]% %[else]% %[if %("%id=effect%" == "eff-no-filter")%]% #%parentId%>.s-pro %id=applyTo%{-webkit-transition-property:transform;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}%[else]% %[if %("%id=effect%" == "eff-opacity")%]% #%parentId%>.s-pro %id=applyTo%{-webkit-transition-property:transform,opacity;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform}%[else]% #%parentId%>.s-pro %id=applyTo%{-webkit-transition-property:transform,filter;-webkit-transition-property:-webkit-transform,-webkit-filter;transition-property:-webkit-transform,-webkit-filter;transition-property:transform,filter;transition-property:transform,filter,-webkit-transform,-webkit-filter;-webkit-transition-property:transform,-webkit-filter}%[endif]% %[endif]% %[endif]% %[if %("%id=motionEffect%" == "motion-3d")%]% #%parentId%>.s-pro %id=applyTo%{-webkit-transform:scale3d(%id=scale[0]%,%id=scale[0]%,%id=scale[0]%);transform:scale3d(%id=scale[0]%,%id=scale[0]%,%id=scale[0]%);-webkit-transform-origin:%id=focalPoint[0]%% %id=focalPoint[1]%%;transform-origin:%id=focalPoint[0]%% %id=focalPoint[1]%%}#%parentId%>.s-pro.animate-%id% %id=applyTo%{-webkit-transform:scale3d(%id=scale[1]%,%id=scale[1]%,%id=scale[1]%);transform:scale3d(%id=scale[1]%,%id=scale[1]%,%id=scale[1]%)}%[endif]% %[if %("%id=motionEffect%" == "motion-3d")%]% #%parentId%>.s-pro %id=applyTo%{-webkit-transform:scaleX(%id=scale[0]%) scaleY(%id=scaleY[0]%) scaleZ(%id=scaleZ[0]%) rotateX(%id=rotate[0]%deg) rotateY(%id=rotateY[0]%deg) rotateZ(%id=rotateZ[0]%deg) skew(%id=skewX[0]%deg,%id=skewY[0]%deg) translate3d(%id=shiftX[0]%%id=shiftUnits%,%id=shiftY[0]%%id=shiftUnits%,%id=shiftZ[0]%px);transform:scaleX(%id=scale[0]%) scaleY(%id=scaleY[0]%) scaleZ(%id=scaleZ[0]%) rotateX(%id=rotate[0]%deg) rotateY(%id=rotateY[0]%deg) rotateZ(%id=rotateZ[0]%deg) skew(%id=skewX[0]%deg,%id=skewY[0]%deg) translate3d(%id=shiftX[0]%%id=shiftUnits%,%id=shiftY[0]%%id=shiftUnits%,%id=shiftZ[0]%px);-webkit-transform-origin:%id=focalPoint[0]%% %id=focalPoint[1]%%;transform-origin:%id=focalPoint[0]%% %id=focalPoint[1]%%}
#%parentId%>.s-pro.animate-%id% %id=applyTo%{-webkit-transform:scaleX(%id=scale[1]%) scaleY(%id=scaleY[1]%) scaleZ(%id=scaleZ[1]%) rotateX(%id=rotate[1]%deg) rotateY(%id=rotateY[1]%deg) rotateZ(%id=rotateZ[1]%deg) skew(%id=skewX[1]%deg,%id=skewY[1]%deg) translate3d(%id=shiftX[1]%%id=shiftUnits%,%id=shiftY[1]%%id=shiftUnits%,%id=shiftZ[1]%px);transform:scaleX(%id=scale[1]%) scaleY(%id=scaleY[1]%) scaleZ(%id=scaleZ[1]%) rotateX(%id=rotate[1]%deg) rotateY(%id=rotateY[1]%deg) rotateZ(%id=rotateZ[1]%deg) skew(%id=skewX[1]%deg,%id=skewY[1]%deg) translate3d(%id=shiftX[1]%%id=shiftUnits%,%id=shiftY[1]%%id=shiftUnits%,%id=shiftZ[1]%px)}%[endif]% %[if %("%id=effect%" == "eff-opacity")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-opacity %id=applyTo%{opacity:%id=opacityChange[0]%}#%parentId%>.s-pro.animate-%id%.eff-opacity %id=applyTo%{opacity:%id=opacityChange[1]%}%[else]% %[if %("%id=effect%" == "eff-hue-rotate")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-hue-rotate %id=applyTo%{-webkit-filter:hue-rotate(%id=hue[0]%deg);filter:hue-rotate(%id=hue[0]%deg)}#%parentId%>.s-pro.animate-%id%.eff-hue-rotate %id=applyTo%{-webkit-filter:hue-rotate(%id=hue[1]%deg);filter:hue-rotate(%id=hue[1]%deg)}%[endif]% %[if %("%id=effect%" == "eff-to-mono")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-to-mono %id=applyTo%{-webkit-filter:grayscale(%id=tomono[0]%%);filter:grayscale(%id=tomono[0]%%)}#%parentId%>.s-pro.animate-%id%.eff-to-mono %id=applyTo%{-webkit-filter:grayscale(%id=tomono[1]%%);filter:grayscale(%id=tomono[1]%%)}%[endif]% %[if %("%id=effect%" == "eff-to-color")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-to-color %id=applyTo%{-webkit-filter:grayscale(%id=tocolor[0]%%);filter:grayscale(%id=tocolor[0]%%)}#%parentId%>.s-pro.animate-%id%.eff-to-color %id=applyTo%{-webkit-filter:grayscale(%id=tocolor[1]%%);filter:grayscale(%id=tocolor[1]%%)}%[endif]% %[if %("%id=effect%" == "eff-blur")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-blur %id=applyTo%{-webkit-filter:blur(%id=blur[0]%px);filter:blur(%id=blur[0]%px)}#%parentId%>.s-pro.animate-%id%.eff-blur %id=applyTo%{-webkit-filter:blur(%id=blur[1]%px);filter:blur(%id=blur[1]%px)}%[endif]% %[if %("%id=effect%" == "eff-lighten")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-lighten %id=applyTo%{-webkit-filter:brightness(%id=brightness[0]%%);filter:brightness(%id=brightness[0]%%)}#%parentId%>.s-pro.animate-%id%.eff-lighten %id=applyTo%{-webkit-filter:brightness(%id=brightness[1]%%);filter:brightness(%id=brightness[1]%%)}%[endif]% %[if %("%id=effect%" == "eff-sat")%]% #%parentId%>.s-pro.pre-eff-%id%.eff-sat %id=applyTo%{-webkit-filter:brightness(%id=saturate[0]%%);filter:brightness(%id=saturate[0]%%)}#%parentId%>.s-pro.animate-%id%.eff-sat %id=applyTo%{-webkit-filter:brightness(%id=saturate[1]%%);filter:brightness(%id=saturate[1]%%)}%[endif]% @media screen and (min-width:0) and (-webkit-min-device-pixel-ratio:.75),screen and (min-width:0) and (min-resolution:72dpi){#%parentId%>.s-pro[class*="animate-"] %id=applyTo%{%[if %("%id=filterFallback%" == "fb-color")%]% background:%id=fb-color%!important;%[endif]% %[if %("%id=filterFallback%" == "fb-transparent")%]% background:transparent!important;background-color:transparent!important;%[endif]%}}_:-ms-fullscreen #%parentId%>.s-pro[class*="animate-"] %id=applyTo%,:root #%parentId%>.s-pro[class*="animate-"] %id=applyTo%{%[if %("%id=filterFallback%" == "fb-color")%]% background:%id=fb-color%!important;%[endif]% %[if %("%id=filterFallback%" == "fb-transparent")%]% background:transparent!important;background-color:transparent!important;%[endif]%}%[endif]% %[endif]% %[endif]%
