Repository: miniMAC/magic
Branch: master
Commit: f26d3c3beaf3
Files: 74
Total size: 122.6 KB

Directory structure:
gitextract_wd8dlsq4/

├── .gitignore
├── LICENSE
├── README.md
├── assets/
│   └── scss/
│       ├── _magictime.scss
│       ├── _media.scss
│       ├── bling/
│       │   ├── _puffIn.scss
│       │   ├── _puffOut.scss
│       │   ├── _vanishIn.scss
│       │   └── _vanishOut.scss
│       ├── boing/
│       │   ├── _boingInUp.scss
│       │   └── _boingOutDown.scss
│       ├── bomb/
│       │   ├── _bombLeftOut.scss
│       │   └── _bombRightOut.scss
│       ├── magic.scss
│       ├── magic_effects/
│       │   ├── _magic.scss
│       │   ├── _swap.scss
│       │   ├── _twisterInDown.scss
│       │   └── _twisterInUp.scss
│       ├── math/
│       │   ├── _foolishIn.scss
│       │   ├── _foolishOut.scss
│       │   ├── _holeOut.scss
│       │   ├── _swashIn.scss
│       │   └── _swashOut.scss
│       ├── on_the_space/
│       │   ├── _spaceInDown.scss
│       │   ├── _spaceInLeft.scss
│       │   ├── _spaceInRight.scss
│       │   ├── _spaceInUp.scss
│       │   ├── _spaceOutDown.scss
│       │   ├── _spaceOutLeft.scss
│       │   ├── _spaceOutRight.scss
│       │   └── _spaceOutUp.scss
│       ├── perspective/
│       │   ├── _perspectiveDown.scss
│       │   ├── _perspectiveDownReturn.scss
│       │   ├── _perspectiveLeft.scss
│       │   ├── _perspectiveLeftReturn.scss
│       │   ├── _perspectiveRight.scss
│       │   ├── _perspectiveRightReturn.scss
│       │   ├── _perspectiveUp.scss
│       │   └── _perspectiveUpReturn.scss
│       ├── rotate/
│       │   ├── _rotateDown.scss
│       │   ├── _rotateLeft.scss
│       │   ├── _rotateRight.scss
│       │   └── _rotateUp.scss
│       ├── slide/
│       │   ├── _slideDown.scss
│       │   ├── _slideDownReturn.scss
│       │   ├── _slideLeft.scss
│       │   ├── _slideLeftReturn.scss
│       │   ├── _slideRight.scss
│       │   ├── _slideRightReturn.scss
│       │   ├── _slideUp.scss
│       │   └── _slideUpReturn.scss
│       ├── static_effects/
│       │   ├── _openDownLeft.scss
│       │   ├── _openDownLeftReturn.scss
│       │   ├── _openDownRight.scss
│       │   ├── _openDownRightReturn.scss
│       │   ├── _openUpLeft.scss
│       │   ├── _openUpLeftReturn.scss
│       │   ├── _openUpRight.scss
│       │   └── _openUpRightReturn.scss
│       ├── static_effects_out/
│       │   ├── _openDownLeftOut.scss
│       │   ├── _openDownRightOut.scss
│       │   ├── _openUpLeftOut.scss
│       │   └── _openUpRightOut.scss
│       └── tin/
│           ├── _tinDownIn.scss
│           ├── _tinDownOut.scss
│           ├── _tinLeftIn.scss
│           ├── _tinLeftOut.scss
│           ├── _tinRightIn.scss
│           ├── _tinRightOut.scss
│           ├── _tinUpIn.scss
│           └── _tinUpOut.scss
├── dist/
│   └── magic.css
├── gulpfile.js
└── package.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# Exclusion
/node_modules
.DS_Store
.vscode
todo.txt
next.md
package-lock.json

================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2022 Christian Pucci

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================
FILE: README.md
================================================
:tophat: magic
---------------

CSS3 Animations with special effects. **(→ 3.1 kB gzip)**

## Demo

Checkout the demo for the animations [here](https://www.minimamente.com/project/magic/)

## **Table of Contents**

- [Installation](#installation)
- [Getting Started](#getting-started)
- [Usage with JavaScript](#usage-with-javascript)
- [Usage with jQuery](#usage-with-jquery)
- [HTML & CSS tips](#html--css-tips)
- [:tada: Gulp and SCSS (SASS) compiling](#tada-gulp-and-scss-sass-compiling)
- [:white_check_mark: Browser Support](#white_check_mark-browser-support)


## Installation

**GitHub Package Registry** - [Package url](https://github.com/miniMAC/magic/packages/24129)
```bash
npm install @minimac/magic.css
```

**NPM** - [Package url](https://www.npmjs.com/package/magic.css)
```bash
npm i magic.css
```

**YARN** - [Package url](https://yarnpkg.com/en/package/magic.css)
```bash
yarn add magic.css
```

## Getting Started

Include the file **magic.css** or include the minified version **magic.min.css**

```html
<link rel="stylesheet" href="yourpath/magic.css">
```

or

```html
<link rel="stylesheet" href="yourpath/magic.min.css">
```

## Usage with JavaScript

This is a sample code for on hover effect with **JavaScript**.
First, Include the class `magictime` and then a desired animation class.
```js
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
```

If you want to load the animation after certain time, you can use this example:
```js
//set timer to 5 seconds, after that, load the magic animation
function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setTimeout(myFunction, 5000);
```

If you want to load the animation after certain time but with an infinite loop, you can use this example:
```js
//set timer to 3 seconds, after that, load the magic animation and repeat forever
function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setInterval(myFunction, 3000);
```

## Usage with jQuery

This is a sample code for on hover effect with jQuery.
First, Include the class `magictime` and then the desired animation class.
```js
$('.yourdiv').hover(function () {
    $(this).addClass('magictime puffIn');
});
```

If you want to load the animation after certain time, you can use this example:
```js
//set timer to 5 seconds, after that, load the magic animation
setTimeout(function(){
    $('.yourdiv').addClass('magictime puffIn');
}, 5000);
```

If you want to load the animation after certain time but with infinite loop, you can use this example:
```js
//set timer to 3 seconds, after that, load the magic animation and repeat forever
setInterval(function(){
    $('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );
```
## HTML & CSS tips

You can **change the time** of the animation by setting the class `magictime` for example:
```css
.magictime {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
```

**Default** CSS timing is:
```css
.magictime {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
```

If you want to assign the **timing to a specific animation**, you can use the following code *(use 2 class)*:
```css
.magictime.magic {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}
```

## Animation Classes

| MAGIC EFFECTS | BLING     | STATIC EFFECTS      | STATIC EFFECTS OUT | PERSPECTIVE            | ROTATE      |
|---------------|-----------|---------------------|--------------------|------------------------|-------------|
| magic         | puffIn    | openDownLeft        | openDownLeftOut    | perspectiveDown        | rotateDown  |
| twisterInDown | puffOut   | openDownRight       | openDownRightOut   | perspectiveUp          | rotateUp    |
| twisterInUp   | vanishIn  | openUpLeft          | openUpLeftOut      | perspectiveLeft        | rotateLeft  |
| swap          | vanishOut | openUpRight         | openUpRightOut     | perspectiveRight       | rotateRight |
|               |           | openDownLeftReturn  |                    | perspectiveDownReturn  |             |
|               |           | openDownRightReturn |                    | perspectiveUpReturn    |             |
|               |           | openUpLeftReturn    |                    | perspectiveLeftReturn  |             |
|               |           | openUpRightReturn   |                    | perspectiveRightReturn |             |


| SLIDE            | MATH      | TIN         | BOMB         | BOING        | ON THE SPACE  |
|------------------|-----------|-------------|--------------|--------------|---------------|
| slideDown        | swashOut  | tinRightOut | bombRightOut | boingInUp    | spaceOutUp    |
| slideUp          | swashIn   | tinLeftOut  | bombLeftOut  | boingOutDown | spaceOutRight |
| slideLeft        | foolishIn | tinUpOut    |              |              | spaceOutDown  |
| slideRight       | holeOut   | tinDownOut  |              |              | spaceOutLeft  |
| slideDownReturn  |           | tinRightIn  |              |              | spaceInUp     |
| slideUpReturn    |           | tinLeftIn   |              |              | spaceInRight  |
| slideLeftReturn  |           | tinUpIn     |              |              | spaceInDown   |
| slideRightReturn |           | tinDownIn   |              |              | spaceInLeft   |

:tada: Gulp and SCSS (SASS) compiling
---------------

If you want to customize the CSS files, now you will have the chance. For example, if you want to include only certain animations, you will have to go to this file:

```html
assets/scss/magic.scss
```

Comment or uncomment your desired file and run from terminal the following commands:

```bash
npm install
```

and last command:

```bash
gulp
```

**Automatically** this generate the new files!


:white_check_mark: Browser Support
---------------

**Browser** | Chrome | Firefox | Safari | iOS Safari | Opera | Android | Android Chrome | IE | Opera Mini
--- | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---:
**Version** | 31+ | 31+ | 7+ | 7.1+ | 27+ | 4.1+ | 42+ | 10+ | :x:


================================================
FILE: assets/scss/_magictime.scss
================================================
.magictime {
    animation-duration: 1s;
    animation-fill-mode: both;
}

================================================
FILE: assets/scss/_media.scss
================================================
@media (print), (prefers-reduced-motion) {
  .magictime {
    animation: unset !important;
    transition: none !important;
  }
}


================================================
FILE: assets/scss/bling/_puffIn.scss
================================================
.puffIn {
  animation-name: puffIn;
}

@-webkit-keyframes puffIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}

@keyframes puffIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}


================================================
FILE: assets/scss/bling/_puffOut.scss
================================================
.puffOut {
  animation-name: puffOut;
}

@-webkit-keyframes puffOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
}

@keyframes puffOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
}


================================================
FILE: assets/scss/bling/_vanishIn.scss
================================================
.vanishIn {
  animation-name: vanishIn;
}

@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(90px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}

@keyframes vanishIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(90px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}


================================================
FILE: assets/scss/bling/_vanishOut.scss
================================================
.vanishOut {
  animation-name: vanishOut;
}

@-webkit-keyframes vanishOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(20px);
  }
}

@keyframes vanishOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(20px);
  }
}


================================================
FILE: assets/scss/boing/_boingInUp.scss
================================================
.boingInUp {
  -webkit-animation-name: boingInUp;
  animation-name: boingInUp;
}

@-webkit-keyframes boingInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(-90deg);
    transform: perspective(800px) rotateX(-90deg);
  }
  50% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(50deg);
    transform: perspective(800px) rotateX(50deg);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }
}

@keyframes boingInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(-90deg);
    transform: perspective(800px) rotateX(-90deg);
  }
  50% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(50deg);
    transform: perspective(800px) rotateX(50deg);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }
}


================================================
FILE: assets/scss/boing/_boingOutDown.scss
================================================
.boingOutDown {
  -webkit-animation-name: boingOutDown;
  animation-name: boingOutDown;
}
@-webkit-keyframes boingOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
    transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }

  30% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
    transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
    transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  }
}
@keyframes boingOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
    transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }

  30% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
    transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
    transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  }
}


================================================
FILE: assets/scss/bomb/_bombLeftOut.scss
================================================
.bombLeftOut {
  -webkit-animation-name: bombLeftOut;
  animation-name: bombLeftOut;
}
@-webkit-keyframes bombLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: -100% 50%;
    transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
    transform: rotate(-160deg);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: -100% 50%;
    transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
    transform: rotate(-160deg);
    -webkit-filter: blur(20px);
    filter: blur(20px);
  }
}
@keyframes bombLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: -100% 50%;
    transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
    transform: rotate(-160deg);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: -100% 50%;
    transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
    transform: rotate(-160deg);
    -webkit-filter: blur(20px);
    filter: blur(20px);
  }
}


================================================
FILE: assets/scss/bomb/_bombRightOut.scss
================================================
.bombRightOut {
  -webkit-animation-name: bombRightOut;
  animation-name: bombRightOut;
}
@-webkit-keyframes bombRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: 200% 50%;
    transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 50%;
    transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
    -webkit-filter: blur(20px);
    filter: blur(20px);
  }
}
@keyframes bombRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: 200% 50%;
    transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 50%;
    transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
    -webkit-filter: blur(20px);
    filter: blur(20px);
  }
}


================================================
FILE: assets/scss/magic.scss
================================================
@charset "UTF-8";

/*!
 * Magic - https://www.minimamente.com
 * Licensed under the MIT license - https://opensource.org/licenses/MIT
 * Copyright (c) 2022 Christian Pucci
 */

// bling
@import "bling/puffIn";
@import "bling/puffOut";
@import "bling/vanishIn";
@import "bling/vanishOut";

// boing
@import "boing/boingInUp";
@import "boing/boingOutDown";

// bomb
@import "bomb/bombLeftOut";
@import "bomb/bombRightOut";

// magic_effects
@import "magic_effects/magic";
@import "magic_effects/swap";
@import "magic_effects/twisterInDown";
@import "magic_effects/twisterInUp";

// math
@import "math/foolishIn";
@import "math/foolishOut";
@import "math/holeOut";
@import "math/swashIn";
@import "math/swashOut";

// on_the_space
@import "on_the_space/spaceInDown";
@import "on_the_space/spaceInLeft";
@import "on_the_space/spaceInRight";
@import "on_the_space/spaceInUp";
@import "on_the_space/spaceOutDown";
@import "on_the_space/spaceOutLeft";
@import "on_the_space/spaceOutRight";
@import "on_the_space/spaceOutUp";

// perspective
@import "perspective/perspectiveDown";
@import "perspective/perspectiveDownReturn";
@import "perspective/perspectiveLeft";
@import "perspective/perspectiveLeftReturn";
@import "perspective/perspectiveRight";
@import "perspective/perspectiveRightReturn";
@import "perspective/perspectiveUp";
@import "perspective/perspectiveUpReturn";

// rotate
@import "rotate/rotateDown";
@import "rotate/rotateLeft";
@import "rotate/rotateRight";
@import "rotate/rotateUp";

// slide
@import "slide/slideDown";
@import "slide/slideDownReturn";
@import "slide/slideLeft";
@import "slide/slideLeftReturn";
@import "slide/slideRight";
@import "slide/slideRightReturn";
@import "slide/slideUp";
@import "slide/slideUpReturn";

// static_effects
@import "static_effects/openDownLeft";
@import "static_effects/openDownLeftReturn";
@import "static_effects/openDownRight";
@import "static_effects/openDownRightReturn";
@import "static_effects/openUpLeft";
@import "static_effects/openUpLeftReturn";
@import "static_effects/openUpRight";
@import "static_effects/openUpRightReturn";

// static_effects_out
@import "static_effects_out/openDownLeftOut";
@import "static_effects_out/openDownRightOut";
@import "static_effects_out/openUpLeftOut";
@import "static_effects_out/openUpRightOut";

// tin
@import "tin/tinDownIn";
@import "tin/tinDownOut";
@import "tin/tinLeftIn";
@import "tin/tinLeftOut";
@import "tin/tinRightIn";
@import "tin/tinRightOut";
@import "tin/tinUpIn";
@import "tin/tinUpOut";

// magictime
@import "magictime";

// media
@import "media";


================================================
FILE: assets/scss/magic_effects/_magic.scss
================================================
.magic {
  -webkit-animation-name: magic;
  animation-name: magic;
}
@-webkit-keyframes magic {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 200%;
    transform-origin: 100% 200%;
    -webkit-transform: scale(1, 1) rotate(0deg);
    transform: scale(1, 1) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 500%;
    transform-origin: 200% 500%;
    -webkit-transform: scale(0, 0) rotate(270deg);
    transform: scale(0, 0) rotate(270deg);
  }
}
@keyframes magic {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 200%;
    transform-origin: 100% 200%;
    -webkit-transform: scale(1, 1) rotate(0deg);
    transform: scale(1, 1) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 500%;
    transform-origin: 200% 500%;
    -webkit-transform: scale(0, 0) rotate(270deg);
    transform: scale(0, 0) rotate(270deg);
  }
}


================================================
FILE: assets/scss/magic_effects/_swap.scss
================================================
.swap {
  -webkit-animation-name: swap;
  animation-name: swap;
}
@-webkit-keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(-700px, 0px);
    transform: scale(0, 0) translate(-700px, 0px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
}
@keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(-700px, 0px);
    transform: scale(0, 0) translate(-700px, 0px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
}


================================================
FILE: assets/scss/magic_effects/_twisterInDown.scss
================================================
.twisterInDown {
  -webkit-animation-name: twisterInDown;
  animation-name: twisterInDown;
}
@-webkit-keyframes twisterInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  30% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
    transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
@keyframes twisterInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  30% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
    transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}


================================================
FILE: assets/scss/magic_effects/_twisterInUp.scss
================================================
.twisterInUp {
  -webkit-animation-name: twisterInUp;
  animation-name: twisterInUp;
}
@-webkit-keyframes twisterInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
    transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  30% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
    transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
    transform: scale(1, 1) rotate(0deg) translateY(0);
  }
}
@keyframes twisterInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
    transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  30% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
    transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
    transform: scale(1, 1) rotate(0deg) translateY(0);
  }
}


================================================
FILE: assets/scss/math/_foolishIn.scss
================================================
.foolishIn {
  -webkit-animation-name: foolishIn;
  animation-name: foolishIn;
}
@-webkit-keyframes foolishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(360deg);
    transform: scale(0, 0) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
    transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(0deg);
    transform: scale(1, 1) rotate(0deg);
  }
}
@keyframes foolishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(360deg);
    transform: scale(0, 0) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
    transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(0deg);
    transform: scale(1, 1) rotate(0deg);
  }
}


================================================
FILE: assets/scss/math/_foolishOut.scss
================================================
.foolishOut {
  -webkit-animation-name: foolishOut;
  animation-name: foolishOut;
}
@-webkit-keyframes foolishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(360deg);
    transform: scale(1, 1) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
    transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(0deg);
    transform: scale(0, 0) rotate(0deg);
  }
}
@keyframes foolishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(360deg);
    transform: scale(1, 1) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
    transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
    transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(0deg);
    transform: scale(0, 0) rotate(0deg);
  }
}


================================================
FILE: assets/scss/math/_holeOut.scss
================================================
.holeOut {
  -webkit-animation-name: holeOut;
  animation-name: holeOut;
}
@-webkit-keyframes holeOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotateY(0deg);
    transform: scale(1, 1) rotateY(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotateY(180deg);
    transform: scale(0, 0) rotateY(180deg);
  }
}
@keyframes holeOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotateY(0deg);
    transform: scale(1, 1) rotateY(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotateY(180deg);
    transform: scale(0, 0) rotateY(180deg);
  }
}


================================================
FILE: assets/scss/math/_swashIn.scss
================================================
.swashIn {
  -webkit-animation-name: swashIn;
  animation-name: swashIn;
}
@-webkit-keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}


================================================
FILE: assets/scss/math/_swashOut.scss
================================================
.swashOut {
  -webkit-animation-name: swashOut;
  animation-name: swashOut;
}
@-webkit-keyframes swashOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }
}
@keyframes swashOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }
}


================================================
FILE: assets/scss/on_the_space/_spaceInDown.scss
================================================
.spaceInDown {
  -webkit-animation-name: spaceInDown;
  animation-name: spaceInDown;
}
@-webkit-keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0.2) translate(0%, 200%);
    transform: scale(0.2) translate(0%, 200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0.2) translate(0%, 200%);
    transform: scale(0.2) translate(0%, 200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }
}


================================================
FILE: assets/scss/on_the_space/_spaceInLeft.scss
================================================
.spaceInLeft {
  -webkit-animation-name: spaceInLeft;
  animation-name: spaceInLeft;
}
@-webkit-keyframes spaceInLeft {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: scale(0.2) translate(-200%, 0%);
    transform: scale(0.2) translate(-200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInLeft {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: scale(0.2) translate(-200%, 0%);
    transform: scale(0.2) translate(-200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }
}


================================================
FILE: assets/scss/on_the_space/_spaceInRight.scss
================================================
.spaceInRight {
  -webkit-animation-name: spaceInRight;
  animation-name: spaceInRight;
}
@-webkit-keyframes spaceInRight {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale(0.2) translate(200%, 0%);
    transform: scale(0.2) translate(200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInRight {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale(0.2) translate(200%, 0%);
    transform: scale(0.2) translate(200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }
}


================================================
FILE: assets/scss/on_the_space/_spaceInUp.scss
================================================
.spaceInUp {
  -webkit-animation-name: spaceInUp;
  animation-name: spaceInUp;
}
@-webkit-keyframes spaceInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: scale(0.2) translate(0%, -200%);
    transform: scale(0.2) translate(0%, -200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: scale(0.2) translate(0%, -200%);
    transform: scale(0.2) translate(0%, -200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }
}


================================================
FILE: assets/scss/on_the_space/_spaceOutDown.scss
================================================
.spaceOutDown {
  -webkit-animation-name: spaceOutDown;
  animation-name: spaceOutDown;
}
@-webkit-keyframes spaceOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0.2) translate(0%, 200%);
    transform: scale(0.2) translate(0%, 200%);
  }
}
@keyframes spaceOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0.2) translate(0%, 200%);
    transform: scale(0.2) translate(0%, 200%);
  }
}


================================================
FILE: assets/scss/on_the_space/_spaceOutLeft.scss
================================================
.spaceOutLeft {
  -webkit-animation-name: spaceOutLeft;
  animation-name: spaceOutLeft;
}
@-webkit-keyframes spaceOutLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: scale(0.2) translate(-200%, 0%);
    transform: scale(0.2) translate(-200%, 0%);
  }
}
@keyframes spaceOutLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: scale(0.2) translate(-200%, 0%);
    transform: scale(0.2) translate(-200%, 0%);
  }
}


================================================
FILE: assets/scss/on_the_space/_spaceOutRight.scss
================================================
.spaceOutRight {
  -webkit-animation-name: spaceOutRight;
  animation-name: spaceOutRight;
}
@-webkit-keyframes spaceOutRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale(0.2) translate(200%, 0%);
    transform: scale(0.2) translate(200%, 0%);
  }
}
@keyframes spaceOutRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale(0.2) translate(200%, 0%);
    transform: scale(0.2) translate(200%, 0%);
  }
}


================================================
FILE: assets/scss/on_the_space/_spaceOutUp.scss
================================================
.spaceOutUp {
  -webkit-animation-name: spaceOutUp;
  animation-name: spaceOutUp;
}
@-webkit-keyframes spaceOutUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: scale(0.2) translate(0%, -200%);
    transform: scale(0.2) translate(0%, -200%);
  }
}
@keyframes spaceOutUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: scale(0.2) translate(0%, -200%);
    transform: scale(0.2) translate(0%, -200%);
  }
}


================================================
FILE: assets/scss/perspective/_perspectiveDown.scss
================================================
.perspectiveDown {
  -webkit-animation-name: perspectiveDown;
  animation-name: perspectiveDown;
}
@-webkit-keyframes perspectiveDown {
  0% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
    transform: perspective(800px) rotateX(-180deg);
  }
}
@keyframes perspectiveDown {
  0% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
    transform: perspective(800px) rotateX(-180deg);
  }
}


================================================
FILE: assets/scss/perspective/_perspectiveDownReturn.scss
================================================
.perspectiveDownReturn {
  -webkit-animation-name: perspectiveDownReturn;
  animation-name: perspectiveDownReturn;
}
@-webkit-keyframes perspectiveDownReturn {
  0% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
    transform: perspective(800px) rotateX(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes perspectiveDownReturn {
  0% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
    transform: perspective(800px) rotateX(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }
}


================================================
FILE: assets/scss/perspective/_perspectiveLeft.scss
================================================
.perspectiveLeft {
  -webkit-animation-name: perspectiveLeft;
  animation-name: perspectiveLeft;
}
@-webkit-keyframes perspectiveLeft {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
    transform: perspective(800px) rotateY(-180deg);
  }
}
@keyframes perspectiveLeft {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
    transform: perspective(800px) rotateY(-180deg);
  }
}


================================================
FILE: assets/scss/perspective/_perspectiveLeftReturn.scss
================================================
.perspectiveLeftReturn {
  -webkit-animation-name: perspectiveLeftReturn;
  animation-name: perspectiveLeftReturn;
}
@-webkit-keyframes perspectiveLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
    transform: perspective(800px) rotateY(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
  }
}
@keyframes perspectiveLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
    transform: perspective(800px) rotateY(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
  }
}


================================================
FILE: assets/scss/perspective/_perspectiveRight.scss
================================================
.perspectiveRight {
  -webkit-animation-name: perspectiveRight;
  animation-name: perspectiveRight;
}
@-webkit-keyframes perspectiveRight {
  0% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
  }
}
@keyframes perspectiveRight {
  0% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
  }
}


================================================
FILE: assets/scss/perspective/_perspectiveRightReturn.scss
================================================
.perspectiveRightReturn {
  -webkit-animation-name: perspectiveRightReturn;
  animation-name: perspectiveRightReturn;
}
@-webkit-keyframes perspectiveRightReturn {
  0% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
  }
}
@keyframes perspectiveRightReturn {
  0% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
  }
}


================================================
FILE: assets/scss/perspective/_perspectiveUp.scss
================================================
.perspectiveUp {
  -webkit-animation-name: perspectiveUp;
  animation-name: perspectiveUp;
}
@-webkit-keyframes perspectiveUp {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
    transform: perspective(800px) rotateX(180deg);
  }
}
@keyframes perspectiveUp {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
    transform: perspective(800px) rotateX(180deg);
  }
}


================================================
FILE: assets/scss/perspective/_perspectiveUpReturn.scss
================================================
.perspectiveUpReturn {
  -webkit-animation-name: perspectiveUpReturn;
  animation-name: perspectiveUpReturn;
}
@-webkit-keyframes perspectiveUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
    transform: perspective(800px) rotateX(180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes perspectiveUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
    transform: perspective(800px) rotateX(180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg);
  }
}


================================================
FILE: assets/scss/rotate/_rotateDown.scss
================================================
.rotateDown {
  -webkit-animation-name: rotateDown;
  animation-name: rotateDown;
}
@-webkit-keyframes rotateDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
    transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}
@keyframes rotateDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
    transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}


================================================
FILE: assets/scss/rotate/_rotateLeft.scss
================================================
.rotateLeft {
  -webkit-animation-name: rotateLeft;
  animation-name: rotateLeft;
}
@-webkit-keyframes rotateLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
    transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(300px);
    transform: perspective(800px) rotateY(-180deg) translateZ(300px);
  }
}
@keyframes rotateLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
    transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(300px);
    transform: perspective(800px) rotateY(-180deg) translateZ(300px);
  }
}


================================================
FILE: assets/scss/rotate/_rotateRight.scss
================================================
.rotateRight {
  -webkit-animation-name: rotateRight;
  animation-name: rotateRight;
}
@-webkit-keyframes rotateRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
    transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(150px);
    transform: perspective(800px) rotateY(180deg) translateZ(150px);
  }
}
@keyframes rotateRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
    transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(150px);
    transform: perspective(800px) rotateY(180deg) translateZ(150px);
  }
}


================================================
FILE: assets/scss/rotate/_rotateUp.scss
================================================
.rotateUp {
  -webkit-animation-name: rotateUp;
  animation-name: rotateUp;
}
@-webkit-keyframes rotateUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
    transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}
@keyframes rotateUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
    transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}


================================================
FILE: assets/scss/slide/_slideDown.scss
================================================
.slideDown {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@keyframes slideDown {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}


================================================
FILE: assets/scss/slide/_slideDownReturn.scss
================================================
.slideDownReturn {
  -webkit-animation-name: slideDownReturn;
  animation-name: slideDownReturn;
}
@-webkit-keyframes slideDownReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@keyframes slideDownReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}


================================================
FILE: assets/scss/slide/_slideLeft.scss
================================================
.slideLeft {
  -webkit-animation-name: slideLeft;
  animation-name: slideLeft;
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes slideLeft {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}


================================================
FILE: assets/scss/slide/_slideLeftReturn.scss
================================================
.slideLeftReturn {
  -webkit-animation-name: slideLeftReturn;
  animation-name: slideLeftReturn;
}
@-webkit-keyframes slideLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@keyframes slideLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}


================================================
FILE: assets/scss/slide/_slideRight.scss
================================================
.slideRight {
  -webkit-animation-name: slideRight;
  animation-name: slideRight;
}
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes slideRight {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}


================================================
FILE: assets/scss/slide/_slideRightReturn.scss
================================================
.slideRightReturn {
  -webkit-animation-name: slideRightReturn;
  animation-name: slideRightReturn;
}
@-webkit-keyframes slideRightReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@keyframes slideRightReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}


================================================
FILE: assets/scss/slide/_slideUp.scss
================================================
.slideUp {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}


================================================
FILE: assets/scss/slide/_slideUpReturn.scss
================================================
.slideUpReturn {
  -webkit-animation-name: slideUpReturn;
  animation-name: slideUpReturn;
}
@-webkit-keyframes slideUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@keyframes slideUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}


================================================
FILE: assets/scss/static_effects/_openDownLeft.scss
================================================
.openDownLeft {
  -webkit-animation-name: openDownLeft;
  animation-name: openDownLeft;
}
@-webkit-keyframes openDownLeft {
  0% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openDownLeft {
  0% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}


================================================
FILE: assets/scss/static_effects/_openDownLeftReturn.scss
================================================
.openDownLeftReturn {
  -webkit-animation-name: openDownLeftReturn;
  animation-name: openDownLeftReturn;
}
@-webkit-keyframes openDownLeftReturn {
  0% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes openDownLeftReturn {
  0% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}


================================================
FILE: assets/scss/static_effects/_openDownRight.scss
================================================
.openDownRight {
  -webkit-animation-name: openDownRight;
  animation-name: openDownRight;
}
@-webkit-keyframes openDownRight {
  0% {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openDownRight {
  0% {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}


================================================
FILE: assets/scss/static_effects/_openDownRightReturn.scss
================================================
.openDownRightReturn {
  -webkit-animation-name: openDownRightReturn;
  animation-name: openDownRightReturn;
}
@-webkit-keyframes openDownRightReturn {
  0% {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes openDownRightReturn {
  0% {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}


================================================
FILE: assets/scss/static_effects/_openUpLeft.scss
================================================
.openUpLeft {
  -webkit-animation-name: openUpLeft;
  animation-name: openUpLeft;
}
@-webkit-keyframes openUpLeft {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openUpLeft {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}


================================================
FILE: assets/scss/static_effects/_openUpLeftReturn.scss
================================================
.openUpLeftReturn {
  -webkit-animation-name: openUpLeftReturn;
  animation-name: openUpLeftReturn;
}
@-webkit-keyframes openUpLeftReturn {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes openUpLeftReturn {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}


================================================
FILE: assets/scss/static_effects/_openUpRight.scss
================================================
.openUpRight {
  -webkit-animation-name: openUpRight;
  animation-name: openUpRight;
}
@-webkit-keyframes openUpRight {
  0% {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openUpRight {
  0% {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}


================================================
FILE: assets/scss/static_effects/_openUpRightReturn.scss
================================================
.openUpRightReturn {
  -webkit-animation-name: openUpRightReturn;
  animation-name: openUpRightReturn;
}
@-webkit-keyframes openUpRightReturn {
  0% {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes openUpRightReturn {
  0% {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}


================================================
FILE: assets/scss/static_effects_out/_openDownLeftOut.scss
================================================
.openDownLeftOut {
  -webkit-animation-name: openDownLeftOut;
  animation-name: openDownLeftOut;
}
@-webkit-keyframes openDownLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openDownLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}


================================================
FILE: assets/scss/static_effects_out/_openDownRightOut.scss
================================================
.openDownRightOut {
  -webkit-animation-name: openDownRightOut;
  animation-name: openDownRightOut;
}
@-webkit-keyframes openDownRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openDownRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}


================================================
FILE: assets/scss/static_effects_out/_openUpLeftOut.scss
================================================
.openUpLeftOut {
  -webkit-animation-name: openUpLeftOut;
  animation-name: openUpLeftOut;
}
@-webkit-keyframes openUpLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openUpLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}


================================================
FILE: assets/scss/static_effects_out/_openUpRightOut.scss
================================================
.openUpRightOut {
  -webkit-animation-name: openUpRightOut;
  animation-name: openUpRightOut;
}
@-webkit-keyframes openUpRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openUpRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}


================================================
FILE: assets/scss/tin/_tinDownIn.scss
================================================
.tinDownIn {
  -webkit-animation-name: tinDownIn;
  animation-name: tinDownIn;
}
@-webkit-keyframes tinDownIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
    transform: scale(1, 1) translateY(900%);
  }

  50%,
  70%,
  90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%,
  80%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinDownIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
    transform: scale(1, 1) translateY(900%);
  }

  50%,
  70%,
  90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%,
  80%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}


================================================
FILE: assets/scss/tin/_tinDownOut.scss
================================================
.tinDownOut {
  -webkit-animation-name: tinDownOut;
  animation-name: tinDownOut;
}
@-webkit-keyframes tinDownOut {
  0%,
  20%,
  40%,
  50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }

  10%,
  30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
    transform: scale(1, 1) translateY(900%);
  }
}
@keyframes tinDownOut {
  0%,
  20%,
  40%,
  50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }

  10%,
  30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
    transform: scale(1, 1) translateY(900%);
  }
}


================================================
FILE: assets/scss/tin/_tinLeftIn.scss
================================================
.tinLeftIn {
  -webkit-animation-name: tinLeftIn;
  animation-name: tinLeftIn;
}
@-webkit-keyframes tinLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
    transform: scale(1, 1) translateX(-900%);
  }

  50%,
  70%,
  90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%,
  80%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
    transform: scale(1, 1) translateX(-900%);
  }

  50%,
  70%,
  90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%,
  80%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}


================================================
FILE: assets/scss/tin/_tinLeftOut.scss
================================================
.tinLeftOut {
  -webkit-animation-name: tinLeftOut;
  animation-name: tinLeftOut;
}
@-webkit-keyframes tinLeftOut {
  0%,
  20%,
  40%,
  50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }

  10%,
  30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
    transform: scale(1, 1) translateX(-900%);
  }
}
@keyframes tinLeftOut {
  0%,
  20%,
  40%,
  50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }

  10%,
  30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
    transform: scale(1, 1) translateX(-900%);
  }
}


================================================
FILE: assets/scss/tin/_tinRightIn.scss
================================================
.tinRightIn {
  -webkit-animation-name: tinRightIn;
  animation-name: tinRightIn;
}
@-webkit-keyframes tinRightIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
    transform: scale(1, 1) translateX(900%);
  }

  50%,
  70%,
  90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%,
  80%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinRightIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
    transform: scale(1, 1) translateX(900%);
  }

  50%,
  70%,
  90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%,
  80%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }
}


================================================
FILE: assets/scss/tin/_tinRightOut.scss
================================================
.tinRightOut {
  -webkit-animation-name: tinRightOut;
  animation-name: tinRightOut;
}
@-webkit-keyframes tinRightOut {
  0%,
  20%,
  40%,
  50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }

  10%,
  30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
    transform: scale(1, 1) translateX(900%);
  }
}
@keyframes tinRightOut {
  0%,
  20%,
  40%,
  50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
    transform: scale(1, 1) translateX(0);
  }

  10%,
  30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
    transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
    transform: scale(1, 1) translateX(900%);
  }
}


================================================
FILE: assets/scss/tin/_tinUpIn.scss
================================================
.tinUpIn {
  -webkit-animation-name: tinUpIn;
  animation-name: tinUpIn;
}
@-webkit-keyframes tinUpIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
    transform: scale(1, 1) translateY(-900%);
  }

  50%,
  70%,
  90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%,
  80%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinUpIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
    transform: scale(1, 1) translateY(-900%);
  }

  50%,
  70%,
  90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  60%,
  80%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
}


================================================
FILE: assets/scss/tin/_tinUpOut.scss
================================================
.tinUpOut {
  -webkit-animation-name: tinUpOut;
  animation-name: tinUpOut;
}
@-webkit-keyframes tinUpOut {
  0%,
  20%,
  40%,
  50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }

  10%,
  30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
    transform: scale(1, 1) translateY(-900%);
  }
}
@keyframes tinUpOut {
  0%,
  20%,
  40%,
  50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }

  10%,
  30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
    transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
    transform: scale(1, 1) translateY(-900%);
  }
}


================================================
FILE: dist/magic.css
================================================
/*!
 * Magic - https://www.minimamente.com
 * Licensed under the MIT license - https://opensource.org/licenses/MIT
 * Copyright (c) 2022 Christian Pucci
 */
.puffIn {
  -webkit-animation-name: puffIn;
          animation-name: puffIn;
}

@-webkit-keyframes puffIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}
@keyframes puffIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}
.puffOut {
  -webkit-animation-name: puffOut;
          animation-name: puffOut;
}

@-webkit-keyframes puffOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
}
@keyframes puffOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
}
.vanishIn {
  -webkit-animation-name: vanishIn;
          animation-name: vanishIn;
}

@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(90px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}
@keyframes vanishIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(90px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}
.vanishOut {
  -webkit-animation-name: vanishOut;
          animation-name: vanishOut;
}

@-webkit-keyframes vanishOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(20px);
  }
}
@keyframes vanishOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(20px);
  }
}
.boingInUp {
  -webkit-animation-name: boingInUp;
  animation-name: boingInUp;
}

@-webkit-keyframes boingInUp {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: perspective(800px) rotateX(-90deg);
  }
  50% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: perspective(800px) rotateX(50deg);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes boingInUp {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: perspective(800px) rotateX(-90deg);
  }
  50% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: perspective(800px) rotateX(50deg);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: perspective(800px) rotateX(0deg);
  }
}
.boingOutDown {
  -webkit-animation-name: boingOutDown;
  animation-name: boingOutDown;
}

@-webkit-keyframes boingOutDown {
  0% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  20% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }
  30% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  40% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  }
}
@keyframes boingOutDown {
  0% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  20% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }
  30% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  40% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  }
}
.bombLeftOut {
  -webkit-animation-name: bombLeftOut;
  animation-name: bombLeftOut;
}

@-webkit-keyframes bombLeftOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 1;
    transform-origin: -100% 50%;
    transform: rotate(-160deg);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: -100% 50%;
    transform: rotate(-160deg);
    filter: blur(20px);
  }
}
@keyframes bombLeftOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 1;
    transform-origin: -100% 50%;
    transform: rotate(-160deg);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: -100% 50%;
    transform: rotate(-160deg);
    filter: blur(20px);
  }
}
.bombRightOut {
  -webkit-animation-name: bombRightOut;
  animation-name: bombRightOut;
}

@-webkit-keyframes bombRightOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 1;
    transform-origin: 200% 50%;
    transform: rotate(160deg);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 200% 50%;
    transform: rotate(160deg);
    filter: blur(20px);
  }
}
@keyframes bombRightOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 1;
    transform-origin: 200% 50%;
    transform: rotate(160deg);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 200% 50%;
    transform: rotate(160deg);
    filter: blur(20px);
  }
}
.magic {
  -webkit-animation-name: magic;
  animation-name: magic;
}

@-webkit-keyframes magic {
  0% {
    opacity: 1;
    transform-origin: 100% 200%;
    transform: scale(1, 1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 200% 500%;
    transform: scale(0, 0) rotate(270deg);
  }
}
@keyframes magic {
  0% {
    opacity: 1;
    transform-origin: 100% 200%;
    transform: scale(1, 1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 200% 500%;
    transform: scale(0, 0) rotate(270deg);
  }
}
.swap {
  -webkit-animation-name: swap;
  animation-name: swap;
}

@-webkit-keyframes swap {
  0% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: scale(0, 0) translate(-700px, 0px);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1) translate(0px, 0px);
  }
}
@keyframes swap {
  0% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: scale(0, 0) translate(-700px, 0px);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1) translate(0px, 0px);
  }
}
.twisterInDown {
  -webkit-animation-name: twisterInDown;
  animation-name: twisterInDown;
}

@-webkit-keyframes twisterInDown {
  0% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }
  30% {
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
@keyframes twisterInDown {
  0% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }
  30% {
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
.twisterInUp {
  -webkit-animation-name: twisterInUp;
  animation-name: twisterInUp;
}

@-webkit-keyframes twisterInUp {
  0% {
    opacity: 0;
    transform-origin: 100% 0;
    transform: scale(0, 0) rotate(360deg) translateY(100%);
  }
  30% {
    transform-origin: 100% 0;
    transform: scale(0, 0) rotate(360deg) translateY(100%);
  }
  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: scale(1, 1) rotate(0deg) translateY(0);
  }
}
@keyframes twisterInUp {
  0% {
    opacity: 0;
    transform-origin: 100% 0;
    transform: scale(0, 0) rotate(360deg) translateY(100%);
  }
  30% {
    transform-origin: 100% 0;
    transform: scale(0, 0) rotate(360deg) translateY(100%);
  }
  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: scale(1, 1) rotate(0deg) translateY(0);
  }
}
.foolishIn {
  -webkit-animation-name: foolishIn;
  animation-name: foolishIn;
}

@-webkit-keyframes foolishIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0) rotate(360deg);
  }
  20% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform-origin: 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  80% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1) rotate(0deg);
  }
}
@keyframes foolishIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0) rotate(360deg);
  }
  20% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform-origin: 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  80% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1) rotate(0deg);
  }
}
.foolishOut {
  -webkit-animation-name: foolishOut;
  animation-name: foolishOut;
}

@-webkit-keyframes foolishOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1) rotate(360deg);
  }
  20% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform-origin: 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  80% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0) rotate(0deg);
  }
}
@keyframes foolishOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1) rotate(360deg);
  }
  20% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform-origin: 0%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  80% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scale(0.5, 0.5) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0) rotate(0deg);
  }
}
.holeOut {
  -webkit-animation-name: holeOut;
  animation-name: holeOut;
}

@-webkit-keyframes holeOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1) rotateY(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0) rotateY(180deg);
  }
}
@keyframes holeOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1) rotateY(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0) rotateY(180deg);
  }
}
.swashIn {
  -webkit-animation-name: swashIn;
  animation-name: swashIn;
}

@-webkit-keyframes swashIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
  90% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}
@keyframes swashIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
  90% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}
.swashOut {
  -webkit-animation-name: swashOut;
  animation-name: swashOut;
}

@-webkit-keyframes swashOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
  80% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
}
@keyframes swashOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
  80% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
}
.spaceInDown {
  -webkit-animation-name: spaceInDown;
  animation-name: spaceInDown;
}

@-webkit-keyframes spaceInDown {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.2) translate(0%, 200%);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInDown {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.2) translate(0%, 200%);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1) translate(0%, 0%);
  }
}
.spaceInLeft {
  -webkit-animation-name: spaceInLeft;
  animation-name: spaceInLeft;
}

@-webkit-keyframes spaceInLeft {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.2) translate(-200%, 0%);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInLeft {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.2) translate(-200%, 0%);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}
.spaceInRight {
  -webkit-animation-name: spaceInRight;
  animation-name: spaceInRight;
}

@-webkit-keyframes spaceInRight {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.2) translate(200%, 0%);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInRight {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.2) translate(200%, 0%);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}
.spaceInUp {
  -webkit-animation-name: spaceInUp;
  animation-name: spaceInUp;
}

@-webkit-keyframes spaceInUp {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.2) translate(0%, -200%);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInUp {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.2) translate(0%, -200%);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%);
  }
}
.spaceOutDown {
  -webkit-animation-name: spaceOutDown;
  animation-name: spaceOutDown;
}

@-webkit-keyframes spaceOutDown {
  0% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1) translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.2) translate(0%, 200%);
  }
}
@keyframes spaceOutDown {
  0% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1) translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.2) translate(0%, 200%);
  }
}
.spaceOutLeft {
  -webkit-animation-name: spaceOutLeft;
  animation-name: spaceOutLeft;
}

@-webkit-keyframes spaceOutLeft {
  0% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.2) translate(-200%, 0%);
  }
}
@keyframes spaceOutLeft {
  0% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.2) translate(-200%, 0%);
  }
}
.spaceOutRight {
  -webkit-animation-name: spaceOutRight;
  animation-name: spaceOutRight;
}

@-webkit-keyframes spaceOutRight {
  0% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.2) translate(200%, 0%);
  }
}
@keyframes spaceOutRight {
  0% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.2) translate(200%, 0%);
  }
}
.spaceOutUp {
  -webkit-animation-name: spaceOutUp;
  animation-name: spaceOutUp;
}

@-webkit-keyframes spaceOutUp {
  0% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.2) translate(0%, -200%);
  }
}
@keyframes spaceOutUp {
  0% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.2) translate(0%, -200%);
  }
}
.perspectiveDown {
  -webkit-animation-name: perspectiveDown;
  animation-name: perspectiveDown;
}

@-webkit-keyframes perspectiveDown {
  0% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(0deg);
  }
  100% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(-180deg);
  }
}
@keyframes perspectiveDown {
  0% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(0deg);
  }
  100% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(-180deg);
  }
}
.perspectiveDownReturn {
  -webkit-animation-name: perspectiveDownReturn;
  animation-name: perspectiveDownReturn;
}

@-webkit-keyframes perspectiveDownReturn {
  0% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(-180deg);
  }
  100% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes perspectiveDownReturn {
  0% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(-180deg);
  }
  100% {
    transform-origin: 0 100%;
    transform: perspective(800px) rotateX(0deg);
  }
}
.perspectiveLeft {
  -webkit-animation-name: perspectiveLeft;
  animation-name: perspectiveLeft;
}

@-webkit-keyframes perspectiveLeft {
  0% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg);
  }
  100% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(-180deg);
  }
}
@keyframes perspectiveLeft {
  0% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg);
  }
  100% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(-180deg);
  }
}
.perspectiveLeftReturn {
  -webkit-animation-name: perspectiveLeftReturn;
  animation-name: perspectiveLeftReturn;
}

@-webkit-keyframes perspectiveLeftReturn {
  0% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(-180deg);
  }
  100% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg);
  }
}
@keyframes perspectiveLeftReturn {
  0% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(-180deg);
  }
  100% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg);
  }
}
.perspectiveRight {
  -webkit-animation-name: perspectiveRight;
  animation-name: perspectiveRight;
}

@-webkit-keyframes perspectiveRight {
  0% {
    transform-origin: 100% 0;
    transform: perspective(800px) rotateY(0deg);
  }
  100% {
    transform-origin: 100% 0;
    transform: perspective(800px) rotateY(180deg);
  }
}
@keyframes perspectiveRight {
  0% {
    transform-origin: 100% 0;
    transform: perspective(800px) rotateY(0deg);
  }
  100% {
    transform-origin: 100% 0;
    transform: perspective(800px) rotateY(180deg);
  }
}
.perspectiveRightReturn {
  -webkit-animation-name: perspectiveRightReturn;
  animation-name: perspectiveRightReturn;
}

@-webkit-keyframes perspectiveRightReturn {
  0% {
    transform-origin: 100% 0;
    transform: perspective(800px) rotateY(180deg);
  }
  100% {
    transform-origin: 100% 0;
    transform: perspective(800px) rotateY(0deg);
  }
}
@keyframes perspectiveRightReturn {
  0% {
    transform-origin: 100% 0;
    transform: perspective(800px) rotateY(180deg);
  }
  100% {
    transform-origin: 100% 0;
    transform: perspective(800px) rotateY(0deg);
  }
}
.perspectiveUp {
  -webkit-animation-name: perspectiveUp;
  animation-name: perspectiveUp;
}

@-webkit-keyframes perspectiveUp {
  0% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg);
  }
  100% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(180deg);
  }
}
@keyframes perspectiveUp {
  0% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg);
  }
  100% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(180deg);
  }
}
.perspectiveUpReturn {
  -webkit-animation-name: perspectiveUpReturn;
  animation-name: perspectiveUpReturn;
}

@-webkit-keyframes perspectiveUpReturn {
  0% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(180deg);
  }
  100% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes perspectiveUpReturn {
  0% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(180deg);
  }
  100% {
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg);
  }
}
.rotateDown {
  -webkit-animation-name: rotateDown;
  animation-name: rotateDown;
}

@-webkit-keyframes rotateDown {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}
@keyframes rotateDown {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}
.rotateLeft {
  -webkit-animation-name: rotateLeft;
  animation-name: rotateLeft;
}

@-webkit-keyframes rotateLeft {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateY(-180deg) translateZ(300px);
  }
}
@keyframes rotateLeft {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateY(-180deg) translateZ(300px);
  }
}
.rotateRight {
  -webkit-animation-name: rotateRight;
  animation-name: rotateRight;
}

@-webkit-keyframes rotateRight {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateY(180deg) translateZ(150px);
  }
}
@keyframes rotateRight {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateY(180deg) translateZ(150px);
  }
}
.rotateUp {
  -webkit-animation-name: rotateUp;
  animation-name: rotateUp;
}

@-webkit-keyframes rotateUp {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}
@keyframes rotateUp {
  0% {
    opacity: 1;
    transform-origin: 0 0;
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0;
    transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}
.slideDown {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}

@-webkit-keyframes slideDown {
  0% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(100%);
  }
}
@keyframes slideDown {
  0% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(100%);
  }
}
.slideDownReturn {
  -webkit-animation-name: slideDownReturn;
  animation-name: slideDownReturn;
}

@-webkit-keyframes slideDownReturn {
  0% {
    transform-origin: 0 0;
    transform: translateY(100%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
}
@keyframes slideDownReturn {
  0% {
    transform-origin: 0 0;
    transform: translateY(100%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
}
.slideLeft {
  -webkit-animation-name: slideLeft;
  animation-name: slideLeft;
}

@-webkit-keyframes slideLeft {
  0% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(-100%);
  }
}
@keyframes slideLeft {
  0% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(-100%);
  }
}
.slideLeftReturn {
  -webkit-animation-name: slideLeftReturn;
  animation-name: slideLeftReturn;
}

@-webkit-keyframes slideLeftReturn {
  0% {
    transform-origin: 0 0;
    transform: translateX(-100%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}
@keyframes slideLeftReturn {
  0% {
    transform-origin: 0 0;
    transform: translateX(-100%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}
.slideRight {
  -webkit-animation-name: slideRight;
  animation-name: slideRight;
}

@-webkit-keyframes slideRight {
  0% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(100%);
  }
}
@keyframes slideRight {
  0% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(100%);
  }
}
.slideRightReturn {
  -webkit-animation-name: slideRightReturn;
  animation-name: slideRightReturn;
}

@-webkit-keyframes slideRightReturn {
  0% {
    transform-origin: 0 0;
    transform: translateX(100%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}
@keyframes slideRightReturn {
  0% {
    transform-origin: 0 0;
    transform: translateX(100%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}
.slideUp {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}

@-webkit-keyframes slideUp {
  0% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(-100%);
  }
}
@keyframes slideUp {
  0% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(-100%);
  }
}
.slideUpReturn {
  -webkit-animation-name: slideUpReturn;
  animation-name: slideUpReturn;
}

@-webkit-keyframes slideUpReturn {
  0% {
    transform-origin: 0 0;
    transform: translateY(-100%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
}
@keyframes slideUpReturn {
  0% {
    transform-origin: 0 0;
    transform: translateY(-100%);
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
}
.openDownLeft {
  -webkit-animation-name: openDownLeft;
  animation-name: openDownLeft;
}

@-webkit-keyframes openDownLeft {
  0% {
    transform-origin: bottom left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    transform-origin: bottom left;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openDownLeft {
  0% {
    transform-origin: bottom left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    transform-origin: bottom left;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
.openDownLeftReturn {
  -webkit-animation-name: openDownLeftReturn;
  animation-name: openDownLeftReturn;
}

@-webkit-keyframes openDownLeftReturn {
  0% {
    transform-origin: bottom left;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform-origin: bottom left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes openDownLeftReturn {
  0% {
    transform-origin: bottom left;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform-origin: bottom left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.openDownRight {
  -webkit-animation-name: openDownRight;
  animation-name: openDownRight;
}

@-webkit-keyframes openDownRight {
  0% {
    transform-origin: bottom right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    transform-origin: bottom right;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openDownRight {
  0% {
    transform-origin: bottom right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    transform-origin: bottom right;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
.openDownRightReturn {
  -webkit-animation-name: openDownRightReturn;
  animation-name: openDownRightReturn;
}

@-webkit-keyframes openDownRightReturn {
  0% {
    transform-origin: bottom right;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform-origin: bottom right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes openDownRightReturn {
  0% {
    transform-origin: bottom right;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform-origin: bottom right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.openUpLeft {
  -webkit-animation-name: openUpLeft;
  animation-name: openUpLeft;
}

@-webkit-keyframes openUpLeft {
  0% {
    transform-origin: top left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    transform-origin: top left;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openUpLeft {
  0% {
    transform-origin: top left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    transform-origin: top left;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
.openUpLeftReturn {
  -webkit-animation-name: openUpLeftReturn;
  animation-name: openUpLeftReturn;
}

@-webkit-keyframes openUpLeftReturn {
  0% {
    transform-origin: top left;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform-origin: top left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes openUpLeftReturn {
  0% {
    transform-origin: top left;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform-origin: top left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.openUpRight {
  -webkit-animation-name: openUpRight;
  animation-name: openUpRight;
}

@-webkit-keyframes openUpRight {
  0% {
    transform-origin: top right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    transform-origin: top right;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openUpRight {
  0% {
    transform-origin: top right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    transform-origin: top right;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
.openUpRightReturn {
  -webkit-animation-name: openUpRightReturn;
  animation-name: openUpRightReturn;
}

@-webkit-keyframes openUpRightReturn {
  0% {
    transform-origin: top right;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform-origin: top right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes openUpRightReturn {
  0% {
    transform-origin: top right;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform-origin: top right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.openDownLeftOut {
  -webkit-animation-name: openDownLeftOut;
  animation-name: openDownLeftOut;
}

@-webkit-keyframes openDownLeftOut {
  0% {
    opacity: 1;
    transform-origin: bottom left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform-origin: bottom left;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openDownLeftOut {
  0% {
    opacity: 1;
    transform-origin: bottom left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform-origin: bottom left;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
.openDownRightOut {
  -webkit-animation-name: openDownRightOut;
  animation-name: openDownRightOut;
}

@-webkit-keyframes openDownRightOut {
  0% {
    opacity: 1;
    transform-origin: bottom right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform-origin: bottom right;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openDownRightOut {
  0% {
    opacity: 1;
    transform-origin: bottom right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform-origin: bottom right;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
.openUpLeftOut {
  -webkit-animation-name: openUpLeftOut;
  animation-name: openUpLeftOut;
}

@-webkit-keyframes openUpLeftOut {
  0% {
    opacity: 1;
    transform-origin: top left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform-origin: top left;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openUpLeftOut {
  0% {
    opacity: 1;
    transform-origin: top left;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform-origin: top left;
    transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
.openUpRightOut {
  -webkit-animation-name: openUpRightOut;
  animation-name: openUpRightOut;
}

@-webkit-keyframes openUpRightOut {
  0% {
    opacity: 1;
    transform-origin: top right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform-origin: top right;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
@keyframes openUpRightOut {
  0% {
    opacity: 1;
    transform-origin: top right;
    transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform-origin: top right;
    transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}
.tinDownIn {
  -webkit-animation-name: tinDownIn;
  animation-name: tinDownIn;
}

@-webkit-keyframes tinDownIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(900%);
  }
  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0);
  }
  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinDownIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(900%);
  }
  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0);
  }
  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
}
.tinDownOut {
  -webkit-animation-name: tinDownOut;
  animation-name: tinDownOut;
}

@-webkit-keyframes tinDownOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  10%, 30% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1) translateY(900%);
  }
}
@keyframes tinDownOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  10%, 30% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1) translateY(900%);
  }
}
.tinLeftIn {
  -webkit-animation-name: tinLeftIn;
  animation-name: tinLeftIn;
}

@-webkit-keyframes tinLeftIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(-900%);
  }
  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateX(0);
  }
  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinLeftIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(-900%);
  }
  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateX(0);
  }
  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
}
.tinLeftOut {
  -webkit-animation-name: tinLeftOut;
  animation-name: tinLeftOut;
}

@-webkit-keyframes tinLeftOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
  10%, 30% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1) translateX(-900%);
  }
}
@keyframes tinLeftOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
  10%, 30% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1) translateX(-900%);
  }
}
.tinRightIn {
  -webkit-animation-name: tinRightIn;
  animation-name: tinRightIn;
}

@-webkit-keyframes tinRightIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(900%);
  }
  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateX(0);
  }
  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinRightIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(900%);
  }
  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateX(0);
  }
  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
}
.tinRightOut {
  -webkit-animation-name: tinRightOut;
  animation-name: tinRightOut;
}

@-webkit-keyframes tinRightOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
  10%, 30% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1) translateX(900%);
  }
}
@keyframes tinRightOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
  10%, 30% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1) translateX(900%);
  }
}
.tinUpIn {
  -webkit-animation-name: tinUpIn;
  animation-name: tinUpIn;
}

@-webkit-keyframes tinUpIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(-900%);
  }
  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0);
  }
  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinUpIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(-900%);
  }
  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0);
  }
  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
}
.tinUpOut {
  -webkit-animation-name: tinUpOut;
  animation-name: tinUpOut;
}

@-webkit-keyframes tinUpOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  10%, 30% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1) translateY(-900%);
  }
}
@keyframes tinUpOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  10%, 30% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1) translateY(-900%);
  }
}
.magictime {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@media (print), (prefers-reduced-motion) {
  .magictime {
    -webkit-animation: unset !important;
            animation: unset !important;
    transition: none !important;
  }
}
/*# sourceMappingURL=magic.css.map */

================================================
FILE: gulpfile.js
================================================
/**
 * Gulp
 *
 * npm i --save-dev gulp sass gulp-sass postcss gulp-postcss autoprefixer gulp-rename cssnano gulp-cssnano
 *
 * @see https://gulpjs.com/
 */

const { src, dest, watch, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const rename = require('gulp-rename');

// Define project paths
let paths = {
    styles: {
        // grab all .scss files from that path
        src: 'assets/scss/*.scss',
        // destination path
        dest: 'dist'
    }
};

// SCSS
function style() {
    return src(paths.styles.src, { sourcemaps: true })
        .pipe(sass().on("error", sass.logError))
        .pipe(postcss([ autoprefixer() ]))
        .pipe(dest(paths.styles.dest, { sourcemaps: '.' }))
}

function styleMin() {
    return src(paths.styles.src, { sourcemaps: true })
        .pipe(sass().on("error", sass.logError))
        .pipe(postcss([ autoprefixer(), cssnano() ]))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(dest(paths.styles.dest, { sourcemaps: '.' }));
}


// Watchers
watch('assets/scss/*.scss', style);

// Yo baby!! ✌️
exports.default = parallel( style, styleMin );

================================================
FILE: package.json
================================================
{
  "name": "magic.css",
  "version": "1.4.8",
  "description": "Magic CSS3 animations",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/miniMAC/magic.git"
  },
  "author": "Christian Pucci <minimac@minimamente.com> (https://www.minimamente.com/)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/miniMAC/magic/issues"
  },
  "homepage": "https://github.com/miniMAC/magic#readme",
  "devDependencies": {
    "autoprefixer": "^10.3.7",
    "cssnano": "^5.0.8",
    "gulp": "^4.0.2",
    "gulp-cssnano": "^1.1.0",
    "gulp-postcss": "^9.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "np": "^7.6.2",
    "postcss": "^8.3.9",
    "sass": "^1.49.8"
  },
  "keywords": [
    "css",
    "css3",
    "animation",
    "animations",
    "magic"
  ]
}