/*!
 * animate.css (entrance + attention seekers) — για scroll-in animations του PageBuilder.
 * Οι classes μπαίνουν από το frontend.js (IntersectionObserver) σε [data-nq-anim] όταν
 * το στοιχείο μπει στο viewport: <el class="animated <name>">. Επαναχρησιμοποιήσιμο (field type «scrollanim»).
 */
.animated{animation-duration:1s;animation-fill-mode:both}
.animated.infinite{animation-iteration-count:infinite}
.animated.faster{animation-duration:.5s}
.animated.fast{animation-duration:.8s}
.animated.slow{animation-duration:2s}
.animated.slower{animation-duration:3s}
@media (prefers-reduced-motion:reduce),print{.animated{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}

/* ---- Attention seekers ---- */
@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}
.bounce{animation-name:bounce;transform-origin:center bottom}
@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}
.flash{animation-name:flash}
@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}
.pulse{animation-name:pulse}
@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}
.rubberBand{animation-name:rubberBand}
@keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}
.shake{animation-name:shake}
@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}
.headShake{animation-timing-function:ease-in-out;animation-name:headShake}
@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0)}}
.swing{transform-origin:top center;animation-name:swing}
@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}
.tada{animation-name:tada}
@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:translateZ(0)}}
.wobble{animation-name:wobble}
@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}
.jello{animation-name:jello;transform-origin:center}
@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}
.heartBeat{animation-name:heartBeat;animation-duration:1.3s;animation-timing-function:ease-in-out}

/* ---- Bouncing entrances ---- */
@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}
.bounceIn{animation-duration:.75s;animation-name:bounceIn}
@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:translateZ(0)}}
.bounceInDown{animation-name:bounceInDown}
@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:translateZ(0)}}
.bounceInLeft{animation-name:bounceInLeft}
@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:translateZ(0)}}
.bounceInRight{animation-name:bounceInRight}
@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}
.bounceInUp{animation-name:bounceInUp}

/* ---- Fading entrances ---- */
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.fadeIn{animation-name:fadeIn}
@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInDown{animation-name:fadeInDown}
@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInDownBig{animation-name:fadeInDownBig}
@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInLeft{animation-name:fadeInLeft}
@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInLeftBig{animation-name:fadeInLeftBig}
@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInRight{animation-name:fadeInRight}
@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInRightBig{animation-name:fadeInRightBig}
@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInUp{animation-name:fadeInUp}
@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInUpBig{animation-name:fadeInUpBig}

/* ---- Flippers ---- */
@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0);animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0);animation-timing-function:ease-in}}
.animated.flip{backface-visibility:visible;animation-name:flip}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}
.flipInX{backface-visibility:visible!important;animation-name:flipInX}
@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}
.flipInY{backface-visibility:visible!important;animation-name:flipInY}

/* ---- Lightspeed ---- */
@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}
.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}

/* ---- Rotating entrances ---- */
@keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:translateZ(0);opacity:1}}
.rotateIn{animation-name:rotateIn}
@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:translateZ(0);opacity:1}}
.rotateInDownLeft{animation-name:rotateInDownLeft}
@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:translateZ(0);opacity:1}}
.rotateInDownRight{animation-name:rotateInDownRight}
@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:translateZ(0);opacity:1}}
.rotateInUpLeft{animation-name:rotateInUpLeft}
@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:translateZ(0);opacity:1}}
.rotateInUpRight{animation-name:rotateInUpRight}

/* ---- Specials ---- */
@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}
.jackInTheBox{animation-name:jackInTheBox}
@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}
.rollIn{animation-name:rollIn}

/* ---- Zooming entrances ---- */
@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.zoomIn{animation-name:zoomIn}
@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.zoomInDown{animation-name:zoomInDown}
@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.zoomInLeft{animation-name:zoomInLeft}
@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.zoomInRight{animation-name:zoomInRight}
@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.zoomInUp{animation-name:zoomInUp}

/* ---- Sliding entrances ---- */
@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}
.slideInDown{animation-name:slideInDown}
@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}
.slideInLeft{animation-name:slideInLeft}
@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}
.slideInRight{animation-name:slideInRight}
@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}
.slideInUp{animation-name:slideInUp}

/* ==========================================================================
 * ΕΞΟΔΟΙ (Newquay) — το πακέτο ήταν μόνο «entrances». Ονοματολογία v3, ίδια με
 * τον υπόλοιπο φάκελο (.fadeOutUp, ΟΧΙ .animate__fadeOutUp), ώστε να δουλεύουν
 * με το ίδιο .animated. Τα χρησιμοποιεί το «Εφέ εξόδου» των Sliders.
 * ======================================================================== */
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.fadeOut{animation-name:fadeOut}
@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}
.fadeOutUp{animation-name:fadeOutUp}
@keyframes fadeOutDown{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}
.fadeOutDown{animation-name:fadeOutDown}
@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}
.fadeOutLeft{animation-name:fadeOutLeft}
@keyframes fadeOutRight{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}
.fadeOutRight{animation-name:fadeOutRight}
@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}
.zoomOut{animation-name:zoomOut}
@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}
.bounceOut{animation-name:bounceOut}
@keyframes slideOutUp{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}
.slideOutUp{animation-name:slideOutUp}
@keyframes slideOutLeft{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}
.slideOutLeft{animation-name:slideOutLeft}
@keyframes slideOutRight{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}
.slideOutRight{animation-name:slideOutRight}
@keyframes flipOutX{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}to{transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}
.flipOutX{animation-name:flipOutX;backface-visibility:visible!important}
@keyframes flipOutY{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}to{transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}
.flipOutY{animation-name:flipOutY;backface-visibility:visible!important}
@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}
.rotateOut{animation-name:rotateOut}
@keyframes lightSpeedOut{from{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}
.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}

/* Paired exits used by Slider layer timelines. These complete the existing
   entrance families so manager preview and frontend expose the same choices. */
@keyframes fadeOutUpBig{from{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}
.fadeOutUpBig{animation-name:fadeOutUpBig}
@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}
.fadeOutDownBig{animation-name:fadeOutDownBig}
@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}
.fadeOutLeftBig{animation-name:fadeOutLeftBig}
@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}
.fadeOutRightBig{animation-name:fadeOutRightBig}
@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}
.bounceOutUp{animation-name:bounceOutUp}
@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}
.bounceOutDown{animation-name:bounceOutDown}
@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}
.bounceOutLeft{animation-name:bounceOutLeft}
@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}
.bounceOutRight{animation-name:bounceOutRight}
@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0)}}
.zoomOutUp{animation-name:zoomOutUp}
@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0)}}
.zoomOutDown{animation-name:zoomOutDown}
@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0)}}
.zoomOutLeft{animation-name:zoomOutLeft}
@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0)}}
.zoomOutRight{animation-name:zoomOutRight}
@keyframes slideOutDown{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}
.slideOutDown{animation-name:slideOutDown}
@keyframes rotateOutUpLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}
.rotateOutUpLeft{animation-name:rotateOutUpLeft}
@keyframes rotateOutUpRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}
.rotateOutUpRight{animation-name:rotateOutUpRight}
@keyframes rotateOutDownLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}
.rotateOutDownLeft{animation-name:rotateOutDownLeft}
@keyframes rotateOutDownRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}
.rotateOutDownRight{animation-name:rotateOutDownRight}
@keyframes rollOut{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}
.rollOut{animation-name:rollOut}

/* Back entrances / exits — προστέθηκαν από εμάς (το πακέτο μας ήταν κομμένο).
   Ίδια συμπεριφορά με το animate.css v4: το στοιχείο έρχεται/φεύγει μικρότερο
   και «κάθεται» στη θέση του στο τελευταίο 20% της κίνησης. */
@keyframes backInDown{0%{opacity:.7;transform:translateY(-1200px) scale(.7)}80%{opacity:.7;transform:translate(0,0) scale(.7)}100%{opacity:1;transform:scale(1)}}
.backInDown{animation-name:backInDown}
@keyframes backInLeft{0%{opacity:.7;transform:translateX(-2000px) scale(.7)}80%{opacity:.7;transform:translate(0,0) scale(.7)}100%{opacity:1;transform:scale(1)}}
.backInLeft{animation-name:backInLeft}
@keyframes backInRight{0%{opacity:.7;transform:translateX(2000px) scale(.7)}80%{opacity:.7;transform:translate(0,0) scale(.7)}100%{opacity:1;transform:scale(1)}}
.backInRight{animation-name:backInRight}
@keyframes backInUp{0%{opacity:.7;transform:translateY(1200px) scale(.7)}80%{opacity:.7;transform:translate(0,0) scale(.7)}100%{opacity:1;transform:scale(1)}}
.backInUp{animation-name:backInUp}
@keyframes backOutDown{0%{opacity:1;transform:scale(1)}20%{opacity:.7;transform:translate(0,0) scale(.7)}100%{opacity:.7;transform:translateY(700px) scale(.7)}}
.backOutDown{animation-name:backOutDown}
@keyframes backOutLeft{0%{opacity:1;transform:scale(1)}20%{opacity:.7;transform:translate(0,0) scale(.7)}100%{opacity:.7;transform:translateX(-2000px) scale(.7)}}
.backOutLeft{animation-name:backOutLeft}
@keyframes backOutRight{0%{opacity:1;transform:scale(1)}20%{opacity:.7;transform:translate(0,0) scale(.7)}100%{opacity:.7;transform:translateX(2000px) scale(.7)}}
.backOutRight{animation-name:backOutRight}
@keyframes backOutUp{0%{opacity:1;transform:scale(1)}20%{opacity:.7;transform:translate(0,0) scale(.7)}100%{opacity:.7;transform:translateY(-700px) scale(.7)}}
.backOutUp{animation-name:backOutUp}

/* .flip: τα keyframes υπήρχαν αλλά ο κανόνας της κλάσης είχε κοπεί,
   γι' αυτό η επιλογή «Flip» δεν έκανε ποτέ τίποτα. */
.flip{backface-visibility:visible;animation-name:flip}