[
  {
    "path": ".editorconfig",
    "content": "# EditorConfig is awesome: http://EditorConfig.org\n\n# editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".gitignore",
    "content": ".grunt\n/.sass-cache/\ndist\nnode_modules/\n/tmp/\n.DS_Store\nnpm-debug.log\nbower_components/\n\n"
  },
  {
    "path": "Gruntfile.js",
    "content": "module.exports = function(grunt) {\n\n  // Load NPM Tasks\n  // https://github.com/shootaroo/jit-grunt\n  require('jit-grunt')(grunt);\n\n  grunt.initConfig({\n    pkg: grunt.file.readJSON( 'package.json' ),\n\n    // Copied from Bootstrap\n    banner: '/*!\\n' +\n            ' * Effeckt v<%= pkg.version %>\\n' +\n            ' */\\n',\n    jqueryCheck: 'if (typeof jQuery === \\'undefined\\') { throw new Error(\\'Effeckt\\\\\\'s JavaScript requires jQuery\\') }\\n\\n',\n\n    // == Grunt Dev Update\n    // https://npmjs.org/package/grunt-dev-update\n    // http://pgilad.github.io/grunt-dev-update\n    devUpdate: {\n      main: {\n        options: {\n          reportUpdated: false, // Report updated dependencies: 'false' | 'true'\n          updateType   : \"force\" // 'force'|'report'|'prompt'\n        }\n      }\n    },\n\n    watch: {\n      scss: {\n        files: ['scss/**/*.scss'],\n        tasks: 'scss'\n      },\n      html: {\n        files: ['src/**/*.hbs'],\n        tasks: 'html'\n      },\n      js: {\n        files: ['js/**/*.js'],\n        tasks: 'js'\n      },\n      livereload: {\n        options: {\n          livereload: true\n        },\n        files: [\n          'dist/**/*.html',\n          'dist/assets/css/{,*/}*.css',\n          'dist/assets/js/{,*/}*.js'\n        ]\n      }\n    },\n\n    sass: {\n      build: {\n        files : [\n          {\n            src : ['**/*.scss', '!**/_*.scss'],\n            cwd : 'scss',\n            dest : 'css',\n            ext : '.css',\n            expand : true\n          }\n        ],\n        options : {\n          style : 'expanded'\n        }\n      }\n    },\n\n    // https://github.com/nDmitry/grunt-autoprefixer\n    autoprefixer: {\n      build: {\n        options: {\n          browsers: ['last 2 versions', '> 1%']\n        },\n        files: [\n          {\n            src : ['**/*.css'],\n            cwd : 'css',\n            dest : 'css',\n            expand : true\n          }\n        ]\n      }\n    },\n\n    connect: {\n      server: {\n        options: {\n          port: 9001,\n          protocol: 'http',\n          hostname: 'localhost',\n          base: './dist/',  // '.' operates from the root of your Gruntfile, otherwise -> 'Users/user-name/www-directory/website-directory'\n          keepalive: false, // set to false to work side by side w/watch task.\n          livereload: true,\n          open: true\n        }\n      }\n    },\n\n    assemble: {\n      options: {\n        flatten: true,\n        layout: 'layout.hbs',\n        layoutdir: 'src/templates/layouts',\n        assets: 'dist/assets',\n        partials: ['src/templates/pages/*.hbs', 'src/templates/parts/*.hbs']\n      },\n      demo: {\n        options: {\n          data: ['src/data/*.{json,yml}']\n        },\n        files: {\n          'dist/': ['src/templates/pages/*.hbs']\n        }\n      }\n    },\n\n    copy: {\n      demo: {\n        files: [\n          { expand: true, cwd: './css', src: ['./**/*.*'], dest: 'dist/assets/css' },\n          { expand: true, cwd: './js', src: ['./**/*.*'], dest: 'dist/assets/js' },\n          { expand: true, flatten: true, cwd: './bower_components/jQuery', src:['./dist/*.min.*'], dest: 'dist/assets/js/libs/' },\n          { expand: true, flatten: true, cwd: './bower_components/modernizr', src:['./modernizr.js'], dest: 'dist/assets/js/libs/' }\n        ]\n      },\n      css: {\n        files: [\n          { expand: true, cwd: './css', src: ['./**/*.*'], dest: 'dist/assets/css' }\n        ]\n      },\n      js: {\n        files: [\n          { expand: true, flatten: true, cwd: './bower_components/jQuery', src: ['./dist/*.min.*'], dest: 'dist/assets/js/libs/' },\n          { expand: true, flatten: true, cwd: './bower_components/modernizr', src: ['./modernizr.js'], dest: 'dist/assets/js/libs/' },\n          { expand: true, cwd: './js', src: ['./**/*.*'], dest: 'dist/assets/js' }\n        ]\n      }\n    },\n\n    concat: {\n      options: {\n        banner: '<%= banner %>\\n<%= jqueryCheck %>',\n        stripBanners: false\n      },\n      bootstrap: {\n        src: [\n          'js/modules/core.js',\n          'js/modules/buttons.js',\n          'js/modules/captions.js',\n          'js/modules/list-items.js',\n          'js/modules/list-scroll.js',\n          'js/modules/modals.js',\n          'js/modules/off-screen-nav.js',\n          'js/modules/page-transition.js',\n          'js/modules/positional-modals.js',\n          'js/modules/tabs.js'\n        ],\n        dest: 'dist/assets/js/<%= pkg.name %>.js'\n      }\n    },\n\n    'gh-pages': {\n      options: {\n        base: 'dist'\n      },\n      forked: {\n        options: {\n          base: 'dist'\n        },\n        src: ['**/*']\n      },\n      remote: {\n        options: {\n          base: 'dist',\n          repo: 'https://github.com/h5bp/Effeckt.css'\n        },\n        src: ['**/*']\n      }\n    }\n\n  });\n\n  grunt.registerTask('update', ['devUpdate']);\n  grunt.registerTask('default', ['sass', 'autoprefixer', 'assemble', 'copy']);\n  grunt.registerTask('scss', ['sass', 'autoprefixer', 'copy:css']);\n  grunt.registerTask('html', ['assemble']);\n  grunt.registerTask('js', ['copy:js', 'concat']);\n  grunt.registerTask('dev', ['connect', 'watch']);\n  grunt.registerTask('demo', ['copy:demo', 'assemble:demo']);\n  grunt.registerTask('deploy', ['gh-pages:remote']);\n};\n"
  },
  {
    "path": "License.md",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2013-2015 Contributors to https://github.com/h5bp/Effeckt.css/\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
  },
  {
    "path": "bower.json",
    "content": "{\n  \"name\": \"Effeckt.css\",\n  \"version\": \"0.5.0\",\n  \"homepage\": \"https://github.com/h5bp/Effeckt.css\",\n  \"authors\": [\n    \"h5bp\",\n    \"github contributors\"\n  ],\n  \"description\": \"A Performant Transitions and Animations Library\",\n  \"moduleType\": [\n    \"globals\"\n  ],\n  \"keywords\": [\n    \"effeckt\",\n    \"css\",\n    \"animations\",\n    \"css3\",\n    \"jquery\"\n  ],\n  \"license\": \"MIT\",\n  \"ignore\": [\n    \"**/.*\",\n    \"node_modules\",\n    \"bower_components\",\n    \"test\",\n    \"tests\"\n  ],\n  \"dependencies\": {\n    \"jQuery\": \"~2.1.4\",\n    \"modernizr\": \"~2.8.3\"\n  }\n}\n"
  },
  {
    "path": "css/demo/demo.css",
    "content": "* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box; }\n\n.warning {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  padding: 0.5rem;\n  background: linear-gradient(#fff94d, #ddd610);\n  opacity: 0.95;\n  text-align: center;\n  z-index: 1000; }\n\n.no-transitions, .no-transitions * {\n  transition: none !important; }\n\n.group:after {\n  content: \"\";\n  display: block;\n  clear: both; }\n\n:root {\n  font-size: large;\n  line-height: 1.4; }\n  @media (max-width: 500px) {\n    :root {\n      font-size: small; } }\n\nhtml, body {\n  height: 100%;\n  overflow: hidden; }\n\nbody {\n  background: #eee;\n  font-family: Sans-serif;\n  overflow: hidden; }\n  @media (max-width: 500px) { }\n\n.page-wrap {\n  float: right;\n  width: 100%; }\n\n.effeckt {\n  padding: 2rem;\n  background: white;\n  margin: 0 0 1rem 0; }\n  @media (max-width: 500px) {\n    .effeckt {\n      padding: 1.5rem; } }\n  .effeckt header {\n    margin: 0 0 1rem 0;\n    border-bottom: 2px solid #eee;\n    position: relative; }\n    .effeckt header .source {\n      position: absolute;\n      right: 0;\n      bottom: 2px; }\n      @media (max-width: 500px) {\n        .effeckt header .source {\n          position: relative;\n          display: block;\n          margin: 0.2rem 0; } }\n    .effeckt header:nth-of-type(n+2) {\n      margin-top: 2rem; }\n\n.button-group {\n  line-height: 2; }\n\na {\n  text-decoration: none;\n  color: #ccc; }\n\na:hover, a:active {\n  color: black; }\n\nsubhead {\n  display: block;\n  font-size: 1.4rem;\n  margin: 0 0 2rem 0; }\n\n.mobile-break {\n  display: none; }\n  @media (max-width: 500px) {\n    .mobile-break {\n      display: block; } }\n\nh1 {\n  margin: 0 0 1rem 0; }\n  @media (max-width: 500px) {\n    h1 {\n      line-height: 0.8; } }\n\nh1 span {\n  font-size: 1.5rem;\n  position: relative;\n  display: inline-block;\n  opacity: 0;\n  width: 50px;\n  height: 50px;\n  line-height: 50px;\n  background: #ccc;\n  color: white;\n  text-align: center;\n  text-transform: uppercase; }\n  @media (max-width: 500px) {\n    h1 span {\n      font-size: 0.8rem;\n      width: 28px;\n      height: 28px;\n      line-height: 28px; } }\n\nh2 {\n  margin: 0; }\n\nh3 {\n  margin: 0; }\n\nh4 {\n  margin: 0 0 0.5rem 0; }\n\np, ul, ol, blockquote, pre {\n  margin: 0 0 1rem 0; }\n\nbutton {\n  padding: 0.25rem; }\n\nhr {\n  height: 0;\n  border: 0;\n  border-top: 1px solid #ccc; }\n\nh1 span:nth-of-type(1) {\n  -webkit-animation: logo-from-horz 0.5s ease forwards;\n          animation: logo-from-horz 0.5s ease forwards;\n  -webkit-transform: translateX(-50px);\n      -ms-transform: translateX(-50px);\n          transform: translateX(-50px);\n  background: #666; }\n\nh1 span:nth-of-type(2) {\n  -webkit-animation: logo-from-vert 0.5s 0.1s ease forwards;\n          animation: logo-from-vert 0.5s 0.1s ease forwards;\n  -webkit-transform: translateY(-50px);\n      -ms-transform: translateY(-50px);\n          transform: translateY(-50px);\n  background: #444; }\n\nh1 span:nth-of-type(3) {\n  -webkit-animation: logo-from-vert 0.5s 0.2s ease forwards;\n          animation: logo-from-vert 0.5s 0.2s ease forwards;\n  -webkit-transform: translateX(50px);\n      -ms-transform: translateX(50px);\n          transform: translateX(50px);\n  background: #666; }\n\nh1 span:nth-of-type(4) {\n  -webkit-animation: logo-from-horz 0.3s 0.3s ease forwards;\n          animation: logo-from-horz 0.3s 0.3s ease forwards;\n  -webkit-transform: translateX(50px);\n      -ms-transform: translateX(50px);\n          transform: translateX(50px);\n  background: #444; }\n\nh1 span:nth-of-type(5) {\n  -webkit-animation: logo-from-horz 0.3s 0.4s ease forwards;\n          animation: logo-from-horz 0.3s 0.4s ease forwards;\n  -webkit-transform: translateX(-50px);\n      -ms-transform: translateX(-50px);\n          transform: translateX(-50px);\n  background: #666; }\n\nh1 span:nth-of-type(6) {\n  -webkit-animation: logo-from-horz 0.3s 0.5s ease forwards;\n          animation: logo-from-horz 0.3s 0.5s ease forwards;\n  -webkit-transform: translateX(50px);\n      -ms-transform: translateX(50px);\n          transform: translateX(50px);\n  background: #444; }\n\nh1 span:nth-of-type(7) {\n  -webkit-animation: logo-from-vert 0.3s 0.6s ease forwards;\n          animation: logo-from-vert 0.3s 0.6s ease forwards;\n  -webkit-transform: translateY(-50px);\n      -ms-transform: translateY(-50px);\n          transform: translateY(-50px);\n  background: #666; }\n\nh1 span:nth-of-type(8) {\n  -webkit-animation: logo-from-horz 0.2s 1.1s ease forwards;\n          animation: logo-from-horz 0.2s 1.1s ease forwards;\n  -webkit-transform: translateX(1000px);\n      -ms-transform: translateX(1000px);\n          transform: translateX(1000px);\n  background: none;\n  color: black; }\n\nh1 span:nth-of-type(9) {\n  -webkit-animation: logo-from-horz 0.2s 1.1s ease forwards;\n          animation: logo-from-horz 0.2s 1.1s ease forwards;\n  -webkit-transform: translateX(1000px);\n      -ms-transform: translateX(1000px);\n          transform: translateX(1000px); }\n\nh1 span:nth-of-type(10) {\n  -webkit-animation: logo-from-horz 0.2s 1.1s ease forwards;\n          animation: logo-from-horz 0.2s 1.1s ease forwards;\n  -webkit-transform: translateX(1000px);\n      -ms-transform: translateX(1000px);\n          transform: translateX(1000px); }\n\nh1 span:nth-of-type(11) {\n  -webkit-animation: logo-from-horz 0.2s 1.1s ease forwards;\n          animation: logo-from-horz 0.2s 1.1s ease forwards;\n  -webkit-transform: translateX(1000px);\n      -ms-transform: translateX(1000px);\n          transform: translateX(1000px); }\n\n@-webkit-keyframes logo-from-horz {\n  100% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1; } }\n\n@keyframes logo-from-horz {\n  100% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1; } }\n\n@-webkit-keyframes logo-from-vert {\n  100% {\n    -webkit-transform: translateY(0);\n            transform: translateY(0);\n    opacity: 1; } }\n\n@keyframes logo-from-vert {\n  100% {\n    -webkit-transform: translateY(0);\n            transform: translateY(0);\n    opacity: 1; } }\n\n.contributors {\n  background: #222;\n  color: #eee; }\n  .contributors header {\n    border-bottom-color: #666; }\n  .contributors ol {\n    margin-left: 35px; }\n  .contributors hr {\n    margin: 15px 0; }\n\n.fluid-video {\n  height: 0;\n  padding-top: 62.5%;\n  position: relative; }\n  .fluid-video iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%; }\n\n.button-demo-wrap {\n  width: 35%;\n  float: left; }\n  .button-demo-wrap:nth-child(2n) {\n    clear: both; }\n  @media (max-width: 500px) {\n    .button-demo-wrap {\n      width: 100%;\n      float: none; } }\n\n.effeckt-list-wrap {\n  width: 50%;\n  float: left;\n  margin: 0 0 2rem 0; }\n  .effeckt-list-wrap:nth-child(even) {\n    clear: both;\n    padding-right: 20px; }\n\n.effeckt-demo-list-scroll > ul {\n  width: 32%;\n  float: left;\n  margin-right: 2%;\n  margin-bottom: 2%; }\n  .effeckt-demo-list-scroll > ul:nth-of-type(3n) {\n    margin-right: 0; }\n  @media (max-width: 500px) {\n    .effeckt-demo-list-scroll > ul {\n      width: 100%;\n      float: none;\n      height: 250px;\n      margin: 0 0 1rem 0; } }\n\n.effeckt-toggle-demo {\n  min-height: 220px; }\n\n[data-toggle-trigger] {\n  margin-bottom: 20px; }\n\n.effeckt-modal {\n  background: white; }\n  .effeckt-modal h3 {\n    padding: 1rem;\n    color: white;\n    background: #444; }\n\n.effeckt-modal-content {\n  padding: 1rem; }\n\n.effeckt-modal-overlay {\n  z-index: 1000;\n  background: rgba(0, 0, 0, 0.5); }\n\n.effeckt-positional-modal-wrap .effeckt-modal {\n  padding: 10px;\n  background: #ccc; }\n.effeckt-positional-modal-wrap .effeckt-modal-content {\n  background: white; }\n\n.effeckt-button {\n  background: #444;\n  color: white;\n  border: 0;\n  padding: 0.8rem 1rem;\n  font-family: inherit;\n  font-size: 1.3em;\n  margin: 0 0.25rem 0.6rem 0;\n  white-space: nowrap;\n  cursor: pointer;\n  outline: none;\n  -webkit-appearance: none;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"]:after {\n  background: #7aca7c;\n  color: #358337; }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"]:before {\n  background: #e96a6a;\n  color: #a33a3a; }\n\n.effeckt-button[data-loading] {\n  cursor: default; }\n\n.effeckt-page-transition {\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  overflow: hidden;\n  background: #555; }\n\n.effeckt-page-transition-content {\n  position: relative;\n  top: 50%;\n  left: 50%;\n  width: 200px;\n  margin: -100px 0 0 -100px;\n  color: white; }\n\n.effeckt-off-screen-nav {\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  overflow-y: auto;\n  background: #333;\n  visibility: hidden;\n  width: 12rem; }\n  .effeckt-off-screen-nav ul {\n    list-style: none; }\n  .effeckt-off-screen-nav li:first-child a {\n    border-top: 0; }\n  .effeckt-off-screen-nav li:last-child a {\n    border-bottom: 0; }\n  .effeckt-off-screen-nav li a {\n    display: block;\n    padding: 0.3rem 1rem;\n    color: white;\n    border-bottom: 1px solid #444; }\n    .effeckt-off-screen-nav li a:hover, .effeckt-off-screen-nav li a:focus {\n      background: #444; }\n    .effeckt-off-screen-nav li a:active {\n      background: #222; }\n  .effeckt-off-screen-nav header {\n    position: relative; }\n  .effeckt-off-screen-nav h4 {\n    color: white;\n    background: #333;\n    border-bottom: 1px solid #eee;\n    padding: 1rem 0.5rem 0.2rem 0;\n    margin: 0 1rem 1rem;\n    text-transform: uppercase;\n    font-size: 0.65rem;\n    letter-spacing: 0.1rem;\n    position: relative; }\n\n.effeckt-off-screen-nav-close {\n  position: absolute;\n  right: 1rem;\n  top: 0.65rem;\n  font-size: 100%;\n  z-index: 300; }\n  .effeckt-off-screen-nav-close:hover, .effeckt-off-screen-nav-close:focus {\n    color: red; }\n\n.effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show ~ .page-wrap .off-screen-nav-cover {\n  background: linear-gradient(left, rgba(238, 238, 238, 0), rgba(238, 238, 238, 0.9)); }\n\n.effeckt-off-screen-nav-top-card-deck, .effeckt-off-screen-nav-bottom-card-deck {\n  cursor: pointer;\n  background: transparent; }\n  .effeckt-off-screen-nav-top-card-deck h4, .effeckt-off-screen-nav-bottom-card-deck h4 {\n    margin: 0;\n    padding: 1rem;\n    border-bottom: 0; }\n  .effeckt-off-screen-nav-top-card-deck li, .effeckt-off-screen-nav-bottom-card-deck li {\n    background-color: #333;\n    border-bottom: 1px solid #eee; }\n  .effeckt-off-screen-nav-top-card-deck a, .effeckt-off-screen-nav-bottom-card-deck a {\n    height: 100%; }\n  .effeckt-off-screen-nav-top-card-deck .effeckt-off-screen-nav-close, .effeckt-off-screen-nav-bottom-card-deck .effeckt-off-screen-nav-close {\n    right: 1rem; }\n\n.effeckt-off-screen-nav-bottom-card-deck li {\n  border-top: 1px solid #eee;\n  border-bottom: none; }\n\n.effeckt-off-screen-nav-left-bounce, .effeckt-off-screen-nav-left-bounce-out, .effeckt-off-screen-nav-right-bounce, .effeckt-off-screen-nav-right-bounce-out {\n  box-sizing: content-box; }\n\n.effeckt-caption {\n  float: left;\n  overflow: hidden;\n  width: 48%;\n  margin: 0 4% 1rem 0; }\n  .effeckt-caption:nth-child(2n) {\n    margin-right: 0; }\n  .effeckt-caption img {\n    width: 100%;\n    display: block; }\n  .effeckt-caption figcaption {\n    background: rgba(0, 0, 0, 0.8);\n    color: white;\n    padding: 1rem; }\n    .effeckt-caption figcaption h3 {\n      font-size: 1.2rem; }\n    .effeckt-caption figcaption p {\n      margin: 0; }\n\n.effeckt-list {\n  list-style: none; }\n  .effeckt-list li {\n    background: #e6e6e6;\n    padding: 0 0.5rem;\n    overflow: hidden;\n    margin-bottom: 2px;\n    line-height: 2; }\n    .effeckt-list li.new-item {\n      background: #ccc; }\n\n.effeckt-list-scroll {\n  width: 230px;\n  height: 480px;\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  list-style: none; }\n  .effeckt-list-scroll > li {\n    padding: 0.5rem;\n    background: #eee;\n    color: #252525;\n    font-size: 18px; }\n    .effeckt-list-scroll > li:nth-child(odd) {\n      background: #e6e6e6; }\n\n.contributors-list {\n  list-style: none;\n  overflow: hidden; }\n  .contributors-list li {\n    float: left;\n    margin: 0 10px 10px 0; }\n  .contributors-list img {\n    width: 40px;\n    height: 40px; }\n\n[data-effeckt-page=\"page-1\"] {\n  background-color: #EEEEEE; }\n\n[data-effeckt-page=\"page-2\"] {\n  color: #203513;\n  background-color: #99CF78; }\n\n[data-effeckt-page=\"page-3\"] {\n  color: #282828;\n  background-color: #FECD3D; }\n\n[data-effeckt-page=\"page-4\"] {\n  color: #FFFEFE;\n  background-color: #CD4F5B; }\n\n[data-effeckt-page=\"page-5\"] {\n  color: #194772;\n  background-color: #62A1DC; }\n\nul.effeckt-tabs {\n  margin: 0;\n  padding: 0;\n  list-style: none; }\n  ul.effeckt-tabs li {\n    float: left;\n    margin-right: 2px; }\n    ul.effeckt-tabs li a {\n      display: block;\n      padding: 10px 15px;\n      color: #383838;\n      background-color: #EEEEEE; }\n      ul.effeckt-tabs li a.active, ul.effeckt-tabs li a:hover {\n        background-color: #E8E8E8; }\n\n.effeckt-tabs-container {\n  padding: 10px;\n  margin-bottom: 20px;\n  border: 1px solid #DDD; }\n  .effeckt-tabs-container .effeckt-tab-content {\n    top: 10px; }\n\n.effeckt-lazy-loading-options {\n  margin: 0 0 15px; }\n  .effeckt-lazy-loading-options label {\n    margin: 0 5px; }\n\n.effeckt-lazy-loading {\n  -webkit-column-count: 3;\n     -moz-column-count: 3;\n          column-count: 3;\n  -webkit-column-gap: 0;\n     -moz-column-gap: 0;\n          column-gap: 0; }\n  .effeckt-lazy-loading li {\n    display: block;\n    list-style-type: none;\n    padding: 0 5px 5px 0; }\n  .effeckt-lazy-loading a {\n    display: inline-block;\n    background: #DDD;\n    border: 1px solid #ccc;\n    width: 100%;\n    height: 250px; }\n  .effeckt-lazy-loading li:nth-child(1) a, .effeckt-lazy-loading li:nth-child(12n+12) a {\n    height: 500px; }\n  .effeckt-lazy-loading li:nth-child(3n+3) a {\n    height: 350px; }\n  .effeckt-lazy-loading li:nth-child(5n+5) a {\n    height: 200px; }\n"
  },
  {
    "path": "css/effeckt.css",
    "content": ".effeckt-perspective {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.effeckt-show {\n  visibility: visible; }\n\n.effeckt-button {\n  position: relative; }\n\n.effeckt-button .spinner {\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  top: 50%;\n  margin-top: -16px;\n  margin-left: -16px;\n  opacity: 0;\n  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf///6+vr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs/Ly8vz8/AAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==);\n  background-size: 32px auto; }\n\n.effeckt-button, .effeckt-button .spinner, .effeckt-button .label {\n  transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all; }\n\n.effeckt-button[data-effeckt-type=\"expand-right\"] .spinner {\n  right: 16px; }\n\n.effeckt-button[data-effeckt-type=\"expand-right\"][data-loading] {\n  padding-right: 64px; }\n\n.effeckt-button[data-effeckt-type=\"expand-right\"][data-loading] .spinner {\n  opacity: 1; }\n\n.effeckt-button[data-effeckt-type=\"expand-left\"] .spinner {\n  left: 16px;\n  margin-left: 0; }\n\n.effeckt-button[data-effeckt-type=\"expand-left\"][data-loading] {\n  padding-left: 64px; }\n\n.effeckt-button[data-effeckt-type=\"expand-left\"][data-loading] .spinner {\n  opacity: 1; }\n\n.effeckt-button[data-effeckt-type=\"expand-up\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"expand-up\"] .spinner {\n  top: 32px;\n  left: 50%; }\n\n.effeckt-button[data-effeckt-type=\"expand-up\"][data-loading] {\n  padding-top: 64px; }\n\n.effeckt-button[data-effeckt-type=\"expand-up\"][data-loading] .spinner {\n  opacity: 1;\n  top: 16px;\n  margin-top: 0; }\n\n.effeckt-button[data-effeckt-type=\"expand-down\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"expand-down\"] .spinner {\n  left: 50%;\n  top: 100%;\n  margin-top: -48px; }\n\n.effeckt-button[data-effeckt-type=\"expand-down\"][data-loading] {\n  padding-bottom: 64px; }\n\n.effeckt-button[data-effeckt-type=\"expand-down\"][data-loading] .spinner {\n  opacity: 1; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"] .label {\n  position: relative; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"] .spinner {\n  left: 100%; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"][data-loading] .label {\n  opacity: 0;\n  left: -100%; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"][data-loading] .spinner {\n  opacity: 1;\n  left: 50%; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"] .label {\n  position: relative; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"] .spinner {\n  left: 0%; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"][data-loading] .label {\n  opacity: 0;\n  left: 100%; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"][data-loading] .spinner {\n  opacity: 1;\n  left: 50%; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"] .label {\n  position: relative; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"] .spinner {\n  left: 50%;\n  top: 100%; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"][data-loading] .label {\n  opacity: 0;\n  top: -1em; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"][data-loading] .spinner {\n  opacity: 1;\n  top: 50%; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"] .label {\n  position: relative; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"] .spinner {\n  left: 50%;\n  top: 0%; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"][data-loading] .label {\n  opacity: 0;\n  top: 1em; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"][data-loading] .spinner {\n  opacity: 1;\n  top: 50%; }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"], .effeckt-button[data-effeckt-type=\"zoom-in\"] .spinner, .effeckt-button[data-effeckt-type=\"zoom-in\"] .label, .effeckt-button[data-effeckt-type=\"zoom-out\"], .effeckt-button[data-effeckt-type=\"zoom-out\"] .spinner, .effeckt-button[data-effeckt-type=\"zoom-out\"] .label {\n  transition: 500ms ease all; }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"] .spinner {\n  left: 50%;\n  -webkit-transform: scale(2.5);\n      -ms-transform: scale(2.5);\n          transform: scale(2.5); }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"] .label {\n  position: relative;\n  display: inline-block; }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"][data-loading] .label {\n  opacity: 0;\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5); }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"][data-loading] .spinner {\n  opacity: 1;\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none; }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"] .spinner {\n  left: 50%;\n  -webkit-transform: scale(0.2);\n      -ms-transform: scale(0.2);\n          transform: scale(0.2); }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"] .label {\n  position: relative;\n  display: inline-block; }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"][data-loading] .label {\n  opacity: 0;\n  -webkit-transform: scale(2.2);\n      -ms-transform: scale(2.2);\n          transform: scale(2.2); }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"][data-loading] .spinner {\n  opacity: 1;\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none; }\n\n/*==========================\nFILL\n==========================*/\n.effeckt-button[data-effeckt-type=\"fill-from-left\"] {\n  overflow: hidden;\n  position: relative; }\n  .effeckt-button[data-effeckt-type=\"fill-from-left\"]:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: #000;\n    -webkit-transform: translate(-100%, 0);\n        -ms-transform: translate(-100%, 0);\n            transform: translate(-100%, 0);\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n  .effeckt-button[data-effeckt-type=\"fill-from-left\"][data-loading]:after {\n    -webkit-transform: translate(0, 0);\n        -ms-transform: translate(0, 0);\n            transform: translate(0, 0); }\n  .effeckt-button[data-effeckt-type=\"fill-from-left\"] .effeckt-button-label {\n    position: relative;\n    z-index: 1; }\n\n.effeckt-button[data-effeckt-type=\"fill-from-right\"] {\n  overflow: hidden;\n  position: relative; }\n  .effeckt-button[data-effeckt-type=\"fill-from-right\"]:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: #000;\n    -webkit-transform: translate(100%, 0);\n        -ms-transform: translate(100%, 0);\n            transform: translate(100%, 0);\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n  .effeckt-button[data-effeckt-type=\"fill-from-right\"][data-loading]:after {\n    -webkit-transform: translate(0, 0);\n        -ms-transform: translate(0, 0);\n            transform: translate(0, 0); }\n  .effeckt-button[data-effeckt-type=\"fill-from-right\"] .effeckt-button-label {\n    position: relative;\n    z-index: 1; }\n\n.effeckt-button[data-effeckt-type=\"fill-from-top\"] {\n  overflow: hidden;\n  position: relative; }\n  .effeckt-button[data-effeckt-type=\"fill-from-top\"]:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: #000;\n    -webkit-transform: translate(0, -100%);\n        -ms-transform: translate(0, -100%);\n            transform: translate(0, -100%);\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n  .effeckt-button[data-effeckt-type=\"fill-from-top\"][data-loading]:after {\n    -webkit-transform: translate(0, 0);\n        -ms-transform: translate(0, 0);\n            transform: translate(0, 0); }\n  .effeckt-button[data-effeckt-type=\"fill-from-top\"] .effeckt-button-label {\n    position: relative;\n    z-index: 1; }\n\n.effeckt-button[data-effeckt-type=\"fill-from-bottom\"] {\n  overflow: hidden;\n  position: relative; }\n  .effeckt-button[data-effeckt-type=\"fill-from-bottom\"]:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: #000;\n    -webkit-transform: translate(0, 100%);\n        -ms-transform: translate(0, 100%);\n            transform: translate(0, 100%);\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n  .effeckt-button[data-effeckt-type=\"fill-from-bottom\"][data-loading]:after {\n    -webkit-transform: translate(0, 0);\n        -ms-transform: translate(0, 0);\n            transform: translate(0, 0); }\n  .effeckt-button[data-effeckt-type=\"fill-from-bottom\"] .effeckt-button-label {\n    position: relative;\n    z-index: 1; }\n\n/*==========================\nICON SLIDE\n\nExample markup:\n<button class=\"effeckt-button\" data-effeckt-type=\"icon-slide from-top\">\n  <span class=\"effeckt-button-label demo-button-icon\">Icon from top</span>\n</button>\n==========================*/\n.demo-button-icon:before {\n  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEljb01vb24uaW8gLS0+IDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+IDxzdmcgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGZpbGw9IiNmZmZmZmYiPjxnPjxwYXRoIGQ9Ik0gMTYsMyBDIDEyLjUyOCwzIDkuMjYzLDQuMzUyIDYuODA4LDYuODA4IEMgNC4zNTIsOS4yNjMgMywxMi41MjggMywxNiBDIDMsMTkuNDcyIDQuMzUyLDIyLjczNyA2LjgwOCwyNS4xOTIgQyA5LjI2MywyNy42NDggMTIuNTI4LDI5IDE2LDI5IEMgMTkuNDcyLDI5IDIyLjczNywyNy42NDggMjUuMTkyLDI1LjE5MiBDIDI3LjY0OCwyMi43MzcgMjksMTkuNDcyIDI5LDE2IEMgMjksMTIuNTI4IDI3LjY0OCw5LjI2MyAyNS4xOTIsNi44MDggQyAyMi43MzcsNC4zNTIgMTkuNDcyLDMgMTYsMyBaIE0gMTYsMCBMIDE2LDAgQyAyNC44MzcsMCAzMiw3LjE2MyAzMiwxNiBDIDMyLDI0LjgzNyAyNC44MzcsMzIgMTYsMzIgQyA3LjE2MywzMiAwLDI0LjgzNyAwLDE2IEMgMCw3LjE2MyA3LjE2MywwIDE2LDAgWk0gMTQsMjJMIDE4LDIyTCAxOCwyNkwgMTQsMjZ6TSAxNCw2TCAxOCw2TCAxOCwxOEwgMTQsMTh6Ij48L3BhdGg+PC9nPjwvc3ZnPg==) no-repeat center center;\n  background-size: 30px; }\n\n.effeckt-button[data-effeckt-type~=\"icon-slide\"] {\n  overflow: hidden;\n  padding: 0; }\n  .effeckt-button[data-effeckt-type~=\"icon-slide\"] .effeckt-button-label {\n    padding: 0.8rem 1rem;\n    display: block;\n    position: relative;\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n    .effeckt-button[data-effeckt-type~=\"icon-slide\"] .effeckt-button-label:before {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-effeckt-type~=\"from-top\"] .effeckt-button-label:before {\n  top: -100%;\n  left: 0;\n  right: 0; }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-effeckt-type~=\"from-bottom\"] .effeckt-button-label:before {\n  bottom: -100%;\n  left: 0;\n  right: 0; }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-effeckt-type~=\"from-left\"] .effeckt-button-label:before {\n  left: -100%;\n  top: 0;\n  bottom: 0; }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-effeckt-type~=\"from-right\"] .effeckt-button-label:before {\n  right: -100%;\n  top: 0;\n  bottom: 0; }\n\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-loading][data-effeckt-type~=\"from-top\"] .effeckt-button-label {\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%); }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-loading][data-effeckt-type~=\"from-bottom\"] .effeckt-button-label {\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%); }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-loading][data-effeckt-type~=\"from-left\"] .effeckt-button-label {\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%); }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-loading][data-effeckt-type~=\"from-right\"] .effeckt-button-label {\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%); }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"], .effeckt-button[data-effeckt-type=\"3d-rotate-error\"] {\n  transition: all 500ms;\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"]:before, .effeckt-button[data-effeckt-type=\"3d-rotate-success\"]:after {\n  white-space: nowrap;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  line-height: 2em; }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"]:before {\n  top: 100%;\n  content: attr(data-effeckt-message);\n  -webkit-transform-origin: 0% 0%;\n      -ms-transform-origin: 0% 0%;\n          transform-origin: 0% 0%;\n  -webkit-transform: rotateX(-90deg);\n          transform: rotateX(-90deg);\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"][data-loading] {\n  -webkit-transform-origin: 50% 0%;\n      -ms-transform-origin: 50% 0%;\n          transform-origin: 50% 0%;\n  -webkit-transform: rotateX(90deg) translateY(-100%);\n          transform: rotateX(90deg) translateY(-100%); }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"]:after {\n  top: -100%;\n  content: attr(data-effeckt-message);\n  -webkit-transform-origin: 0% 100%;\n      -ms-transform-origin: 0% 100%;\n          transform-origin: 0% 100%;\n  -webkit-transform: rotateX(90deg);\n          transform: rotateX(90deg);\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"][data-loading] {\n  -webkit-transform-origin: 50% 100%;\n      -ms-transform-origin: 50% 100%;\n          transform-origin: 50% 100%;\n  -webkit-transform: rotateX(-90deg) translateY(100%);\n          transform: rotateX(-90deg) translateY(100%); }\n\n/*\n\nCaptions Markup Pattern & Explanation\n\ndata-effeckt-type = \n\"<quarter-appear | quarter-slide-up | quarter-slide-side | quarter-fall-in |\nquarter-two-step | quarter-zoom | cover-fade | cover-push-right | revolving-door-left |\nrevolving-door-right | revolving-door-top | revolving-door-bottom | cover-slide-top |\noffset | guillotine-reverse | half-slide | sqkwoosh | tunnel>\"\n\n<figure class=\"effeckt-caption\" data-effeckt-type=\"\">\n  <img src=\"\" alt=\"\">\n  <figcaption>\n    <div class=\"effeckt-figcaption-wrap\"></div>\n  </figcaption>\n</figure>\n\n*/\n.effeckt-caption {\n  position: relative; }\n  .effeckt-caption img {\n    transition: 500ms; }\n  .effeckt-caption figcaption {\n    position: absolute;\n    transition: 500ms;\n    width: 100%; }\n  .effeckt-caption[data-effeckt-type=\"quarter-appear\"] figcaption {\n    bottom: 0;\n    left: 0;\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"quarter-appear\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-appear\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-appear\"].active figcaption {\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-slide-up\"] figcaption {\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    -webkit-transform: translateY(100%);\n        -ms-transform: translateY(100%);\n            transform: translateY(100%); }\n  .effeckt-caption[data-effeckt-type=\"quarter-slide-up\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-slide-up\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-slide-up\"].active figcaption {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n        -ms-transform: translateY(0);\n            transform: translateY(0); }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"] figcaption {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition: none;\n    z-index: 0; }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"] img {\n    position: relative;\n    z-index: 1;\n    transition-delay: 0.25s; }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"] .effeckt-figcaption-wrap {\n    position: absolute;\n    bottom: 1rem;\n    opacity: 0;\n    transition: opacity 0.25s linear 0s; }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"]:hover .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type=\"sqkwoosh\"]:active .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type=\"sqkwoosh\"].active .effeckt-figcaption-wrap {\n    opacity: 1;\n    transition-delay: 0.25s; }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"]:hover img, .effeckt-caption[data-effeckt-type=\"sqkwoosh\"]:active img, .effeckt-caption[data-effeckt-type=\"sqkwoosh\"].active img {\n    -webkit-transform: scale(0.5) translateY(-80px);\n        -ms-transform: scale(0.5) translateY(-80px);\n            transform: scale(0.5) translateY(-80px);\n    transition-delay: 0; }\n  .effeckt-caption[data-effeckt-type=\"quarter-slide-side\"] figcaption {\n    left: 0;\n    bottom: 0;\n    opacity: 0;\n    -webkit-transform: translateX(100%);\n        -ms-transform: translateX(100%);\n            transform: translateX(100%); }\n  .effeckt-caption[data-effeckt-type=\"quarter-slide-side\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-slide-side\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-slide-side\"].active figcaption {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n  .effeckt-caption[data-effeckt-type=\"cover-fade\"] figcaption {\n    top: 0;\n    left: 0;\n    height: 100%;\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"cover-fade\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"cover-fade\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"cover-fade\"].active figcaption {\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-fall-in\"] figcaption {\n    top: 0;\n    left: 0;\n    -webkit-transform: translateX(100%) rotate(20deg);\n        -ms-transform: translateX(100%) rotate(20deg);\n            transform: translateX(100%) rotate(20deg);\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"quarter-fall-in\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-fall-in\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-fall-in\"].active figcaption {\n    -webkit-transform: translateX(0) rotate(0deg);\n        -ms-transform: translateX(0) rotate(0deg);\n            transform: translateX(0) rotate(0deg);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-two-step\"] figcaption {\n    top: 0;\n    left: 0;\n    -webkit-transform: translateX(-100%);\n        -ms-transform: translateX(-100%);\n            transform: translateX(-100%);\n    opacity: 0;\n    z-index: 2; }\n  .effeckt-caption[data-effeckt-type=\"quarter-two-step\"] .effeckt-figcaption-wrap {\n    transition: 500ms 250ms;\n    -webkit-transform: translateX(200%);\n        -ms-transform: translateX(200%);\n            transform: translateX(200%); }\n  .effeckt-caption[data-effeckt-type=\"quarter-two-step\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-two-step\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-two-step\"].active figcaption {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-two-step\"]:hover .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type=\"quarter-two-step\"]:active .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type=\"quarter-two-step\"].active .effeckt-figcaption-wrap {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n  .effeckt-caption[data-effeckt-type=\"cover-push-right\"] figcaption {\n    top: 0;\n    left: 0;\n    height: 100%;\n    -webkit-transform: translateX(-100%);\n        -ms-transform: translateX(-100%);\n            transform: translateX(-100%);\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"cover-push-right\"] img {\n    transition: 500ms;\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n  .effeckt-caption[data-effeckt-type=\"cover-push-right\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"cover-push-right\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"cover-push-right\"].active figcaption {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"cover-push-right\"]:hover img, .effeckt-caption[data-effeckt-type=\"cover-push-right\"]:active img, .effeckt-caption[data-effeckt-type=\"cover-push-right\"].active img {\n    -webkit-transform: translateX(100%);\n        -ms-transform: translateX(100%);\n            transform: translateX(100%); }\n  .effeckt-caption[data-effeckt-type=\"cover-slide-top\"] figcaption {\n    top: 0;\n    left: 0;\n    height: 100%;\n    -webkit-transform: translateY(-100%);\n        -ms-transform: translateY(-100%);\n            transform: translateY(-100%);\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"cover-slide-top\"] img {\n    transition: 500ms; }\n  .effeckt-caption[data-effeckt-type=\"cover-slide-top\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"cover-slide-top\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"cover-slide-top\"].active figcaption {\n    -webkit-transform: translateY(0);\n        -ms-transform: translateY(0);\n            transform: translateY(0);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-zoom\"] figcaption {\n    top: 0;\n    left: 0;\n    -webkit-transform: scale(2);\n        -ms-transform: scale(2);\n            transform: scale(2);\n    text-align: center;\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"quarter-zoom\"] img {\n    transition: 500ms; }\n  .effeckt-caption[data-effeckt-type=\"quarter-zoom\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-zoom\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-zoom\"].active figcaption {\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-zoom\"]:hover img, .effeckt-caption[data-effeckt-type=\"quarter-zoom\"]:active img, .effeckt-caption[data-effeckt-type=\"quarter-zoom\"].active img {\n    -webkit-transform: scale(1.1);\n        -ms-transform: scale(1.1);\n            transform: scale(1.1); }\n  .effeckt-caption[data-effeckt-type=\"revolving-door-left\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-left\"] figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: perspective(1300px) rotateY(180deg);\n              transform: perspective(1300px) rotateY(180deg);\n      -webkit-backface-visibility: hidden;\n              backface-visibility: hidden; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-left\"] img {\n      -webkit-transform: perspective(1300px);\n              transform: perspective(1300px);\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-left\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-left\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-left\"].active figcaption {\n      -webkit-transform: perspective(1300px) rotateY(0deg);\n              transform: perspective(1300px) rotateY(0deg); }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-left\"]:hover img, .effeckt-caption[data-effeckt-type=\"revolving-door-left\"]:active img, .effeckt-caption[data-effeckt-type=\"revolving-door-left\"].active img {\n      -webkit-transform: perspective(1300px) rotateY(-180deg);\n              transform: perspective(1300px) rotateY(-180deg); }\n  .effeckt-caption[data-effeckt-type=\"revolving-door-right\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-right\"] figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: perspective(1300px) rotateY(180deg);\n              transform: perspective(1300px) rotateY(180deg);\n      -webkit-backface-visibility: hidden;\n              backface-visibility: hidden; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-right\"] img {\n      -webkit-transform: perspective(1300px);\n              transform: perspective(1300px);\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-right\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-right\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-right\"].active figcaption {\n      -webkit-transform: perspective(1300px) rotateY(360deg);\n              transform: perspective(1300px) rotateY(360deg); }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-right\"]:hover img, .effeckt-caption[data-effeckt-type=\"revolving-door-right\"]:active img, .effeckt-caption[data-effeckt-type=\"revolving-door-right\"].active img {\n      -webkit-transform: perspective(1300px) rotateY(180deg);\n              transform: perspective(1300px) rotateY(180deg); }\n  .effeckt-caption[data-effeckt-type=\"revolving-door-top\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-top\"] figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: perspective(1300px) rotateX(180deg);\n              transform: perspective(1300px) rotateX(180deg);\n      -webkit-backface-visibility: hidden;\n              backface-visibility: hidden; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-top\"] img {\n      -webkit-transform: perspective(1300px);\n              transform: perspective(1300px);\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-top\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-top\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-top\"].active figcaption {\n      -webkit-transform: perspective(1300px) rotateX(360deg);\n              transform: perspective(1300px) rotateX(360deg); }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-top\"]:hover img, .effeckt-caption[data-effeckt-type=\"revolving-door-top\"]:active img, .effeckt-caption[data-effeckt-type=\"revolving-door-top\"].active img {\n      -webkit-transform: perspective(1300px) rotateX(180deg);\n              transform: perspective(1300px) rotateX(180deg); }\n  .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"] figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: perspective(1300px) rotateX(180deg);\n              transform: perspective(1300px) rotateX(180deg);\n      -webkit-backface-visibility: hidden;\n              backface-visibility: hidden; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"] img {\n      -webkit-transform: perspective(1300px);\n              transform: perspective(1300px);\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"].active figcaption {\n      -webkit-transform: perspective(1300px) rotateX(0deg);\n              transform: perspective(1300px) rotateX(0deg); }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"]:hover img, .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"]:active img, .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"].active img {\n      -webkit-transform: perspective(1300px) rotateX(-180deg);\n              transform: perspective(1300px) rotateX(-180deg); }\n  .effeckt-caption[data-effeckt-type=\"offset\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"offset\"] figcaption {\n      top: 0;\n      left: 0;\n      text-align: center;\n      opacity: 0;\n      height: 100%; }\n    .effeckt-caption[data-effeckt-type=\"offset\"] img {\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"offset\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"offset\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"offset\"].active figcaption {\n      -webkit-transform: translate(15px, 15px);\n          -ms-transform: translate(15px, 15px);\n              transform: translate(15px, 15px);\n      opacity: 1;\n      z-index: 100;\n      overflow: hidden; }\n  .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"] figcaption {\n      top: 0;\n      left: 0;\n      text-align: center;\n      height: 100%; }\n    .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"] img {\n      display: block;\n      position: relative;\n      z-index: 10;\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"]:hover img, .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"]:active img, .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"].active img {\n      -webkit-transform: translateY(-100%);\n          -ms-transform: translateY(-100%);\n              transform: translateY(-100%); }\n  .effeckt-caption[data-effeckt-type=\"half-slide\"] figcaption {\n    top: 0;\n    left: 0;\n    text-align: center;\n    height: 100%;\n    -webkit-transform: translateY(100%);\n        -ms-transform: translateY(100%);\n            transform: translateY(100%); }\n  .effeckt-caption[data-effeckt-type=\"half-slide\"] img {\n    display: block;\n    position: relative;\n    transition: 500ms; }\n  .effeckt-caption[data-effeckt-type=\"half-slide\"]:hover img, .effeckt-caption[data-effeckt-type=\"half-slide\"]:active img, .effeckt-caption[data-effeckt-type=\"half-slide\"].active img {\n    -webkit-transform: translateY(-50%);\n        -ms-transform: translateY(-50%);\n            transform: translateY(-50%); }\n  .effeckt-caption[data-effeckt-type=\"half-slide\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"half-slide\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"half-slide\"].active figcaption {\n    -webkit-transform: translateY(50%);\n        -ms-transform: translateY(50%);\n            transform: translateY(50%); }\n  .effeckt-caption[data-effeckt-type=\"tunnel\"] figcaption {\n    top: 0;\n    left: 0;\n    text-align: center;\n    height: 100%;\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n        -ms-transform: scale(0.7);\n            transform: scale(0.7); }\n  .effeckt-caption[data-effeckt-type=\"tunnel\"] img {\n    display: block;\n    position: relative;\n    z-index: 10;\n    transition: 500ms; }\n  .effeckt-caption[data-effeckt-type=\"tunnel\"]:hover img, .effeckt-caption[data-effeckt-type=\"tunnel\"]:active img, .effeckt-caption[data-effeckt-type=\"tunnel\"].active img {\n    -webkit-transform: scale(0.4);\n        -ms-transform: scale(0.4);\n            transform: scale(0.4); }\n  .effeckt-caption[data-effeckt-type=\"tunnel\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"tunnel\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"tunnel\"].active figcaption {\n    opacity: 1;\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1); }\n\n.effeckt-list[data-effeckt-type='pop-in'] {\n  overflow: hidden; }\n\n.effeckt-list[data-effeckt-type='pop-in'] .new-item {\n  max-height: 0;\n  opacity: 0;\n  -webkit-transform: translateX(-300px);\n      -ms-transform: translateX(-300px);\n          transform: translateX(-300px);\n  -webkit-animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards;\n          animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='pop-in'] .remove-item {\n  max-height: 50px;\n  opacity: 1;\n  -webkit-animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms;\n          animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms; }\n\n@-webkit-keyframes openSpace {\n  to {\n    max-height: 50px; } }\n\n@keyframes openSpace {\n  to {\n    max-height: 50px; } }\n\n@-webkit-keyframes moveIn {\n  to {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n            transform: translateX(0); } }\n\n@keyframes moveIn {\n  to {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n            transform: translateX(0); } }\n\n@-webkit-keyframes moveOut {\n  to {\n    opacity: 0;\n    -webkit-transform: translateX(-300px);\n            transform: translateX(-300px); } }\n\n@keyframes moveOut {\n  to {\n    opacity: 0;\n    -webkit-transform: translateX(-300px);\n            transform: translateX(-300px); } }\n\n@-webkit-keyframes closeSpace {\n  to {\n    max-height: 0px; }\n\n  from {\n    max-height: 50px; } }\n\n@keyframes closeSpace {\n  to {\n    max-height: 0px; }\n\n  from {\n    max-height: 50px; } }\n\n.effeckt-list[data-effeckt-type='expand-in'] .new-item {\n  max-height: 0;\n  opacity: 0;\n  -webkit-transform: scale(0);\n      -ms-transform: scale(0);\n          transform: scale(0);\n  -webkit-animation: growHeight 500ms ease forwards;\n          animation: growHeight 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='expand-in'] .remove-item {\n  -webkit-animation: shrinkHeight 500ms ease forwards;\n          animation: shrinkHeight 500ms ease forwards; }\n\n@-webkit-keyframes growHeight {\n  to {\n    max-height: 50px;\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes growHeight {\n  to {\n    max-height: 50px;\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@-webkit-keyframes shrinkHeight {\n  to {\n    max-height: 0;\n    opacity: 1;\n    -webkit-transform: scale(0);\n            transform: scale(0); }\n\n  from {\n    max-height: 50px;\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes shrinkHeight {\n  to {\n    max-height: 0;\n    opacity: 1;\n    -webkit-transform: scale(0);\n            transform: scale(0); }\n\n  from {\n    max-height: 50px;\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n.effeckt-list[data-effeckt-type='wobble-in'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards;\n          animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='wobble-in'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms;\n          animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms; }\n\n@-webkit-keyframes WobbleInX {\n  0% {\n    -webkit-transform: perspective(250px) rotateX(90deg);\n            transform: perspective(250px) rotateX(90deg);\n    opacity: 0; }\n\n  40% {\n    -webkit-transform: perspective(250px) rotateX(-10deg);\n            transform: perspective(250px) rotateX(-10deg); }\n\n  70% {\n    -webkit-transform: perspective(250px) rotateX(10deg);\n            transform: perspective(250px) rotateX(10deg); }\n\n  100% {\n    -webkit-transform: perspective(250px) rotateX(0deg);\n            transform: perspective(250px) rotateX(0deg);\n    opacity: 1; } }\n\n@keyframes WobbleInX {\n  0% {\n    -webkit-transform: perspective(250px) rotateX(90deg);\n            transform: perspective(250px) rotateX(90deg);\n    opacity: 0; }\n\n  40% {\n    -webkit-transform: perspective(250px) rotateX(-10deg);\n            transform: perspective(250px) rotateX(-10deg); }\n\n  70% {\n    -webkit-transform: perspective(250px) rotateX(10deg);\n            transform: perspective(250px) rotateX(10deg); }\n\n  100% {\n    -webkit-transform: perspective(250px) rotateX(0deg);\n            transform: perspective(250px) rotateX(0deg);\n    opacity: 1; } }\n\n@-webkit-keyframes WobbleOutX {\n  0% {\n    -webkit-transform: perspective(250px) rotateX(0deg);\n            transform: perspective(250px) rotateX(0deg);\n    opacity: 1; }\n\n  100% {\n    -webkit-transform: perspective(250px) rotateX(90deg);\n            transform: perspective(250px) rotateX(90deg);\n    opacity: 0; } }\n\n@keyframes WobbleOutX {\n  0% {\n    -webkit-transform: perspective(250px) rotateX(0deg);\n            transform: perspective(250px) rotateX(0deg);\n    opacity: 1; }\n\n  100% {\n    -webkit-transform: perspective(250px) rotateX(90deg);\n            transform: perspective(250px) rotateX(90deg);\n    opacity: 0; } }\n\n.effeckt-list[data-effeckt-type='flip-in'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-transform-origin: top left;\n      -ms-transform-origin: top left;\n          transform-origin: top left;\n  -webkit-animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards;\n          animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='flip-in'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-transform-origin: top left;\n      -ms-transform-origin: top left;\n          transform-origin: top left;\n  -webkit-animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms;\n          animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms; }\n\n@-webkit-keyframes FlipIn {\n  0% {\n    -webkit-transform: perspective(300px) rotateX(90deg);\n            transform: perspective(300px) rotateX(90deg);\n    opacity: 0; }\n\n  100% {\n    -webkit-transform: perspective(300px) rotateX(0deg);\n            transform: perspective(300px) rotateX(0deg);\n    opacity: 1; } }\n\n@keyframes FlipIn {\n  0% {\n    -webkit-transform: perspective(300px) rotateX(90deg);\n            transform: perspective(300px) rotateX(90deg);\n    opacity: 0; }\n\n  100% {\n    -webkit-transform: perspective(300px) rotateX(0deg);\n            transform: perspective(300px) rotateX(0deg);\n    opacity: 1; } }\n\n@-webkit-keyframes FlipOut {\n  0% {\n    -webkit-transform: perspective(400px) rotateX(0deg);\n            transform: perspective(400px) rotateX(0deg);\n    opacity: 1; }\n\n  100% {\n    -webkit-transform: perspective(400px) rotateX(90deg);\n            transform: perspective(400px) rotateX(90deg);\n    opacity: 0; } }\n\n@keyframes FlipOut {\n  0% {\n    -webkit-transform: perspective(400px) rotateX(0deg);\n            transform: perspective(400px) rotateX(0deg);\n    opacity: 1; }\n\n  100% {\n    -webkit-transform: perspective(400px) rotateX(90deg);\n            transform: perspective(400px) rotateX(90deg);\n    opacity: 0; } }\n\n.effeckt-list[data-effeckt-type='fall-in'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: openSpace 1000ms ease forwards, fallInX 1000ms both;\n          animation: openSpace 1000ms ease forwards, fallInX 1000ms both; }\n\n.effeckt-list[data-effeckt-type='fall-in'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-transform-origin: top left;\n      -ms-transform-origin: top left;\n          transform-origin: top left;\n  -webkit-animation: fallOffX 1000ms both, closeSpace 750ms ease forwards 500ms;\n          animation: fallOffX 1000ms both, closeSpace 750ms ease forwards 500ms; }\n\n@-webkit-keyframes fallInX {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateY(-200px);\n            transform: translateY(-200px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n            transform: translateY(0); } }\n\n@keyframes fallInX {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateY(-200px);\n            transform: translateY(-200px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n            transform: translateY(0); } }\n\n@-webkit-keyframes fallOffX {\n  0% {\n    opacity: 1;\n    -webkit-transform: rotateZ(0);\n            transform: rotateZ(0); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: translateY(200px) rotateZ(90deg);\n            transform: translateY(200px) rotateZ(90deg); } }\n\n@keyframes fallOffX {\n  0% {\n    opacity: 1;\n    -webkit-transform: rotateZ(0);\n            transform: rotateZ(0); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: translateY(200px) rotateZ(90deg);\n            transform: translateY(200px) rotateZ(90deg); } }\n\n.effeckt-list[data-effeckt-type='from-above'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: openSpace 1000ms ease forwards, fromAbove 1000ms both 500ms;\n          animation: openSpace 1000ms ease forwards, fromAbove 1000ms both 500ms; }\n\n.effeckt-list[data-effeckt-type='from-above'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: toAbove 1000ms both, closeSpace 500ms ease forwards 650ms;\n          animation: toAbove 1000ms both, closeSpace 500ms ease forwards 650ms; }\n\n@-webkit-keyframes fromAbove {\n  0% {\n    opacity: 0;\n    -webkit-transform: scale(3);\n            transform: scale(3); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes fromAbove {\n  0% {\n    opacity: 0;\n    -webkit-transform: scale(3);\n            transform: scale(3); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@-webkit-keyframes toAbove {\n  0% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: scale(3);\n            transform: scale(3); } }\n\n@keyframes toAbove {\n  0% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: scale(3);\n            transform: scale(3); } }\n\n.effeckt-list[data-effeckt-type='wobble-out'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: openSpace 1000ms ease forwards, fallInX 1000ms both;\n          animation: openSpace 1000ms ease forwards, fallInX 1000ms both; }\n\n.effeckt-list[data-effeckt-type='wobble-out'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-transform-origin: top left;\n      -ms-transform-origin: top left;\n          transform-origin: top left;\n  -webkit-animation: wobbleOutY 1500ms both 500ms, closeSpace 500ms ease forwards 1500ms;\n          animation: wobbleOutY 1500ms both 500ms, closeSpace 500ms ease forwards 1500ms; }\n\n@-webkit-keyframes wobbleOutY {\n  0% {\n    opacity: 1;\n    -webkit-transform: rotateZ(0);\n            transform: rotateZ(0); }\n\n  20% {\n    opacity: 1;\n    -webkit-transform: rotateZ(140deg);\n            transform: rotateZ(140deg); }\n\n  40% {\n    opacity: 1;\n    -webkit-transform: rotateZ(60deg);\n            transform: rotateZ(60deg); }\n\n  60% {\n    opacity: 1;\n    -webkit-transform: rotateZ(110deg);\n            transform: rotateZ(110deg); }\n\n  70% {\n    opacity: 1;\n    -webkit-transform: rotateZ(90deg) translateX(0);\n            transform: rotateZ(90deg) translateX(0); }\n\n  90% {\n    opacity: 1;\n    -webkit-transform: rotateZ(90deg) translateX(400px);\n            transform: rotateZ(90deg) translateX(400px); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: rotateZ(90deg) translateX(400px);\n            transform: rotateZ(90deg) translateX(400px); } }\n\n@keyframes wobbleOutY {\n  0% {\n    opacity: 1;\n    -webkit-transform: rotateZ(0);\n            transform: rotateZ(0); }\n\n  20% {\n    opacity: 1;\n    -webkit-transform: rotateZ(140deg);\n            transform: rotateZ(140deg); }\n\n  40% {\n    opacity: 1;\n    -webkit-transform: rotateZ(60deg);\n            transform: rotateZ(60deg); }\n\n  60% {\n    opacity: 1;\n    -webkit-transform: rotateZ(110deg);\n            transform: rotateZ(110deg); }\n\n  70% {\n    opacity: 1;\n    -webkit-transform: rotateZ(90deg) translateX(0);\n            transform: rotateZ(90deg) translateX(0); }\n\n  90% {\n    opacity: 1;\n    -webkit-transform: rotateZ(90deg) translateX(400px);\n            transform: rotateZ(90deg) translateX(400px); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: rotateZ(90deg) translateX(400px);\n            transform: rotateZ(90deg) translateX(400px); } }\n\n.effeckt-list[data-effeckt-type='bouncy-slide-in'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: bouncySlideIn 1000ms both, openSpace 500ms ease forwards;\n          animation: bouncySlideIn 1000ms both, openSpace 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='bouncy-slide-in'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: fallOffY 1500ms both 500ms, closeSpace 500ms ease forwards 1625ms;\n          animation: fallOffY 1500ms both 500ms, closeSpace 500ms ease forwards 1625ms; }\n\n@-webkit-keyframes bouncySlideIn {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateX(300px);\n            transform: translateX(300px); }\n\n  70% {\n    opacity: 1;\n    -webkit-transform: translateX(-50px);\n            transform: translateX(-50px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n            transform: translateX(0); } }\n\n@keyframes bouncySlideIn {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateX(300px);\n            transform: translateX(300px); }\n\n  70% {\n    opacity: 1;\n    -webkit-transform: translateX(-50px);\n            transform: translateX(-50px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n            transform: translateX(0); } }\n\n@-webkit-keyframes fallOffY {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateX(0) translateY(0) rotateZ(0deg);\n            transform: translateX(0) translateY(0) rotateZ(0deg); }\n\n  50% {\n    opacity: 1;\n    -webkit-transform: translateX(-50%) translateY(0) rotateZ(0deg);\n            transform: translateX(-50%) translateY(0) rotateZ(0deg); }\n\n  75% {\n    opacity: 0.75;\n    -webkit-transform: translateX(-50%) translateY(0) rotateZ(-30deg);\n            transform: translateX(-50%) translateY(0) rotateZ(-30deg); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: translateX(-50%) translateY(300px) rotateZ(-60deg);\n            transform: translateX(-50%) translateY(300px) rotateZ(-60deg); } }\n\n@keyframes fallOffY {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateX(0) translateY(0) rotateZ(0deg);\n            transform: translateX(0) translateY(0) rotateZ(0deg); }\n\n  50% {\n    opacity: 1;\n    -webkit-transform: translateX(-50%) translateY(0) rotateZ(0deg);\n            transform: translateX(-50%) translateY(0) rotateZ(0deg); }\n\n  75% {\n    opacity: 0.75;\n    -webkit-transform: translateX(-50%) translateY(0) rotateZ(-30deg);\n            transform: translateX(-50%) translateY(0) rotateZ(-30deg); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: translateX(-50%) translateY(300px) rotateZ(-60deg);\n            transform: translateX(-50%) translateY(300px) rotateZ(-60deg); } }\n\n.effeckt-list-scroll {\n  position: relative;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  -webkit-perspective: 400px;\n          perspective: 400px; }\n  .effeckt-list-scroll > li {\n    position: relative;\n    z-index: 2;\n    -webkit-transform: translateZ(0);\n            transform: translateZ(0); }\n\n[data-effeckt-type=\"grow\"] li {\n  transition: all 500ms ease;\n  -webkit-transform-origin: 50% 50%;\n      -ms-transform-origin: 50% 50%;\n          transform-origin: 50% 50%; }\n  [data-effeckt-type=\"grow\"] li.past, [data-effeckt-type=\"grow\"] li.future {\n    -webkit-transform: scale(0.01);\n        -ms-transform: scale(0.01);\n            transform: scale(0.01); }\n\n[data-effeckt-type=\"curl\"] li {\n  -webkit-perspective: 600px;\n          perspective: 600px;\n  -webkit-perspective-origin: 0% 50%;\n          perspective-origin: 0% 50%;\n  transition: all 500ms ease, opacity 166.6666666667ms ease;\n  -webkit-transform-origin: 0% 0%;\n      -ms-transform-origin: 0% 0%;\n          transform-origin: 0% 0%;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n  [data-effeckt-type=\"curl\"] li.past {\n    opacity: 0;\n    -webkit-transform: rotateY(90deg);\n            transform: rotateY(90deg); }\n  [data-effeckt-type=\"curl\"] li.future {\n    opacity: 0;\n    -webkit-transform: rotateY(90deg);\n            transform: rotateY(90deg); }\n\n[data-effeckt-type=\"wave\"] li {\n  transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }\n  [data-effeckt-type=\"wave\"] li.past {\n    -webkit-transform: translateX(-70%);\n        -ms-transform: translateX(-70%);\n            transform: translateX(-70%); }\n  [data-effeckt-type=\"wave\"] li.future {\n    -webkit-transform: translateX(-70%);\n        -ms-transform: translateX(-70%);\n            transform: translateX(-70%); }\n\n[data-effeckt-type=\"fan\"] li {\n  transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1);\n  -webkit-transform-origin: 0% 0%;\n      -ms-transform-origin: 0% 0%;\n          transform-origin: 0% 0%; }\n  [data-effeckt-type=\"fan\"] li.past {\n    -webkit-transform: rotate(-60deg);\n        -ms-transform: rotate(-60deg);\n            transform: rotate(-60deg); }\n  [data-effeckt-type=\"fan\"] li.future {\n    -webkit-transform: rotate(70deg);\n        -ms-transform: rotate(70deg);\n            transform: rotate(70deg); }\n\n[data-effeckt-type=\"fade\"] li {\n  transition: opacity 250ms ease-in-out; }\n  [data-effeckt-type=\"fade\"] li.past, [data-effeckt-type=\"fade\"] li.future {\n    opacity: 0; }\n\n[data-effeckt-type=\"fly\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"fly\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: 50% 50% -50px;\n        -ms-transform-origin: 50% 50% -50px;\n            transform-origin: 50% 50% -50px; }\n    [data-effeckt-type=\"fly\"] li.past, [data-effeckt-type=\"fly\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"fly\"] li.past {\n      -webkit-transform: rotateX(180deg);\n              transform: rotateX(180deg); }\n    [data-effeckt-type=\"fly\"] li.future {\n      -webkit-transform: rotateX(-180deg);\n              transform: rotateX(-180deg); }\n\n[data-effeckt-type=\"landing\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"landing\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: 50% 50%;\n        -ms-transform-origin: 50% 50%;\n            transform-origin: 50% 50%; }\n    [data-effeckt-type=\"landing\"] li.past, [data-effeckt-type=\"landing\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"landing\"] li.past {\n      -webkit-transform: scale(1.5) translate(10%, -50%);\n          -ms-transform: scale(1.5) translate(10%, -50%);\n              transform: scale(1.5) translate(10%, -50%); }\n    [data-effeckt-type=\"landing\"] li.future {\n      -webkit-transform: scale(1.5) translate(-10%, 50%);\n          -ms-transform: scale(1.5) translate(-10%, 50%);\n              transform: scale(1.5) translate(-10%, 50%); }\n\n[data-effeckt-type=\"swing-front\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"swing-front\"] li {\n    transition: all 500ms ease, opacity 250ms ease; }\n    [data-effeckt-type=\"swing-front\"] li.past, [data-effeckt-type=\"swing-front\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"swing-front\"] li.past {\n      -webkit-transform-origin: bottom;\n          -ms-transform-origin: bottom;\n              transform-origin: bottom;\n      -webkit-transform: rotateX(140deg);\n              transform: rotateX(140deg); }\n    [data-effeckt-type=\"swing-front\"] li.future {\n      -webkit-transform-origin: top;\n          -ms-transform-origin: top;\n              transform-origin: top;\n      -webkit-transform: rotateX(-140deg);\n              transform: rotateX(-140deg); }\n\n[data-effeckt-type=\"swing-back\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"swing-back\"] li {\n    transition: all 500ms ease, opacity 250ms ease; }\n    [data-effeckt-type=\"swing-back\"] li.past, [data-effeckt-type=\"swing-back\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"swing-back\"] li.past {\n      -webkit-transform-origin: bottom;\n          -ms-transform-origin: bottom;\n              transform-origin: bottom;\n      -webkit-transform: rotateX(-140deg);\n              transform: rotateX(-140deg); }\n    [data-effeckt-type=\"swing-back\"] li.future {\n      -webkit-transform-origin: top;\n          -ms-transform-origin: top;\n              transform-origin: top;\n      -webkit-transform: rotateX(140deg);\n              transform: rotateX(140deg); }\n\n[data-effeckt-type=\"twist\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"twist\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: center;\n        -ms-transform-origin: center;\n            transform-origin: center; }\n    [data-effeckt-type=\"twist\"] li.past, [data-effeckt-type=\"twist\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"twist\"] li.past {\n      -webkit-transform: rotateY(-180deg);\n              transform: rotateY(-180deg); }\n    [data-effeckt-type=\"twist\"] li.future {\n      -webkit-transform: rotateY(180deg);\n              transform: rotateY(180deg); }\n\n[data-effeckt-type=\"door\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"door\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: 0% 0%;\n        -ms-transform-origin: 0% 0%;\n            transform-origin: 0% 0%; }\n    [data-effeckt-type=\"door\"] li.past, [data-effeckt-type=\"door\"] li.future {\n      opacity: 0;\n      -webkit-transform: rotateY(-90deg);\n              transform: rotateY(-90deg); }\n\n[data-effeckt-type=\"climb\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"climb\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: 0% 0%;\n        -ms-transform-origin: 0% 0%;\n            transform-origin: 0% 0%; }\n    [data-effeckt-type=\"climb\"] li.past {\n      -webkit-transform: translateY(-200%);\n          -ms-transform: translateY(-200%);\n              transform: translateY(-200%); }\n    [data-effeckt-type=\"climb\"] li.future {\n      -webkit-transform: translateY(200%);\n          -ms-transform: translateY(200%);\n              transform: translateY(200%); }\n\n.effeckt-modal-wrap {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  max-width: 320px;\n  min-width: 320px;\n  -webkit-transform: translate(-50%, -50%);\n      -ms-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  z-index: 2000;\n  visibility: hidden;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n\n.effeckt-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  opacity: 0;\n  transition-duration: 500ms; }\n\n.effeckt-show.effeckt-modal-wrap {\n  visibility: visible; }\n  .effeckt-show.effeckt-modal-wrap ~ .effeckt-modal-overlay {\n    visibility: visible;\n    opacity: 1; }\n\n.effeckt-modal {\n  transition-property: all;\n  transition-duration: 500ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0, 1.5);\n  -webkit-animation-duration: 1000ms;\n          animation-duration: 1000ms;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0, 1.5);\n          animation-timing-function: cubic-bezier(0.4, 0, 0, 1.5); }\n\n.from-below .effeckt-content {\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5);\n  opacity: 0; }\n\n.effeckt-show.from-below .effeckt-content {\n  -webkit-transform: scale(1);\n      -ms-transform: scale(1);\n          transform: scale(1);\n  opacity: 1; }\n\n.from-above .effeckt-content {\n  -webkit-transform: scale(1.5);\n      -ms-transform: scale(1.5);\n          transform: scale(1.5);\n  opacity: 0; }\n\n.effeckt-show.from-above .effeckt-content {\n  -webkit-transform: scale(1);\n      -ms-transform: scale(1);\n          transform: scale(1);\n  opacity: 1; }\n\n.to-below .effeckt-content {\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5);\n  opacity: 0; }\n\n.to-above .effeckt-content {\n  -webkit-transform: scale(1.5);\n      -ms-transform: scale(1.5);\n          transform: scale(1.5);\n  opacity: 0; }\n\n.slide-in-top .effeckt-content {\n  -webkit-transform: translate3d(0, -100%, 0);\n          transform: translate3d(0, -100%, 0);\n  opacity: 0; }\n\n.effeckt-show.slide-in-top .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.slide-in-right .effeckt-content {\n  -webkit-transform: translate3d(30%, 0, 0);\n          transform: translate3d(30%, 0, 0);\n  opacity: 0; }\n\n.effeckt-show.slide-in-right .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.slide-in-bottom .effeckt-content {\n  -webkit-transform: translate3d(0, 30%, 0);\n          transform: translate3d(0, 30%, 0);\n  opacity: 0; }\n\n.effeckt-show.slide-in-bottom .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.slide-in-left .effeckt-content {\n  -webkit-transform: translate3d(-30%, 0, 0);\n          transform: translate3d(-30%, 0, 0);\n  opacity: 0; }\n\n.effeckt-show.slide-in-left .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.sticky-up {\n  top: 0;\n  -webkit-transform: translate(-50%, 0);\n      -ms-transform: translate(-50%, 0);\n          transform: translate(-50%, 0); }\n\n.sticky-up .effeckt-content {\n  -webkit-transform: translate3d(0, -100%, 0);\n          transform: translate3d(0, -100%, 0);\n  opacity: 0; }\n\n.effeckt-show.sticky-up .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.slip-in-from-top ~ [data-effeckt-page], .slip-in-from-top ~ .effeckt-overlay {\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-transform-origin: 50% 100%;\n      -ms-transform-origin: 50% 100%;\n          transform-origin: 50% 100%; }\n\n.slip-in-from-top .effeckt-content {\n  -webkit-transform: translateY(-200%);\n      -ms-transform: translateY(-200%);\n          transform: translateY(-200%);\n  opacity: 0; }\n\n.effeckt-show.slip-in-from-top ~ [data-effeckt-page], .effeckt-show.slip-in-from-top ~ .effeckt-overlay {\n  -webkit-animation: OpenTop 500ms forwards ease-in;\n          animation: OpenTop 500ms forwards ease-in; }\n\n.effeckt-show.slip-in-from-top .effeckt-content {\n  -webkit-transform: translateY(0);\n      -ms-transform: translateY(0);\n          transform: translateY(0);\n  opacity: 1; }\n\n@-webkit-keyframes OpenTop {\n  50% {\n    -webkit-transform: rotateX(10deg);\n            transform: rotateX(10deg);\n    -webkit-animation-timing-function: ease-out;\n            animation-timing-function: ease-out; } }\n\n@keyframes OpenTop {\n  50% {\n    -webkit-transform: rotateX(10deg);\n            transform: rotateX(10deg);\n    -webkit-animation-timing-function: ease-out;\n            animation-timing-function: ease-out; } }\n\n.slide-out-bottom .effeckt-content {\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%);\n  opacity: 0; }\n\n.slide-out-top .effeckt-content {\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%);\n  opacity: 0; }\n\n.slide-out-right .effeckt-content {\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%);\n  opacity: 0; }\n\n.slide-out-left .effeckt-content {\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%);\n  opacity: 0; }\n\n.flip-horizontal-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.flip-horizontal-3D .effeckt-content {\n  -webkit-transform: rotateY(-70deg);\n          transform: rotateY(-70deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  opacity: 0; }\n\n.effeckt-show.flip-horizontal-3D .effeckt-content {\n  -webkit-transform: rotateY(0deg);\n          transform: rotateY(0deg);\n  opacity: 1; }\n\n.flip-vertical-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.flip-vertical-3D .effeckt-content {\n  -webkit-transform: rotateX(-70deg);\n          transform: rotateX(-70deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  opacity: 0; }\n\n.effeckt-show.flip-vertical-3D .effeckt-content {\n  -webkit-transform: rotateX(0deg);\n          transform: rotateX(0deg);\n  opacity: 1; }\n\n.sign-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.sign-3D .effeckt-content {\n  -webkit-transform: rotateX(-60deg);\n          transform: rotateX(-60deg);\n  -webkit-transform-origin: 50% 0;\n      -ms-transform-origin: 50% 0;\n          transform-origin: 50% 0;\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  opacity: 0; }\n\n.effeckt-show.sign-3D .effeckt-content {\n  -webkit-transform: rotateX(0deg);\n          transform: rotateX(0deg);\n  opacity: 1; }\n\n.slit-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.slit-3D .effeckt-content {\n  -webkit-transform: translateZ(-3000px) rotateY(90deg);\n          transform: translateZ(-3000px) rotateY(90deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  opacity: 0; }\n\n.effeckt-show.slit-3D .effeckt-content {\n  -webkit-animation: modalSlit 0.7s forwards ease-out;\n          animation: modalSlit 0.7s forwards ease-out; }\n\n@-webkit-keyframes modalSlit {\n  50% {\n    -webkit-transform: translateZ(-250px) rotateY(89deg);\n            transform: translateZ(-250px) rotateY(89deg);\n    opacity: 0.75;\n    -webkit-animation-timing-function: ease-in;\n            animation-timing-function: ease-in; }\n\n  100% {\n    -webkit-transform: translateZ(0) rotateY(0deg);\n            transform: translateZ(0) rotateY(0deg);\n    opacity: 1; } }\n\n@keyframes modalSlit {\n  50% {\n    -webkit-transform: translateZ(-250px) rotateY(89deg);\n            transform: translateZ(-250px) rotateY(89deg);\n    opacity: 0.75;\n    -webkit-animation-timing-function: ease-in;\n            animation-timing-function: ease-in; }\n\n  100% {\n    -webkit-transform: translateZ(0) rotateY(0deg);\n            transform: translateZ(0) rotateY(0deg);\n    opacity: 1; } }\n\n.rotate-from-bottom-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.rotate-from-bottom-3D .effeckt-content {\n  -webkit-transform: translateY(100%) rotateX(90deg);\n          transform: translateY(100%) rotateX(90deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-transform-origin: 0 100%;\n      -ms-transform-origin: 0 100%;\n          transform-origin: 0 100%;\n  opacity: 0; }\n\n.effeckt-show.rotate-from-bottom-3D .effeckt-content {\n  -webkit-transform: translateY(0%) rotateX(0deg);\n          transform: translateY(0%) rotateX(0deg);\n  opacity: 1; }\n\n.rotate-from-left-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.rotate-from-left-3D .effeckt-content {\n  -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n          transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-transform-origin: 0 100%;\n      -ms-transform-origin: 0 100%;\n          transform-origin: 0 100%;\n  opacity: 0; }\n\n.effeckt-show.rotate-from-left-3D .effeckt-content {\n  -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);\n          transform: translateZ(0px) translateX(0%) rotateY(0deg);\n  opacity: 1; }\n\n.let-me-in ~ [data-effeckt-page].effeckt-page-active {\n  transition: 500ms;\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  -webkit-transform-origin: 50% 0%;\n      -ms-transform-origin: 50% 0%;\n          transform-origin: 50% 0%;\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d; }\n\n.let-me-in .effeckt-content {\n  opacity: 0;\n  -webkit-transform: translate3d(0, 200%, 0);\n          transform: translate3d(0, 200%, 0); }\n\n.effeckt-show.let-me-in ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-transform: rotateX(-7deg);\n          transform: rotateX(-7deg);\n  opacity: 1; }\n  .effeckt-show.let-me-in ~ [data-effeckt-page].effeckt-page-active:after {\n    opacity: 1;\n    visibility: visible; }\n\n.effeckt-show.let-me-in .effeckt-content {\n  -webkit-transform: translate3d(0, -50%, 0);\n          transform: translate3d(0, -50%, 0);\n  opacity: 1; }\n\n.make-way {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.make-way ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-transform-origin: 0% 50%;\n      -ms-transform-origin: 0% 50%;\n          transform-origin: 0% 50%; }\n\n.make-way .effeckt-content {\n  -webkit-transform: translate3d(200%, 0, 0);\n          transform: translate3d(200%, 0, 0);\n  opacity: 0; }\n\n.effeckt-show.make-way ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-animation: makeWay 500ms forwards ease-in;\n          animation: makeWay 500ms forwards ease-in; }\n\n.effeckt-show.make-way .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n@-webkit-keyframes makeWay {\n  50% {\n    -webkit-transform: translate3d(0, 0, -50px) rotateY(5deg);\n            transform: translate3d(0, 0, -50px) rotateY(5deg); }\n\n  100% {\n    -webkit-transform: translate3d(0, 0, -200px);\n            transform: translate3d(0, 0, -200px); } }\n\n@keyframes makeWay {\n  50% {\n    -webkit-transform: translate3d(0, 0, -50px) rotateY(5deg);\n            transform: translate3d(0, 0, -50px) rotateY(5deg); }\n\n  100% {\n    -webkit-transform: translate3d(0, 0, -200px);\n            transform: translate3d(0, 0, -200px); } }\n\n.deep-content .effeckt-content {\n  -webkit-transform: scale(0.8);\n      -ms-transform: scale(0.8);\n          transform: scale(0.8);\n  opacity: 0; }\n\n.effeckt-show.deep-content .effeckt-content {\n  -webkit-transform: scale(1.1);\n      -ms-transform: scale(1.1);\n          transform: scale(1.1);\n  opacity: 1; }\n\n.deep-content ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  transition: 500ms; }\n\n.effeckt-show.deep-content ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-transform: translate3d(0, 0, -85px);\n          transform: translate3d(0, 0, -85px);\n  -webkit-filter: blur(3px);\n          filter: blur(3px); }\n\n.newspaper .effeckt-content {\n  -webkit-transform: scale(0.5) rotate(720deg);\n      -ms-transform: scale(0.5) rotate(720deg);\n          transform: scale(0.5) rotate(720deg);\n  opacity: 0; }\n\n.effeckt-show.newspaper .effeckt-content {\n  -webkit-transform: scale(1) rotate(0deg);\n      -ms-transform: scale(1) rotate(0deg);\n          transform: scale(1) rotate(0deg);\n  opacity: 1; }\n\n.side-fall {\n  -webkit-perspective: 600px;\n          perspective: 600px;\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d; }\n\n.side-fall .effeckt-content {\n  transition-timing-function: ease-out;\n  -webkit-transform: translateZ(600px) translateX(30%) rotate(10deg);\n          transform: translateZ(600px) translateX(30%) rotate(10deg);\n  opacity: 0; }\n\n.effeckt-show.side-fall .effeckt-content {\n  transition-timing-function: ease-in;\n  -webkit-transform: translateZ(0) translateX(0) rotate(0deg);\n          transform: translateZ(0) translateX(0) rotate(0deg);\n  opacity: 1; }\n\n.fade-in .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.fade-in .effeckt-content {\n  opacity: 1; }\n\n.effeckt-show.blur ~ [data-effeckt-page] {\n  -webkit-filter: blur(3px);\n          filter: blur(3px);\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0); }\n\n.blur .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.blur ~ [data-effeckt-page] {\n  transition: all 500ms ease; }\n\n.effeckt-show.blur .effeckt-content {\n  opacity: 1; }\n\n.tilt-fall .effeckt-content {\n  -webkit-transform: translateY(100%) rotate(-25deg);\n      -ms-transform: translateY(100%) rotate(-25deg);\n          transform: translateY(100%) rotate(-25deg);\n  opacity: 0; }\n\n.shake .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.shake .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: shake;\n          animation-name: shake;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes shake {\n  0%, 100% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0); }\n\n  10%, 30%, 50%, 70%, 90% {\n    -webkit-transform: translateX(-10px);\n            transform: translateX(-10px); }\n\n  20%, 40%, 60%, 80% {\n    -webkit-transform: translateX(10px);\n            transform: translateX(10px); } }\n\n@keyframes shake {\n  0%, 100% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0); }\n\n  10%, 30%, 50%, 70%, 90% {\n    -webkit-transform: translateX(-10px);\n            transform: translateX(-10px); }\n\n  20%, 40%, 60%, 80% {\n    -webkit-transform: translateX(10px);\n            transform: translateX(10px); } }\n\n.bounce .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.bounce .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: bounce;\n          animation-name: bounce;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes bounce {\n  0%, 20%, 50%, 80%, 100% {\n    -webkit-transform: translateY(0);\n            transform: translateY(0); }\n\n  40% {\n    -webkit-transform: translateY(-30px);\n            transform: translateY(-30px); }\n\n  60% {\n    -webkit-transform: translateY(-15px);\n            transform: translateY(-15px); } }\n\n@keyframes bounce {\n  0%, 20%, 50%, 80%, 100% {\n    -webkit-transform: translateY(0);\n            transform: translateY(0); }\n\n  40% {\n    -webkit-transform: translateY(-30px);\n            transform: translateY(-30px); }\n\n  60% {\n    -webkit-transform: translateY(-15px);\n            transform: translateY(-15px); } }\n\n.pulse .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.pulse .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: pulse;\n          animation-name: pulse;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  50% {\n    -webkit-transform: scale(1.1);\n            transform: scale(1.1); }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  50% {\n    -webkit-transform: scale(1.1);\n            transform: scale(1.1); }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n.wobble .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.wobble .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: wobble;\n          animation-name: wobble;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes wobble {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  15% {\n    -webkit-transform: translateX(-25%) rotate(-5deg);\n            transform: translateX(-25%) rotate(-5deg); }\n\n  30% {\n    -webkit-transform: translateX(20%) rotate(3deg);\n            transform: translateX(20%) rotate(3deg); }\n\n  45% {\n    -webkit-transform: translateX(-15%) rotate(-3deg);\n            transform: translateX(-15%) rotate(-3deg); }\n\n  60% {\n    -webkit-transform: translateX(10%) rotate(2deg);\n            transform: translateX(10%) rotate(2deg); }\n\n  75% {\n    -webkit-transform: translateX(-5%) rotate(-1deg);\n            transform: translateX(-5%) rotate(-1deg); }\n\n  100% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); } }\n\n@keyframes wobble {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  15% {\n    -webkit-transform: translateX(-25%) rotate(-5deg);\n            transform: translateX(-25%) rotate(-5deg); }\n\n  30% {\n    -webkit-transform: translateX(20%) rotate(3deg);\n            transform: translateX(20%) rotate(3deg); }\n\n  45% {\n    -webkit-transform: translateX(-15%) rotate(-3deg);\n            transform: translateX(-15%) rotate(-3deg); }\n\n  60% {\n    -webkit-transform: translateX(10%) rotate(2deg);\n            transform: translateX(10%) rotate(2deg); }\n\n  75% {\n    -webkit-transform: translateX(-5%) rotate(-1deg);\n            transform: translateX(-5%) rotate(-1deg); }\n\n  100% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); } }\n\n.swing .effeckt-content {\n  -webkit-transform-origin: 50% 0%;\n      -ms-transform-origin: 50% 0%;\n          transform-origin: 50% 0%;\n  opacity: 0; }\n\n.effeckt-show.swing .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: swing;\n          animation-name: swing;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes swing {\n  20% {\n    -webkit-transform: rotate(15deg);\n            transform: rotate(15deg); }\n\n  40% {\n    -webkit-transform: rotate(-10deg);\n            transform: rotate(-10deg); }\n\n  60% {\n    -webkit-transform: rotate(5deg);\n            transform: rotate(5deg); }\n\n  80% {\n    -webkit-transform: rotate(-5deg);\n            transform: rotate(-5deg); }\n\n  100% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg); } }\n\n@keyframes swing {\n  20% {\n    -webkit-transform: rotate(15deg);\n            transform: rotate(15deg); }\n\n  40% {\n    -webkit-transform: rotate(-10deg);\n            transform: rotate(-10deg); }\n\n  60% {\n    -webkit-transform: rotate(5deg);\n            transform: rotate(5deg); }\n\n  80% {\n    -webkit-transform: rotate(-5deg);\n            transform: rotate(-5deg); }\n\n  100% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg); } }\n\n.tada .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.tada .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: tada;\n          animation-name: tada;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes tada {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  10%, 20% {\n    -webkit-transform: scale(0.9) rotate(-3deg);\n            transform: scale(0.9) rotate(-3deg); }\n\n  30%, 50%, 70%, 90% {\n    -webkit-transform: scale(1.1) rotate(3deg);\n            transform: scale(1.1) rotate(3deg); }\n\n  40%, 60%, 80% {\n    -webkit-transform: scale(1.1) rotate(-3deg);\n            transform: scale(1.1) rotate(-3deg); }\n\n  100% {\n    -webkit-transform: scale(1) rotate(0);\n            transform: scale(1) rotate(0); } }\n\n@keyframes tada {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  10%, 20% {\n    -webkit-transform: scale(0.9) rotate(-3deg);\n            transform: scale(0.9) rotate(-3deg); }\n\n  30%, 50%, 70%, 90% {\n    -webkit-transform: scale(1.1) rotate(3deg);\n            transform: scale(1.1) rotate(3deg); }\n\n  40%, 60%, 80% {\n    -webkit-transform: scale(1.1) rotate(-3deg);\n            transform: scale(1.1) rotate(-3deg); }\n\n  100% {\n    -webkit-transform: scale(1) rotate(0);\n            transform: scale(1) rotate(0); } }\n\n.effeckt-off-screen-nav ~ [data-effeckt-page].effeckt-page-active:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  background: rgba(0, 0, 0, 0.2);\n  opacity: 0;\n  visibility: hidden;\n  transition: 500ms; }\n.effeckt-off-screen-nav.effeckt-show ~ [data-effeckt-page].effeckt-page-active:after {\n  opacity: 1;\n  visibility: visible; }\n\n.effeckt-off-screen-nav-left-overlay {\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%);\n  transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); }\n  .effeckt-off-screen-nav-left-overlay.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n\n.effeckt-off-screen-nav-left-push {\n  -webkit-transform: translateX(-12rem);\n      -ms-transform: translateX(-12rem);\n          transform: translateX(-12rem);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-left-push.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-left-push.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n      -webkit-transform: translateX(12rem);\n          -ms-transform: translateX(12rem);\n              transform: translateX(12rem); }\n  .effeckt-off-screen-nav-left-push ~ [data-effeckt-page].effeckt-page-active {\n    transition: 500ms;\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n\n.effeckt-off-screen-nav-left-reveal {\n  width: 0px;\n  -webkit-transform: translate3D(0, 0, 0);\n      -ms-transform: translate3D(0, 0, 0);\n          transform: translate3D(0, 0, 0);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-left-reveal h4 {\n    width: 10rem; }\n  .effeckt-off-screen-nav-left-reveal.effeckt-show {\n    width: 12rem;\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-left-reveal.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateX(12rem);\n          -ms-transform: translateX(12rem);\n              transform: translateX(12rem); }\n  .effeckt-off-screen-nav-left-reveal ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-left-squeeze {\n  width: 40%;\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-left-squeeze.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-left-squeeze.effeckt-show ~ [data-effeckt-page] {\n      width: 60%; }\n  .effeckt-off-screen-nav-left-squeeze ~ [data-effeckt-page] {\n    float: right;\n    transition: width 500ms;\n    max-width: none; }\n\n.effeckt-off-screen-nav-right-overlay {\n  right: 0;\n  left: auto;\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%);\n  transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); }\n  .effeckt-off-screen-nav-right-overlay.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n\n.effeckt-off-screen-nav-right-push {\n  left: auto;\n  right: 0;\n  -webkit-transform: translateX(12rem);\n      -ms-transform: translateX(12rem);\n          transform: translateX(12rem);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-push.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-right-push.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateX(-12rem);\n          -ms-transform: translateX(-12rem);\n              transform: translateX(-12rem); }\n  .effeckt-off-screen-nav-right-push ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-right-reveal {\n  width: 0;\n  overflow: hidden;\n  left: auto;\n  right: 0;\n  -webkit-transform: translate3D(0, 0, 0);\n      -ms-transform: translate3D(0, 0, 0);\n          transform: translate3D(0, 0, 0);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-reveal h4 {\n    width: 10rem;\n    position: absolute;\n    top: 0px;\n    right: 0; }\n  .effeckt-off-screen-nav-right-reveal ul {\n    width: 12rem;\n    position: absolute;\n    top: 3.2rem;\n    right: 0; }\n  .effeckt-off-screen-nav-right-reveal.effeckt-show {\n    width: 12rem; }\n    .effeckt-off-screen-nav-right-reveal.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateX(-12rem);\n          -ms-transform: translateX(-12rem);\n              transform: translateX(-12rem); }\n  .effeckt-off-screen-nav-right-reveal ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-right-squeeze {\n  left: auto;\n  right: 0;\n  width: 40%;\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-squeeze.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-right-squeeze.effeckt-show ~ [data-effeckt-page] {\n      width: 60%; }\n  .effeckt-off-screen-nav-right-squeeze ~ [data-effeckt-page] {\n    float: left;\n    transition: width 500ms;\n    max-width: none; }\n\n.effeckt-off-screen-nav-left-rotate {\n  -webkit-transform-origin: 100% 50%;\n      -ms-transform-origin: 100% 50%;\n          transform-origin: 100% 50%;\n  transition: 500ms;\n  -webkit-transform: translateX(-100%) scale(1.01) rotateY(-30deg);\n          transform: translateX(-100%) scale(1.01) rotateY(-30deg); }\n  .effeckt-off-screen-nav-left-rotate ~ [data-effeckt-page].effeckt-page-active {\n    -webkit-transform-origin: 0 50%;\n        -ms-transform-origin: 0 50%;\n            transform-origin: 0 50%;\n    transition: 500ms; }\n  .effeckt-off-screen-nav-left-rotate ~ .effeckt-overlay {\n    z-index: 900;\n    visibility: visible;\n    opacity: 1; }\n  .effeckt-off-screen-nav-left-rotate.effeckt-show {\n    -webkit-transform: none;\n        -ms-transform: none;\n            transform: none; }\n    .effeckt-off-screen-nav-left-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n      -webkit-transform: translateX(260px) rotateY(15deg);\n              transform: translateX(260px) rotateY(15deg);\n      overflow: hidden; }\n      .effeckt-off-screen-nav-left-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active:after {\n        background: none; }\n    .effeckt-off-screen-nav-left-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-off-screen-nav-top-overlay {\n  width: 100%;\n  bottom: auto;\n  transition: 500ms;\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%); }\n  .effeckt-off-screen-nav-top-overlay.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n\n.effeckt-off-screen-nav-bottom-overlay {\n  width: 100%;\n  top: auto;\n  transition: 500ms;\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%); }\n  .effeckt-off-screen-nav-bottom-overlay.effeckt-show {\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n\n.effeckt-off-screen-nav-top-bounce {\n  width: 100%;\n  bottom: auto;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-top-bounce.effeckt-show {\n    visibility: visible;\n    -webkit-animation: navFromTopBounceIn 500ms both ease;\n            animation: navFromTopBounceIn 500ms both ease; }\n  .effeckt-off-screen-nav-top-bounce.effeckt-hide {\n    -webkit-animation: navFromTopBounceOut 500ms both ease;\n            animation: navFromTopBounceOut 500ms both ease; }\n\n.effeckt-off-screen-nav-top-bounce-out {\n  width: 100%;\n  bottom: auto;\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-top-bounce-out.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-top-bounce-out.effeckt-hide {\n    -webkit-animation: navFromTopBounceOut 500ms both ease;\n            animation: navFromTopBounceOut 500ms both ease; }\n\n@-webkit-keyframes navFromTopBounceIn {\n  0% {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); }\n\n  20% {\n    padding-top: 0px;\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%); }\n\n  60% {\n    padding-top: 20px; }\n\n  100% {\n    padding-top: 0; } }\n\n@keyframes navFromTopBounceIn {\n  0% {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); }\n\n  20% {\n    padding-top: 0px;\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%); }\n\n  60% {\n    padding-top: 20px; }\n\n  100% {\n    padding-top: 0; } }\n\n@-webkit-keyframes navFromTopBounceOut {\n  0% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-top: 0px; }\n\n  40% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-top: 20px; }\n\n  80% {\n    padding-top: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@keyframes navFromTopBounceOut {\n  0% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-top: 0px; }\n\n  40% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-top: 20px; }\n\n  80% {\n    padding-top: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n.effeckt-off-screen-nav-bottom-bounce {\n  width: 100%;\n  top: auto;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-bottom-bounce.effeckt-show {\n    -webkit-animation: navFromBottomBounceIn 500ms both ease;\n            animation: navFromBottomBounceIn 500ms both ease; }\n  .effeckt-off-screen-nav-bottom-bounce.effeckt-hide {\n    -webkit-animation: navFromBottomBounceOut 500ms both ease;\n            animation: navFromBottomBounceOut 500ms both ease; }\n\n.effeckt-off-screen-nav-bottom-bounce-out {\n  width: 100%;\n  top: auto;\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-bottom-bounce-out.effeckt-show {\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-bottom-bounce-out.effeckt-hide {\n    -webkit-animation: navFromBottomBounceOut 500ms both ease;\n            animation: navFromBottomBounceOut 500ms both ease; }\n\n@-webkit-keyframes navFromBottomBounceIn {\n  0% {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); }\n\n  20% {\n    padding-bottom: 0px;\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%); }\n\n  60% {\n    padding-bottom: 20px; }\n\n  100% {\n    padding-bottom: 0; } }\n\n@keyframes navFromBottomBounceIn {\n  0% {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); }\n\n  20% {\n    padding-bottom: 0px;\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%); }\n\n  60% {\n    padding-bottom: 20px; }\n\n  100% {\n    padding-bottom: 0; } }\n\n@-webkit-keyframes navFromBottomBounceOut {\n  0% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-bottom: 0px; }\n\n  40% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-bottom: 20px; }\n\n  80% {\n    padding-bottom: 0; }\n\n  90%, 100% {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@keyframes navFromBottomBounceOut {\n  0% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-bottom: 0px; }\n\n  40% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-bottom: 20px; }\n\n  80% {\n    padding-bottom: 0; }\n\n  90%, 100% {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n.effeckt-off-screen-nav-push-top {\n  width: 100%;\n  bottom: auto;\n  transition: 500ms;\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%); }\n  .effeckt-off-screen-nav-push-top.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n    .effeckt-off-screen-nav-push-top.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateY(12rem);\n          -ms-transform: translateY(12rem);\n              transform: translateY(12rem); }\n  .effeckt-off-screen-nav-push-top ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-push-bottom {\n  width: 100%;\n  top: auto;\n  transition: 500ms;\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%); }\n  .effeckt-off-screen-nav-push-bottom.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n    .effeckt-off-screen-nav-push-bottom.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateY(-12rem);\n          -ms-transform: translateY(-12rem);\n              transform: translateY(-12rem); }\n  .effeckt-off-screen-nav-push-bottom ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-right-rotate {\n  left: auto;\n  right: 0;\n  -webkit-transform-origin: 100% 50%;\n      -ms-transform-origin: 100% 50%;\n          transform-origin: 100% 50%;\n  transition: 500ms;\n  -webkit-transform: rotateY(30deg) translateX(100%) scale(1.01);\n          transform: rotateY(30deg) translateX(100%) scale(1.01); }\n  .effeckt-off-screen-nav-right-rotate ~ [data-effeckt-page] {\n    -webkit-transform-origin: 100% 50%;\n        -ms-transform-origin: 100% 50%;\n            transform-origin: 100% 50%;\n    transition: 500ms; }\n  .effeckt-off-screen-nav-right-rotate ~ .effeckt-overlay {\n    z-index: 900;\n    visibility: visible;\n    opacity: 1; }\n  .effeckt-off-screen-nav-right-rotate.effeckt-show {\n    -webkit-transform: none;\n        -ms-transform: none;\n            transform: none; }\n    .effeckt-off-screen-nav-right-rotate.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateX(-260px) rotateY(-15deg);\n              transform: translateX(-260px) rotateY(-15deg);\n      overflow: hidden; }\n      .effeckt-off-screen-nav-right-rotate.effeckt-show ~ [data-effeckt-page]:after {\n        background: none; }\n    .effeckt-off-screen-nav-right-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-off-screen-nav-top-card-deck {\n  -webkit-perspective: 800px;\n          perspective: 800px;\n  bottom: auto;\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%);\n  width: 100%;\n  overflow: visible;\n  transition: -webkit-transform 250ms;\n  transition: transform 250ms; }\n  .effeckt-off-screen-nav-top-card-deck.effeckt-show {\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-top-card-deck h4 {\n    position: relative;\n    z-index: 300;\n    -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform-origin: 50% 0%;\n        -ms-transform-origin: 50% 0%;\n            transform-origin: 50% 0%;\n    transition: all 250ms ease-out;\n    display: block; }\n    .effeckt-off-screen-nav-top-card-deck h4:active {\n      -webkit-transform: rotateX(60deg);\n              transform: rotateX(60deg); }\n  .effeckt-off-screen-nav-top-card-deck ul {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    margin: 0; }\n    .effeckt-off-screen-nav-top-card-deck ul li {\n      transition: all 250ms ease-out;\n      position: absolute;\n      top: 0;\n      z-index: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: translateY(0px);\n          -ms-transform: translateY(0px);\n              transform: translateY(0px); }\n\n.effeckt-off-screen-nav-bottom-card-deck {\n  -webkit-perspective: 800px;\n          perspective: 800px;\n  top: auto;\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%);\n  width: 100%;\n  overflow: visible;\n  transition: -webkit-transform 250ms;\n  transition: transform 250ms; }\n  .effeckt-off-screen-nav-bottom-card-deck.effeckt-show {\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-bottom-card-deck h4 {\n    position: relative;\n    z-index: 300;\n    -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform-origin: 50% 100%;\n        -ms-transform-origin: 50% 100%;\n            transform-origin: 50% 100%;\n    transition: all 250ms ease-out;\n    display: block; }\n    .effeckt-off-screen-nav-bottom-card-deck h4:active {\n      -webkit-transform: rotateX(-60deg);\n              transform: rotateX(-60deg); }\n  .effeckt-off-screen-nav-bottom-card-deck ul {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    bottom: 0;\n    margin: 0; }\n    .effeckt-off-screen-nav-bottom-card-deck ul li {\n      transition: all 250ms ease-out;\n      position: absolute;\n      top: 0;\n      z-index: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: translateY(300px);\n          -ms-transform: translateY(300px);\n              transform: translateY(300px); }\n\n.effeckt-off-screen-nav-left-bounce {\n  transition: 500ms;\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%); }\n  .effeckt-off-screen-nav-left-bounce.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateX(0%);\n        -ms-transform: translateX(0%);\n            transform: translateX(0%);\n    -webkit-animation: navFromLeftBounceIn 500ms both ease;\n            animation: navFromLeftBounceIn 500ms both ease; }\n  .effeckt-off-screen-nav-left-bounce.effeckt-hide {\n    -webkit-transform: translateX(-100%);\n        -ms-transform: translateX(-100%);\n            transform: translateX(-100%);\n    -webkit-animation: navFromLeftBounceOut 500ms both ease;\n            animation: navFromLeftBounceOut 500ms both ease; }\n\n@-webkit-keyframes navFromLeftBounceIn {\n  0% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); }\n\n  20% {\n    padding-left: 0px;\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  60% {\n    padding-left: 20px; }\n\n  100% {\n    padding-left: 0px; } }\n\n@keyframes navFromLeftBounceIn {\n  0% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); }\n\n  20% {\n    padding-left: 0px;\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  60% {\n    padding-left: 20px; }\n\n  100% {\n    padding-left: 0px; } }\n\n@-webkit-keyframes navFromLeftBounceOut {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-left: 0px; }\n\n  40% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-left: 20px; }\n\n  80% {\n    padding-left: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@keyframes navFromLeftBounceOut {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-left: 0px; }\n\n  40% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-left: 20px; }\n\n  80% {\n    padding-left: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n.effeckt-off-screen-nav-left-bounce-out {\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-left-bounce-out.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-left-bounce-out.effeckt-hide {\n    -webkit-animation: navFromLeftBounceOut 500ms both ease;\n            animation: navFromLeftBounceOut 500ms both ease; }\n\n.effeckt-off-screen-nav-right-bounce {\n  left: auto;\n  right: 0;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-bounce.effeckt-show {\n    visibility: visible;\n    -webkit-animation: navFromRightBounceIn 500ms both ease;\n            animation: navFromRightBounceIn 500ms both ease; }\n  .effeckt-off-screen-nav-right-bounce.effeckt-hide {\n    -webkit-animation: navFromRightBounceOut 500ms both ease;\n            animation: navFromRightBounceOut 500ms both ease; }\n\n@-webkit-keyframes navFromRightBounceIn {\n  0% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); }\n\n  20% {\n    padding-right: 0px;\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  60% {\n    padding-right: 20px; }\n\n  100% {\n    padding-right: 0px; } }\n\n@keyframes navFromRightBounceIn {\n  0% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); }\n\n  20% {\n    padding-right: 0px;\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  60% {\n    padding-right: 20px; }\n\n  100% {\n    padding-right: 0px; } }\n\n@-webkit-keyframes navFromRightBounceOut {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-right: 0px; }\n\n  40% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-right: 20px; }\n\n  80% {\n    padding-right: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@keyframes navFromRightBounceOut {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-right: 0px; }\n\n  40% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-right: 20px; }\n\n  80% {\n    padding-right: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n.effeckt-off-screen-nav-right-bounce-out {\n  left: auto;\n  right: 0;\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-bounce-out.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-right-bounce-out.effeckt-hide {\n    -webkit-animation: navFromRightBounceOut 500ms both ease;\n            animation: navFromRightBounceOut 500ms both ease; }\n\n.effeckt-off-screen-nav-bottom-rotate {\n  top: auto;\n  width: 100%;\n  -webkit-transform-origin: 100% 50%;\n      -ms-transform-origin: 100% 50%;\n          transform-origin: 100% 50%;\n  transition: 500ms;\n  -webkit-transform: translateY(100%) scale(1.01) rotateX(-30deg);\n          transform: translateY(100%) scale(1.01) rotateX(-30deg); }\n  .effeckt-off-screen-nav-bottom-rotate ~ [data-effeckt-page].effeckt-page-active {\n    -webkit-transform-origin: 0% 100%;\n        -ms-transform-origin: 0% 100%;\n            transform-origin: 0% 100%;\n    transition: 500ms; }\n  .effeckt-off-screen-nav-bottom-rotate ~ .effeckt-overlay {\n    z-index: 900;\n    visibility: visible;\n    opacity: 1; }\n  .effeckt-off-screen-nav-bottom-rotate.effeckt-show {\n    -webkit-transform: none;\n        -ms-transform: none;\n            transform: none; }\n    .effeckt-off-screen-nav-bottom-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n      -webkit-transform: translateY(-260px) rotateX(15deg);\n              transform: translateY(-260px) rotateX(15deg);\n      overflow: hidden; }\n      .effeckt-off-screen-nav-bottom-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active:after {\n        background: none; }\n    .effeckt-off-screen-nav-bottom-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-off-screen-nav-top-rotate {\n  bottom: auto;\n  width: 100%;\n  -webkit-transform-origin: 50% 0%;\n      -ms-transform-origin: 50% 0%;\n          transform-origin: 50% 0%;\n  transition: 500ms;\n  -webkit-transform: translateY(-100%) scale(1.01) rotateX(30deg);\n          transform: translateY(-100%) scale(1.01) rotateX(30deg); }\n  .effeckt-off-screen-nav-top-rotate ~ [data-effeckt-page].effeckt-page-active {\n    -webkit-transform-origin: 100% 0%;\n        -ms-transform-origin: 100% 0%;\n            transform-origin: 100% 0%;\n    transition: 500ms; }\n  .effeckt-off-screen-nav-top-rotate ~ .effeckt-overlay {\n    z-index: 900;\n    visibility: visible;\n    opacity: 1; }\n  .effeckt-off-screen-nav-top-rotate.effeckt-show {\n    -webkit-transform: none;\n        -ms-transform: none;\n            transform: none; }\n    .effeckt-off-screen-nav-top-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n      -webkit-transform: translateY(260px) rotateX(-15deg);\n              transform: translateY(260px) rotateX(-15deg);\n      overflow: hidden; }\n      .effeckt-off-screen-nav-top-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active:after {\n        background: none; }\n    .effeckt-off-screen-nav-top-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-off-screen-nav-minimize-reaveal {\n  width: 100%;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-minimize-reaveal ~ [data-effeckt-page].effeckt-page-active {\n    transition: 500ms;\n    box-shadow: 0px 0px 50px #CACACA;\n    z-index: 1000; }\n  .effeckt-off-screen-nav-minimize-reaveal li, .effeckt-off-screen-nav-minimize-reaveal h4 {\n    transition: 500ms cubic-bezier(0.16, 0.86, 0.33, 0.97);\n    -webkit-transform: translateX(5%);\n        -ms-transform: translateX(5%);\n            transform: translateX(5%);\n    opacity: 0; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show h4 {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 500ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(1) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1125ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(2) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1250ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(3) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1375ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(4) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1500ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(5) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1625ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(6) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1750ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(7) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1875ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(8) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2000ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(9) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2125ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(10) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2250ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(11) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2375ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(12) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2500ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(13) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2625ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(14) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2750ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(15) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2875ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n    transition: 750ms cubic-bezier(0.16, 0.86, 0.33, 0.97);\n    -webkit-transform: translateX(50%) scale3d(0.5, 0.5, 1);\n            transform: translateX(50%) scale3d(0.5, 0.5, 1);\n    overflow: hidden; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%; }\n\n.effeckt-off-screen-nav-minimize-flip {\n  width: 100%;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-minimize-flip ~ [data-effeckt-page].effeckt-page-active {\n    transition: 500ms;\n    box-shadow: 0px 0px 50px #CACACA;\n    z-index: 1000; }\n  .effeckt-off-screen-nav-minimize-flip li, .effeckt-off-screen-nav-minimize-flip h4 {\n    transition: 500ms cubic-bezier(0.16, 0.86, 0.33, 0.97);\n    -webkit-transform: translateX(5%);\n        -ms-transform: translateX(5%);\n            transform: translateX(5%);\n    opacity: 0; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show h4 {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 500ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(1) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1125ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(2) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1250ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(3) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1375ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(4) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1500ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(5) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1625ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(6) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1750ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(7) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1875ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(8) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2000ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(9) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2125ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(10) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2250ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(11) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2375ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(12) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2500ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(13) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2625ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(14) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2750ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(15) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2875ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n    transition: 750ms cubic-bezier(0.16, 0.86, 0.33, 0.97);\n    -webkit-transform: translateX(50%) rotateY(-15deg) scale3d(0.5, 0.5, 1);\n            transform: translateX(50%) rotateY(-15deg) scale3d(0.5, 0.5, 1);\n    overflow: hidden; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%; }\n\n[data-effeckt-page] {\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  -webkit-overflow-scrolling: touch;\n  overflow-x: hidden;\n  visibility: hidden;\n  z-index: 0;\n  padding: 2rem 4rem 0;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  display: none; }\n  [data-effeckt-page].effeckt-page-active {\n    display: block;\n    visibility: visible;\n    z-index: 10; }\n  [data-effeckt-page].effeckt-page-animating {\n    overflow: hidden;\n    z-index: 100;\n    position: absolute; }\n\n[data-effeckt-page].slide-from-left {\n  -webkit-animation: slideFromLeft 1000ms forwards ease-in-out;\n          animation: slideFromLeft 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-to-left {\n  -webkit-animation: slideToLeft 1000ms forwards ease-in-out;\n          animation: slideToLeft 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-from-right {\n  -webkit-animation: slideFromRight 1000ms forwards ease-in-out;\n          animation: slideFromRight 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-to-right {\n  -webkit-animation: slideToRight 1000ms forwards ease-in-out;\n          animation: slideToRight 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-from-top {\n  -webkit-animation: slideFromTop 1000ms forwards ease-in-out;\n          animation: slideFromTop 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-to-top {\n  -webkit-animation: slideToTop 1000ms forwards ease-in-out;\n          animation: slideToTop 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-from-bottom {\n  -webkit-animation: slideFromBottom 1000ms forwards ease-in-out;\n          animation: slideFromBottom 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-to-bottom {\n  -webkit-animation: slideToBottom 1000ms forwards ease-in-out;\n          animation: slideToBottom 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-up-from-behind {\n  -webkit-animation: scaleUpFromBehind 1000ms forwards ease-in-out;\n          animation: scaleUpFromBehind 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-up-to-front {\n  -webkit-animation: scaleUpToFront 1000ms forwards ease-in-out;\n          animation: scaleUpToFront 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-to-behind {\n  -webkit-animation: scaleDownToBehind 1000ms forwards ease-in-out;\n          animation: scaleDownToBehind 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-from-front {\n  -webkit-animation: scaleDownFromFront 1000ms forwards ease-in-out;\n          animation: scaleDownFromFront 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-to-left {\n  -webkit-animation: scaleDownSlideToLeft 2000ms forwards ease-in-out;\n          animation: scaleDownSlideToLeft 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-from-right {\n  -webkit-animation: scaleDownSlideFromRight 2000ms forwards ease-in-out;\n          animation: scaleDownSlideFromRight 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-from-left {\n  -webkit-animation: scaleDownSlideFromLeft 2000ms forwards ease-in-out;\n          animation: scaleDownSlideFromLeft 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-to-right {\n  -webkit-animation: scaleDownSlideToRight 2000ms forwards ease-in-out;\n          animation: scaleDownSlideToRight 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-from-top {\n  -webkit-animation: scaleDownSlideFromTop 2000ms forwards ease-in-out;\n          animation: scaleDownSlideFromTop 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-to-bottom {\n  -webkit-animation: scaleDownSlideToBottom 2000ms forwards ease-in-out;\n          animation: scaleDownSlideToBottom 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-from-bottom {\n  -webkit-animation: scaleDownSlideFromBottom 2000ms forwards ease-in-out;\n          animation: scaleDownSlideFromBottom 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-to-top {\n  -webkit-animation: scaleDownSlideToTop 2000ms forwards ease-in-out;\n          animation: scaleDownSlideToTop 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].rotate-to-behind {\n  -webkit-transform-origin: -50% 50%;\n      -ms-transform-origin: -50% 50%;\n          transform-origin: -50% 50%;\n  -webkit-animation: rotateToBehind 500ms both ease-in;\n          animation: rotateToBehind 500ms both ease-in; }\n\n[data-effeckt-page].rotate-to-front {\n  -webkit-transform-origin: 150% 50%;\n      -ms-transform-origin: 150% 50%;\n          transform-origin: 150% 50%;\n  -webkit-animation: rotateToFront 500ms both ease-out;\n          animation: rotateToFront 500ms both ease-out; }\n\n[data-effeckt-page].flip-to-right-front {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToRightBack 1000ms forwards ease;\n          animation: flipToRightBack 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-right-back {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToRight 1000ms forwards ease;\n          animation: flipToRight 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-left-front {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToLeftBack 1000ms forwards ease;\n          animation: flipToLeftBack 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-left-back {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToLeft 1000ms forwards ease;\n          animation: flipToLeft 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-top-front {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToTopBack 1000ms forwards ease;\n          animation: flipToTopBack 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-top-back {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToTop 1000ms forwards ease;\n          animation: flipToTop 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-bottom-front {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToBottomBack 1000ms forwards ease;\n          animation: flipToBottomBack 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-bottom-back {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToBottom 1000ms forwards ease;\n          animation: flipToBottom 1000ms forwards ease; }\n\n@-webkit-keyframes slideFromTop {\n  from {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@keyframes slideFromTop {\n  from {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@-webkit-keyframes slideToTop {\n  to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@keyframes slideToTop {\n  to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@-webkit-keyframes slideFromRight {\n  from {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@keyframes slideFromRight {\n  from {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@-webkit-keyframes slideToRight {\n  to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@keyframes slideToRight {\n  to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@-webkit-keyframes slideFromBottom {\n  from {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@keyframes slideFromBottom {\n  from {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@-webkit-keyframes slideToBottom {\n  to {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@keyframes slideToBottom {\n  to {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@-webkit-keyframes slideFromLeft {\n  from {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@keyframes slideFromLeft {\n  from {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@-webkit-keyframes slideToLeft {\n  to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@keyframes slideToLeft {\n  to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@-webkit-keyframes scaleUpFromBehind {\n  from {\n    opacity: 0;\n    -webkit-transform: scale(0.5);\n            transform: scale(0.5); } }\n\n@keyframes scaleUpFromBehind {\n  from {\n    opacity: 0;\n    -webkit-transform: scale(0.5);\n            transform: scale(0.5); } }\n\n@-webkit-keyframes scaleUpToFront {\n  to {\n    opacity: 0;\n    -webkit-transform: scale(1.3);\n            transform: scale(1.3); } }\n\n@keyframes scaleUpToFront {\n  to {\n    opacity: 0;\n    -webkit-transform: scale(1.3);\n            transform: scale(1.3); } }\n\n@-webkit-keyframes scaleDownToBehind {\n  to {\n    opacity: 0;\n    -webkit-transform: scale(0.5);\n            transform: scale(0.5); } }\n\n@keyframes scaleDownToBehind {\n  to {\n    opacity: 0;\n    -webkit-transform: scale(0.5);\n            transform: scale(0.5); } }\n\n@-webkit-keyframes scaleDownFromFront {\n  from {\n    opacity: 0;\n    -webkit-transform: scale(1.3);\n            transform: scale(1.3); }\n\n  to {\n    opacity: 1; } }\n\n@keyframes scaleDownFromFront {\n  from {\n    opacity: 0;\n    -webkit-transform: scale(1.3);\n            transform: scale(1.3); }\n\n  to {\n    opacity: 1; } }\n\n@-webkit-keyframes scaleDownSlideToLeft {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); } }\n\n@keyframes scaleDownSlideToLeft {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); } }\n\n@-webkit-keyframes scaleDownSlideFromRight {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateX(0);\n            transform: translateZ(0) translateX(0); } }\n\n@keyframes scaleDownSlideFromRight {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateX(0);\n            transform: translateZ(0) translateX(0); } }\n\n@-webkit-keyframes scaleDownSlideFromLeft {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateX(0%);\n            transform: translateZ(0) translateX(0%); } }\n\n@keyframes scaleDownSlideFromLeft {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateX(0%);\n            transform: translateZ(0) translateX(0%); } }\n\n@-webkit-keyframes scaleDownSlideToRight {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); } }\n\n@keyframes scaleDownSlideToRight {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); } }\n\n@-webkit-keyframes scaleDownSlideFromTop {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateY(0%);\n            transform: translateZ(0) translateY(0%); } }\n\n@keyframes scaleDownSlideFromTop {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateY(0%);\n            transform: translateZ(0) translateY(0%); } }\n\n@-webkit-keyframes scaleDownSlideToBottom {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); } }\n\n@keyframes scaleDownSlideToBottom {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); } }\n\n@-webkit-keyframes scaleDownSlideFromBottom {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateY(0%);\n            transform: translateZ(0) translateY(0%); } }\n\n@keyframes scaleDownSlideFromBottom {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateY(0%);\n            transform: translateZ(0) translateY(0%); } }\n\n@-webkit-keyframes scaleDownSlideToTop {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); } }\n\n@keyframes scaleDownSlideToTop {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); } }\n\n@-webkit-keyframes rotateToBehind {\n  to {\n    opacity: 0;\n    -webkit-transform: translateZ(-500px) rotateY(90deg);\n            transform: translateZ(-500px) rotateY(90deg); } }\n\n@keyframes rotateToBehind {\n  to {\n    opacity: 0;\n    -webkit-transform: translateZ(-500px) rotateY(90deg);\n            transform: translateZ(-500px) rotateY(90deg); } }\n\n@-webkit-keyframes rotateToFront {\n  from {\n    opacity: 0;\n    -webkit-transform: translateZ(-500px) rotateY(-90deg);\n            transform: translateZ(-500px) rotateY(-90deg); } }\n\n@keyframes rotateToFront {\n  from {\n    opacity: 0;\n    -webkit-transform: translateZ(-500px) rotateY(-90deg);\n            transform: translateZ(-500px) rotateY(-90deg); } }\n\n@-webkit-keyframes flipToRight {\n  to {\n    -webkit-transform: rotateY(180deg);\n            transform: rotateY(180deg); } }\n\n@keyframes flipToRight {\n  to {\n    -webkit-transform: rotateY(180deg);\n            transform: rotateY(180deg); } }\n\n@-webkit-keyframes flipToRightBack {\n  from {\n    -webkit-transform: rotateY(-180deg);\n            transform: rotateY(-180deg); } }\n\n@keyframes flipToRightBack {\n  from {\n    -webkit-transform: rotateY(-180deg);\n            transform: rotateY(-180deg); } }\n\n@-webkit-keyframes flipToLeft {\n  to {\n    -webkit-transform: rotateY(-180deg);\n            transform: rotateY(-180deg); } }\n\n@keyframes flipToLeft {\n  to {\n    -webkit-transform: rotateY(-180deg);\n            transform: rotateY(-180deg); } }\n\n@-webkit-keyframes flipToLeftBack {\n  from {\n    -webkit-transform: rotateY(180deg);\n            transform: rotateY(180deg); } }\n\n@keyframes flipToLeftBack {\n  from {\n    -webkit-transform: rotateY(180deg);\n            transform: rotateY(180deg); } }\n\n@-webkit-keyframes flipToTop {\n  to {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg); } }\n\n@keyframes flipToTop {\n  to {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg); } }\n\n@-webkit-keyframes flipToTopBack {\n  from {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg); } }\n\n@keyframes flipToTopBack {\n  from {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg); } }\n\n@-webkit-keyframes flipToBottom {\n  to {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg); } }\n\n@keyframes flipToBottom {\n  to {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg); } }\n\n@-webkit-keyframes flipToBottomBack {\n  from {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg); } }\n\n@keyframes flipToBottomBack {\n  from {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg); } }\n\n.page-on-top, [data-effeckt-page].scale-up-to-front.effeckt-page-animating, [data-effeckt-page].scale-down-from-front.effeckt-page-animating {\n  z-index: 999; }\n\n.animation-delay-100 {\n  -webkit-animation-delay: 0.1s;\n          animation-delay: 0.1s; }\n\n.animation-delay-200 {\n  -webkit-animation-delay: 0.2s;\n          animation-delay: 0.2s; }\n\n.animation-delay-300, [data-effeckt-page].scale-up-from-behind {\n  -webkit-animation-delay: 0.3s;\n          animation-delay: 0.3s; }\n\n.animation-delay-500 {\n  -webkit-animation-delay: 0.5s;\n          animation-delay: 0.5s; }\n\n.animation-delay-700 {\n  -webkit-animation-delay: 0.7s;\n          animation-delay: 0.7s; }\n\n.animation-delay-1000 {\n  -webkit-animation-delay: 1000s;\n          animation-delay: 1000s; }\n\n.effeckt-tooltip[data-effeckt-tooltip-text] {\n  position: relative;\n  display: inline-block; }\n  .effeckt-tooltip[data-effeckt-tooltip-text]::before, .effeckt-tooltip[data-effeckt-tooltip-text]::after {\n    opacity: 0;\n    transition: 0.2s; }\n  .effeckt-tooltip[data-effeckt-tooltip-text]:hover::before, .effeckt-tooltip[data-effeckt-tooltip-text]:hover::after {\n    visibility: visible;\n    opacity: 1;\n    transition: 0.2s 0.3s; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"]::after {\n  content: attr(data-effeckt-tooltip-text);\n  position: absolute;\n  border-radius: 10px;\n  background: black;\n  color: white;\n  padding: 0.45rem 0.8rem;\n  font-size: 90%;\n  white-space: nowrap;\n  visibility: hidden;\n  z-index: 2; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"]::before {\n  content: \"\";\n  width: 0;\n  height: 0;\n  position: absolute; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]::after {\n  -webkit-transform: translateX(-50%);\n      -ms-transform: translateX(-50%);\n          transform: translateX(-50%);\n  left: 50%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]:before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]:before {\n  left: 50%;\n  margin-left: -5px; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]::before {\n  bottom: 125%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]::before {\n  border-top: 5px solid black;\n  border-left: 5px solid transparent;\n  border-right: 5px solid transparent;\n  margin-bottom: -4px; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]:hover::before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]:hover::after {\n  bottom: 115%; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]::before {\n  top: 125%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]::before {\n  border-bottom: 5px solid black;\n  border-left: 5px solid transparent;\n  border-right: 5px solid transparent;\n  margin-top: -4px; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]:hover::before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]:hover::after {\n  top: 115%; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]:before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]:before {\n  top: 45%;\n  -webkit-transform: translateY(-45%);\n      -ms-transform: translateY(-45%);\n          transform: translateY(-45%);\n  margin-top: 2px; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]::before {\n  left: 115%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]::before {\n  border-right: 5px solid black;\n  border-top: 5px solid transparent;\n  border-bottom: 5px solid transparent;\n  margin-left: -4px; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]:hover::before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]:hover::after {\n  left: 105%; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]::before {\n  right: 115%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]::before {\n  border-left: 5px solid black;\n  border-top: 5px solid transparent;\n  border-bottom: 5px solid transparent;\n  margin-right: -4px; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]:hover::before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]:hover::after {\n  right: 105%; }\n\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n  .effeckt-ckbox-ios7[type=checkbox], .effeckt-rdio-ios7[type=radio] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    box-shadow: inset 0px 0px 0px 1px #e6e6e6;\n    border-radius: 15px;\n    cursor: pointer;\n    display: inline-block;\n    height: 31px;\n    padding: 1px;\n    position: relative;\n    margin: 0px;\n    width: 52px;\n    outline: 0;\n    transition: all 0.3s ease-out;\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1);\n    background: #FFF; }\n  .effeckt-ckbox-ios7[type=checkbox]:checked, .effeckt-rdio-ios7:checked {\n    box-shadow: inset 0px 0px 0px 20px #666; }\n  .effeckt-ckbox-ios7[type=checkbox]:after, .effeckt-rdio-ios7[type=radio]:after {\n    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);\n    border-radius: 15px;\n    content: '';\n    cursor: pointer;\n    height: 29px;\n    position: absolute;\n    width: 29px;\n    transition: all 0.1s ease-in 0.1s;\n    background: #FFF; }\n  .effeckt-ckbox-ios7[type=\"checkbox\"]:checked:after, .effeckt-rdio-ios7[type=\"radio\"]:checked:after {\n    left: 22px; }\n  .effeckt-ckbox-android[type=checkbox], .effeckt-rdio-android[type=radio] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    box-shadow: inset 0px 0px 0px 1px #e6e6e6;\n    border-radius: 1px;\n    cursor: pointer;\n    display: inline-block;\n    height: 21px;\n    padding: 1px;\n    position: relative;\n    margin: 0px;\n    width: 72px;\n    outline: 0;\n    transition: all 0.3s ease-out;\n    -webkit-transform: scale(1);\n    -ms-transform: scale(1);\n    transform: scale(1);\n    background: #333; }\n  .effeckt-ckbox-android[type=checkbox]:checked, .effeckt-rdio-android:checked {\n    box-shadow: inset 0px 0px 0px 20px #666666; }\n  .effeckt-ckbox-android[type=checkbox]:after, .effeckt-rdio-android[type=radio]:after {\n    box-shadow: 0px 0px 0px 0px;\n    border-radius: 1px;\n    content: '';\n    cursor: pointer;\n    height: 19px;\n    position: absolute;\n    width: 29px;\n    transition: all 0.1s ease-in 0.1s;\n    background: #4d4d4d; }\n  .effeckt-ckbox-android[type=\"checkbox\"]:checked:after, .effeckt-rdio-android[type=\"radio\"]:checked:after {\n    left: 43px; } }\n\n.effeckt-tabs-wrap {\n  position: relative; }\n  .effeckt-tabs-wrap ul.effeckt-tabs {\n    overflow: hidden; }\n  .effeckt-tabs-wrap .effeckt-tabs-container {\n    position: relative;\n    transition: all 500ms ease-in-out; }\n    .effeckt-tabs-wrap .effeckt-tabs-container .effeckt-tab-content {\n      position: absolute;\n      transition: all 250ms ease-in-out; }\n  .effeckt-tabs-wrap[data-effeckt-type='scale'] .effeckt-tab-content.effeckt-hide {\n    -webkit-transform: scale(0.9);\n        -ms-transform: scale(0.9);\n            transform: scale(0.9);\n    opacity: 0; }\n  .effeckt-tabs-wrap[data-effeckt-type='scale'] .effeckt-tab-content.effeckt-show {\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1);\n    transition-delay: 0.3s;\n    opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='scale-up'] .effeckt-tab-content.effeckt-hide {\n    -webkit-transform: scale(1.1);\n        -ms-transform: scale(1.1);\n            transform: scale(1.1);\n    opacity: 0; }\n  .effeckt-tabs-wrap[data-effeckt-type='scale-up'] .effeckt-tab-content.effeckt-show {\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1);\n    transition-delay: 0.3s;\n    opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='slide-left'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-left'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: translateX(-100%);\n          -ms-transform: translateX(-100%);\n              transform: translateX(-100%);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-left'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: translateX(0%);\n          -ms-transform: translateX(0%);\n              transform: translateX(0%);\n      transition-delay: 0.3s;\n      opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='slide-right'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-right'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: translateX(100%);\n          -ms-transform: translateX(100%);\n              transform: translateX(100%);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-right'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: translateX(0%);\n          -ms-transform: translateX(0%);\n              transform: translateX(0%);\n      transition-delay: 0.3s;\n      opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='slide-up'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-up'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: translateY(-100%);\n          -ms-transform: translateY(-100%);\n              transform: translateY(-100%);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-up'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: translateY(0%);\n          -ms-transform: translateY(0%);\n              transform: translateY(0%);\n      transition-delay: 0.3s;\n      opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='slide-down'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-down'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: translateY(100%);\n          -ms-transform: translateY(100%);\n              transform: translateY(100%);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-down'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: translateX(0%);\n          -ms-transform: translateX(0%);\n              transform: translateX(0%);\n      transition-delay: 0.3s;\n      opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='flip'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='flip'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: rotateY(-90deg) scale(1.1);\n              transform: rotateY(-90deg) scale(1.1);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='flip'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: rotateY(0deg) scale(1);\n              transform: rotateY(0deg) scale(1);\n      transition-delay: 0.3s;\n      opacity: 1; }\n\n.effeckt-positional-modal-wrap {\n  position: absolute;\n  z-index: 10;\n  display: none; }\n  .effeckt-positional-modal-wrap.effeckt-front {\n    z-index: 20; }\n\n.effeckt-positional-modal-wrap[data-effeckt-position=\"above\"] {\n  margin-top: -15px; }\n  .effeckt-positional-modal-wrap[data-effeckt-position=\"above\"] .effeckt-modal:before {\n    content: \"\";\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    width: 0;\n    height: 0;\n    margin-left: -10px;\n    border-top: 10px solid #ccc;\n    border-right: 10px solid transparent;\n    border-left: 10px solid transparent; }\n.effeckt-positional-modal-wrap[data-effeckt-position=\"below\"] {\n  margin-top: 15px; }\n  .effeckt-positional-modal-wrap[data-effeckt-position=\"below\"] .effeckt-modal:before {\n    content: \"\";\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    width: 0;\n    height: 0;\n    margin-left: -10px;\n    border-bottom: 10px solid #ccc;\n    border-right: 10px solid transparent;\n    border-left: 10px solid transparent; }\n.effeckt-positional-modal-wrap[data-effeckt-position=\"right\"] {\n  margin-left: 15px; }\n  .effeckt-positional-modal-wrap[data-effeckt-position=\"right\"] .effeckt-modal:before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    right: 100%;\n    width: 0;\n    height: 0;\n    margin-top: -10px;\n    border-top: 10px solid transparent;\n    border-bottom: 10px solid transparent;\n    border-right: 10px solid #ccc; }\n.effeckt-positional-modal-wrap[data-effeckt-position=\"left\"] {\n  margin-left: -15px; }\n  .effeckt-positional-modal-wrap[data-effeckt-position=\"left\"] .effeckt-modal:before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 100%;\n    width: 0;\n    height: 0;\n    margin-top: -10px;\n    border-top: 10px solid transparent;\n    border-bottom: 10px solid transparent;\n    border-left: 10px solid #ccc; }\n"
  },
  {
    "path": "css/modules/buttons.css",
    "content": ".effeckt-button {\n  position: relative; }\n\n.effeckt-button .spinner {\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  top: 50%;\n  margin-top: -16px;\n  margin-left: -16px;\n  opacity: 0;\n  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf///6+vr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs/Ly8vz8/AAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==);\n  background-size: 32px auto; }\n\n.effeckt-button, .effeckt-button .spinner, .effeckt-button .label {\n  transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all; }\n\n.effeckt-button[data-effeckt-type=\"expand-right\"] .spinner {\n  right: 16px; }\n\n.effeckt-button[data-effeckt-type=\"expand-right\"][data-loading] {\n  padding-right: 64px; }\n\n.effeckt-button[data-effeckt-type=\"expand-right\"][data-loading] .spinner {\n  opacity: 1; }\n\n.effeckt-button[data-effeckt-type=\"expand-left\"] .spinner {\n  left: 16px;\n  margin-left: 0; }\n\n.effeckt-button[data-effeckt-type=\"expand-left\"][data-loading] {\n  padding-left: 64px; }\n\n.effeckt-button[data-effeckt-type=\"expand-left\"][data-loading] .spinner {\n  opacity: 1; }\n\n.effeckt-button[data-effeckt-type=\"expand-up\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"expand-up\"] .spinner {\n  top: 32px;\n  left: 50%; }\n\n.effeckt-button[data-effeckt-type=\"expand-up\"][data-loading] {\n  padding-top: 64px; }\n\n.effeckt-button[data-effeckt-type=\"expand-up\"][data-loading] .spinner {\n  opacity: 1;\n  top: 16px;\n  margin-top: 0; }\n\n.effeckt-button[data-effeckt-type=\"expand-down\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"expand-down\"] .spinner {\n  left: 50%;\n  top: 100%;\n  margin-top: -48px; }\n\n.effeckt-button[data-effeckt-type=\"expand-down\"][data-loading] {\n  padding-bottom: 64px; }\n\n.effeckt-button[data-effeckt-type=\"expand-down\"][data-loading] .spinner {\n  opacity: 1; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"] .label {\n  position: relative; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"] .spinner {\n  left: 100%; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"][data-loading] .label {\n  opacity: 0;\n  left: -100%; }\n\n.effeckt-button[data-effeckt-type=\"slide-left\"][data-loading] .spinner {\n  opacity: 1;\n  left: 50%; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"] .label {\n  position: relative; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"] .spinner {\n  left: 0%; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"][data-loading] .label {\n  opacity: 0;\n  left: 100%; }\n\n.effeckt-button[data-effeckt-type=\"slide-right\"][data-loading] .spinner {\n  opacity: 1;\n  left: 50%; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"] .label {\n  position: relative; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"] .spinner {\n  left: 50%;\n  top: 100%; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"][data-loading] .label {\n  opacity: 0;\n  top: -1em; }\n\n.effeckt-button[data-effeckt-type=\"slide-up\"][data-loading] .spinner {\n  opacity: 1;\n  top: 50%; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"] .label {\n  position: relative; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"] .spinner {\n  left: 50%;\n  top: 0%; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"][data-loading] .label {\n  opacity: 0;\n  top: 1em; }\n\n.effeckt-button[data-effeckt-type=\"slide-down\"][data-loading] .spinner {\n  opacity: 1;\n  top: 50%; }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"], .effeckt-button[data-effeckt-type=\"zoom-in\"] .spinner, .effeckt-button[data-effeckt-type=\"zoom-in\"] .label, .effeckt-button[data-effeckt-type=\"zoom-out\"], .effeckt-button[data-effeckt-type=\"zoom-out\"] .spinner, .effeckt-button[data-effeckt-type=\"zoom-out\"] .label {\n  transition: 500ms ease all; }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"] .spinner {\n  left: 50%;\n  -webkit-transform: scale(2.5);\n      -ms-transform: scale(2.5);\n          transform: scale(2.5); }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"] .label {\n  position: relative;\n  display: inline-block; }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"][data-loading] .label {\n  opacity: 0;\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5); }\n\n.effeckt-button[data-effeckt-type=\"zoom-out\"][data-loading] .spinner {\n  opacity: 1;\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none; }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"] {\n  overflow: hidden; }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"] .spinner {\n  left: 50%;\n  -webkit-transform: scale(0.2);\n      -ms-transform: scale(0.2);\n          transform: scale(0.2); }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"] .label {\n  position: relative;\n  display: inline-block; }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"][data-loading] .label {\n  opacity: 0;\n  -webkit-transform: scale(2.2);\n      -ms-transform: scale(2.2);\n          transform: scale(2.2); }\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"][data-loading] .spinner {\n  opacity: 1;\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none; }\n\n/*==========================\nFILL\n==========================*/\n.effeckt-button[data-effeckt-type=\"fill-from-left\"] {\n  overflow: hidden;\n  position: relative; }\n  .effeckt-button[data-effeckt-type=\"fill-from-left\"]:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: #000;\n    -webkit-transform: translate(-100%, 0);\n        -ms-transform: translate(-100%, 0);\n            transform: translate(-100%, 0);\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n  .effeckt-button[data-effeckt-type=\"fill-from-left\"][data-loading]:after {\n    -webkit-transform: translate(0, 0);\n        -ms-transform: translate(0, 0);\n            transform: translate(0, 0); }\n  .effeckt-button[data-effeckt-type=\"fill-from-left\"] .effeckt-button-label {\n    position: relative;\n    z-index: 1; }\n\n.effeckt-button[data-effeckt-type=\"fill-from-right\"] {\n  overflow: hidden;\n  position: relative; }\n  .effeckt-button[data-effeckt-type=\"fill-from-right\"]:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: #000;\n    -webkit-transform: translate(100%, 0);\n        -ms-transform: translate(100%, 0);\n            transform: translate(100%, 0);\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n  .effeckt-button[data-effeckt-type=\"fill-from-right\"][data-loading]:after {\n    -webkit-transform: translate(0, 0);\n        -ms-transform: translate(0, 0);\n            transform: translate(0, 0); }\n  .effeckt-button[data-effeckt-type=\"fill-from-right\"] .effeckt-button-label {\n    position: relative;\n    z-index: 1; }\n\n.effeckt-button[data-effeckt-type=\"fill-from-top\"] {\n  overflow: hidden;\n  position: relative; }\n  .effeckt-button[data-effeckt-type=\"fill-from-top\"]:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: #000;\n    -webkit-transform: translate(0, -100%);\n        -ms-transform: translate(0, -100%);\n            transform: translate(0, -100%);\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n  .effeckt-button[data-effeckt-type=\"fill-from-top\"][data-loading]:after {\n    -webkit-transform: translate(0, 0);\n        -ms-transform: translate(0, 0);\n            transform: translate(0, 0); }\n  .effeckt-button[data-effeckt-type=\"fill-from-top\"] .effeckt-button-label {\n    position: relative;\n    z-index: 1; }\n\n.effeckt-button[data-effeckt-type=\"fill-from-bottom\"] {\n  overflow: hidden;\n  position: relative; }\n  .effeckt-button[data-effeckt-type=\"fill-from-bottom\"]:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: #000;\n    -webkit-transform: translate(0, 100%);\n        -ms-transform: translate(0, 100%);\n            transform: translate(0, 100%);\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n  .effeckt-button[data-effeckt-type=\"fill-from-bottom\"][data-loading]:after {\n    -webkit-transform: translate(0, 0);\n        -ms-transform: translate(0, 0);\n            transform: translate(0, 0); }\n  .effeckt-button[data-effeckt-type=\"fill-from-bottom\"] .effeckt-button-label {\n    position: relative;\n    z-index: 1; }\n\n/*==========================\nICON SLIDE\n\nExample markup:\n<button class=\"effeckt-button\" data-effeckt-type=\"icon-slide from-top\">\n  <span class=\"effeckt-button-label demo-button-icon\">Icon from top</span>\n</button>\n==========================*/\n.demo-button-icon:before {\n  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEljb01vb24uaW8gLS0+IDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+IDxzdmcgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGZpbGw9IiNmZmZmZmYiPjxnPjxwYXRoIGQ9Ik0gMTYsMyBDIDEyLjUyOCwzIDkuMjYzLDQuMzUyIDYuODA4LDYuODA4IEMgNC4zNTIsOS4yNjMgMywxMi41MjggMywxNiBDIDMsMTkuNDcyIDQuMzUyLDIyLjczNyA2LjgwOCwyNS4xOTIgQyA5LjI2MywyNy42NDggMTIuNTI4LDI5IDE2LDI5IEMgMTkuNDcyLDI5IDIyLjczNywyNy42NDggMjUuMTkyLDI1LjE5MiBDIDI3LjY0OCwyMi43MzcgMjksMTkuNDcyIDI5LDE2IEMgMjksMTIuNTI4IDI3LjY0OCw5LjI2MyAyNS4xOTIsNi44MDggQyAyMi43MzcsNC4zNTIgMTkuNDcyLDMgMTYsMyBaIE0gMTYsMCBMIDE2LDAgQyAyNC44MzcsMCAzMiw3LjE2MyAzMiwxNiBDIDMyLDI0LjgzNyAyNC44MzcsMzIgMTYsMzIgQyA3LjE2MywzMiAwLDI0LjgzNyAwLDE2IEMgMCw3LjE2MyA3LjE2MywwIDE2LDAgWk0gMTQsMjJMIDE4LDIyTCAxOCwyNkwgMTQsMjZ6TSAxNCw2TCAxOCw2TCAxOCwxOEwgMTQsMTh6Ij48L3BhdGg+PC9nPjwvc3ZnPg==) no-repeat center center;\n  background-size: 30px; }\n\n.effeckt-button[data-effeckt-type~=\"icon-slide\"] {\n  overflow: hidden;\n  padding: 0; }\n  .effeckt-button[data-effeckt-type~=\"icon-slide\"] .effeckt-button-label {\n    padding: 0.8rem 1rem;\n    display: block;\n    position: relative;\n    transition: -webkit-transform 500ms;\n    transition: transform 500ms; }\n    .effeckt-button[data-effeckt-type~=\"icon-slide\"] .effeckt-button-label:before {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-effeckt-type~=\"from-top\"] .effeckt-button-label:before {\n  top: -100%;\n  left: 0;\n  right: 0; }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-effeckt-type~=\"from-bottom\"] .effeckt-button-label:before {\n  bottom: -100%;\n  left: 0;\n  right: 0; }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-effeckt-type~=\"from-left\"] .effeckt-button-label:before {\n  left: -100%;\n  top: 0;\n  bottom: 0; }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-effeckt-type~=\"from-right\"] .effeckt-button-label:before {\n  right: -100%;\n  top: 0;\n  bottom: 0; }\n\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-loading][data-effeckt-type~=\"from-top\"] .effeckt-button-label {\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%); }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-loading][data-effeckt-type~=\"from-bottom\"] .effeckt-button-label {\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%); }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-loading][data-effeckt-type~=\"from-left\"] .effeckt-button-label {\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%); }\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-loading][data-effeckt-type~=\"from-right\"] .effeckt-button-label {\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%); }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"], .effeckt-button[data-effeckt-type=\"3d-rotate-error\"] {\n  transition: all 500ms;\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"]:before, .effeckt-button[data-effeckt-type=\"3d-rotate-success\"]:after {\n  white-space: nowrap;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  line-height: 2em; }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"]:before {\n  top: 100%;\n  content: attr(data-effeckt-message);\n  -webkit-transform-origin: 0% 0%;\n      -ms-transform-origin: 0% 0%;\n          transform-origin: 0% 0%;\n  -webkit-transform: rotateX(-90deg);\n          transform: rotateX(-90deg);\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"][data-loading] {\n  -webkit-transform-origin: 50% 0%;\n      -ms-transform-origin: 50% 0%;\n          transform-origin: 50% 0%;\n  -webkit-transform: rotateX(90deg) translateY(-100%);\n          transform: rotateX(90deg) translateY(-100%); }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"]:after {\n  top: -100%;\n  content: attr(data-effeckt-message);\n  -webkit-transform-origin: 0% 100%;\n      -ms-transform-origin: 0% 100%;\n          transform-origin: 0% 100%;\n  -webkit-transform: rotateX(90deg);\n          transform: rotateX(90deg);\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"][data-loading] {\n  -webkit-transform-origin: 50% 100%;\n      -ms-transform-origin: 50% 100%;\n          transform-origin: 50% 100%;\n  -webkit-transform: rotateX(-90deg) translateY(100%);\n          transform: rotateX(-90deg) translateY(100%); }\n"
  },
  {
    "path": "css/modules/captions.css",
    "content": "/*\n\nCaptions Markup Pattern & Explanation\n\ndata-effeckt-type = \n\"<quarter-appear | quarter-slide-up | quarter-slide-side | quarter-fall-in |\nquarter-two-step | quarter-zoom | cover-fade | cover-push-right | revolving-door-left |\nrevolving-door-right | revolving-door-top | revolving-door-bottom | cover-slide-top |\noffset | guillotine-reverse | half-slide | sqkwoosh | tunnel>\"\n\n<figure class=\"effeckt-caption\" data-effeckt-type=\"\">\n  <img src=\"\" alt=\"\">\n  <figcaption>\n    <div class=\"effeckt-figcaption-wrap\"></div>\n  </figcaption>\n</figure>\n\n*/\n.effeckt-caption {\n  position: relative; }\n  .effeckt-caption img {\n    transition: 500ms; }\n  .effeckt-caption figcaption {\n    position: absolute;\n    transition: 500ms;\n    width: 100%; }\n  .effeckt-caption[data-effeckt-type=\"quarter-appear\"] figcaption {\n    bottom: 0;\n    left: 0;\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"quarter-appear\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-appear\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-appear\"].active figcaption {\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-slide-up\"] figcaption {\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    -webkit-transform: translateY(100%);\n        -ms-transform: translateY(100%);\n            transform: translateY(100%); }\n  .effeckt-caption[data-effeckt-type=\"quarter-slide-up\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-slide-up\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-slide-up\"].active figcaption {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n        -ms-transform: translateY(0);\n            transform: translateY(0); }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"] figcaption {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition: none;\n    z-index: 0; }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"] img {\n    position: relative;\n    z-index: 1;\n    transition-delay: 0.25s; }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"] .effeckt-figcaption-wrap {\n    position: absolute;\n    bottom: 1rem;\n    opacity: 0;\n    transition: opacity 0.25s linear 0s; }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"]:hover .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type=\"sqkwoosh\"]:active .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type=\"sqkwoosh\"].active .effeckt-figcaption-wrap {\n    opacity: 1;\n    transition-delay: 0.25s; }\n  .effeckt-caption[data-effeckt-type=\"sqkwoosh\"]:hover img, .effeckt-caption[data-effeckt-type=\"sqkwoosh\"]:active img, .effeckt-caption[data-effeckt-type=\"sqkwoosh\"].active img {\n    -webkit-transform: scale(0.5) translateY(-80px);\n        -ms-transform: scale(0.5) translateY(-80px);\n            transform: scale(0.5) translateY(-80px);\n    transition-delay: 0; }\n  .effeckt-caption[data-effeckt-type=\"quarter-slide-side\"] figcaption {\n    left: 0;\n    bottom: 0;\n    opacity: 0;\n    -webkit-transform: translateX(100%);\n        -ms-transform: translateX(100%);\n            transform: translateX(100%); }\n  .effeckt-caption[data-effeckt-type=\"quarter-slide-side\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-slide-side\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-slide-side\"].active figcaption {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n  .effeckt-caption[data-effeckt-type=\"cover-fade\"] figcaption {\n    top: 0;\n    left: 0;\n    height: 100%;\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"cover-fade\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"cover-fade\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"cover-fade\"].active figcaption {\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-fall-in\"] figcaption {\n    top: 0;\n    left: 0;\n    -webkit-transform: translateX(100%) rotate(20deg);\n        -ms-transform: translateX(100%) rotate(20deg);\n            transform: translateX(100%) rotate(20deg);\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"quarter-fall-in\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-fall-in\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-fall-in\"].active figcaption {\n    -webkit-transform: translateX(0) rotate(0deg);\n        -ms-transform: translateX(0) rotate(0deg);\n            transform: translateX(0) rotate(0deg);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-two-step\"] figcaption {\n    top: 0;\n    left: 0;\n    -webkit-transform: translateX(-100%);\n        -ms-transform: translateX(-100%);\n            transform: translateX(-100%);\n    opacity: 0;\n    z-index: 2; }\n  .effeckt-caption[data-effeckt-type=\"quarter-two-step\"] .effeckt-figcaption-wrap {\n    transition: 500ms 250ms;\n    -webkit-transform: translateX(200%);\n        -ms-transform: translateX(200%);\n            transform: translateX(200%); }\n  .effeckt-caption[data-effeckt-type=\"quarter-two-step\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-two-step\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-two-step\"].active figcaption {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-two-step\"]:hover .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type=\"quarter-two-step\"]:active .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type=\"quarter-two-step\"].active .effeckt-figcaption-wrap {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n  .effeckt-caption[data-effeckt-type=\"cover-push-right\"] figcaption {\n    top: 0;\n    left: 0;\n    height: 100%;\n    -webkit-transform: translateX(-100%);\n        -ms-transform: translateX(-100%);\n            transform: translateX(-100%);\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"cover-push-right\"] img {\n    transition: 500ms;\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n  .effeckt-caption[data-effeckt-type=\"cover-push-right\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"cover-push-right\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"cover-push-right\"].active figcaption {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"cover-push-right\"]:hover img, .effeckt-caption[data-effeckt-type=\"cover-push-right\"]:active img, .effeckt-caption[data-effeckt-type=\"cover-push-right\"].active img {\n    -webkit-transform: translateX(100%);\n        -ms-transform: translateX(100%);\n            transform: translateX(100%); }\n  .effeckt-caption[data-effeckt-type=\"cover-slide-top\"] figcaption {\n    top: 0;\n    left: 0;\n    height: 100%;\n    -webkit-transform: translateY(-100%);\n        -ms-transform: translateY(-100%);\n            transform: translateY(-100%);\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"cover-slide-top\"] img {\n    transition: 500ms; }\n  .effeckt-caption[data-effeckt-type=\"cover-slide-top\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"cover-slide-top\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"cover-slide-top\"].active figcaption {\n    -webkit-transform: translateY(0);\n        -ms-transform: translateY(0);\n            transform: translateY(0);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-zoom\"] figcaption {\n    top: 0;\n    left: 0;\n    -webkit-transform: scale(2);\n        -ms-transform: scale(2);\n            transform: scale(2);\n    text-align: center;\n    opacity: 0; }\n  .effeckt-caption[data-effeckt-type=\"quarter-zoom\"] img {\n    transition: 500ms; }\n  .effeckt-caption[data-effeckt-type=\"quarter-zoom\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"quarter-zoom\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"quarter-zoom\"].active figcaption {\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1);\n    opacity: 1; }\n  .effeckt-caption[data-effeckt-type=\"quarter-zoom\"]:hover img, .effeckt-caption[data-effeckt-type=\"quarter-zoom\"]:active img, .effeckt-caption[data-effeckt-type=\"quarter-zoom\"].active img {\n    -webkit-transform: scale(1.1);\n        -ms-transform: scale(1.1);\n            transform: scale(1.1); }\n  .effeckt-caption[data-effeckt-type=\"revolving-door-left\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-left\"] figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: perspective(1300px) rotateY(180deg);\n              transform: perspective(1300px) rotateY(180deg);\n      -webkit-backface-visibility: hidden;\n              backface-visibility: hidden; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-left\"] img {\n      -webkit-transform: perspective(1300px);\n              transform: perspective(1300px);\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-left\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-left\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-left\"].active figcaption {\n      -webkit-transform: perspective(1300px) rotateY(0deg);\n              transform: perspective(1300px) rotateY(0deg); }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-left\"]:hover img, .effeckt-caption[data-effeckt-type=\"revolving-door-left\"]:active img, .effeckt-caption[data-effeckt-type=\"revolving-door-left\"].active img {\n      -webkit-transform: perspective(1300px) rotateY(-180deg);\n              transform: perspective(1300px) rotateY(-180deg); }\n  .effeckt-caption[data-effeckt-type=\"revolving-door-right\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-right\"] figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: perspective(1300px) rotateY(180deg);\n              transform: perspective(1300px) rotateY(180deg);\n      -webkit-backface-visibility: hidden;\n              backface-visibility: hidden; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-right\"] img {\n      -webkit-transform: perspective(1300px);\n              transform: perspective(1300px);\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-right\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-right\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-right\"].active figcaption {\n      -webkit-transform: perspective(1300px) rotateY(360deg);\n              transform: perspective(1300px) rotateY(360deg); }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-right\"]:hover img, .effeckt-caption[data-effeckt-type=\"revolving-door-right\"]:active img, .effeckt-caption[data-effeckt-type=\"revolving-door-right\"].active img {\n      -webkit-transform: perspective(1300px) rotateY(180deg);\n              transform: perspective(1300px) rotateY(180deg); }\n  .effeckt-caption[data-effeckt-type=\"revolving-door-top\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-top\"] figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: perspective(1300px) rotateX(180deg);\n              transform: perspective(1300px) rotateX(180deg);\n      -webkit-backface-visibility: hidden;\n              backface-visibility: hidden; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-top\"] img {\n      -webkit-transform: perspective(1300px);\n              transform: perspective(1300px);\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-top\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-top\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-top\"].active figcaption {\n      -webkit-transform: perspective(1300px) rotateX(360deg);\n              transform: perspective(1300px) rotateX(360deg); }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-top\"]:hover img, .effeckt-caption[data-effeckt-type=\"revolving-door-top\"]:active img, .effeckt-caption[data-effeckt-type=\"revolving-door-top\"].active img {\n      -webkit-transform: perspective(1300px) rotateX(180deg);\n              transform: perspective(1300px) rotateX(180deg); }\n  .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"] figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: perspective(1300px) rotateX(180deg);\n              transform: perspective(1300px) rotateX(180deg);\n      -webkit-backface-visibility: hidden;\n              backface-visibility: hidden; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"] img {\n      -webkit-transform: perspective(1300px);\n              transform: perspective(1300px);\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"].active figcaption {\n      -webkit-transform: perspective(1300px) rotateX(0deg);\n              transform: perspective(1300px) rotateX(0deg); }\n    .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"]:hover img, .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"]:active img, .effeckt-caption[data-effeckt-type=\"revolving-door-bottom\"].active img {\n      -webkit-transform: perspective(1300px) rotateX(-180deg);\n              transform: perspective(1300px) rotateX(-180deg); }\n  .effeckt-caption[data-effeckt-type=\"offset\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"offset\"] figcaption {\n      top: 0;\n      left: 0;\n      text-align: center;\n      opacity: 0;\n      height: 100%; }\n    .effeckt-caption[data-effeckt-type=\"offset\"] img {\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"offset\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"offset\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"offset\"].active figcaption {\n      -webkit-transform: translate(15px, 15px);\n          -ms-transform: translate(15px, 15px);\n              transform: translate(15px, 15px);\n      opacity: 1;\n      z-index: 100;\n      overflow: hidden; }\n  .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"] {\n    overflow: visible; }\n    .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"] figcaption {\n      top: 0;\n      left: 0;\n      text-align: center;\n      height: 100%; }\n    .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"] img {\n      display: block;\n      position: relative;\n      z-index: 10;\n      transition: 500ms; }\n    .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"]:hover img, .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"]:active img, .effeckt-caption[data-effeckt-type=\"guillotine-reverse\"].active img {\n      -webkit-transform: translateY(-100%);\n          -ms-transform: translateY(-100%);\n              transform: translateY(-100%); }\n  .effeckt-caption[data-effeckt-type=\"half-slide\"] figcaption {\n    top: 0;\n    left: 0;\n    text-align: center;\n    height: 100%;\n    -webkit-transform: translateY(100%);\n        -ms-transform: translateY(100%);\n            transform: translateY(100%); }\n  .effeckt-caption[data-effeckt-type=\"half-slide\"] img {\n    display: block;\n    position: relative;\n    transition: 500ms; }\n  .effeckt-caption[data-effeckt-type=\"half-slide\"]:hover img, .effeckt-caption[data-effeckt-type=\"half-slide\"]:active img, .effeckt-caption[data-effeckt-type=\"half-slide\"].active img {\n    -webkit-transform: translateY(-50%);\n        -ms-transform: translateY(-50%);\n            transform: translateY(-50%); }\n  .effeckt-caption[data-effeckt-type=\"half-slide\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"half-slide\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"half-slide\"].active figcaption {\n    -webkit-transform: translateY(50%);\n        -ms-transform: translateY(50%);\n            transform: translateY(50%); }\n  .effeckt-caption[data-effeckt-type=\"tunnel\"] figcaption {\n    top: 0;\n    left: 0;\n    text-align: center;\n    height: 100%;\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n        -ms-transform: scale(0.7);\n            transform: scale(0.7); }\n  .effeckt-caption[data-effeckt-type=\"tunnel\"] img {\n    display: block;\n    position: relative;\n    z-index: 10;\n    transition: 500ms; }\n  .effeckt-caption[data-effeckt-type=\"tunnel\"]:hover img, .effeckt-caption[data-effeckt-type=\"tunnel\"]:active img, .effeckt-caption[data-effeckt-type=\"tunnel\"].active img {\n    -webkit-transform: scale(0.4);\n        -ms-transform: scale(0.4);\n            transform: scale(0.4); }\n  .effeckt-caption[data-effeckt-type=\"tunnel\"]:hover figcaption, .effeckt-caption[data-effeckt-type=\"tunnel\"]:active figcaption, .effeckt-caption[data-effeckt-type=\"tunnel\"].active figcaption {\n    opacity: 1;\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1); }\n"
  },
  {
    "path": "css/modules/form-elements.css",
    "content": "@media screen and (-webkit-min-device-pixel-ratio: 0) {\n  .effeckt-ckbox-ios7[type=checkbox], .effeckt-rdio-ios7[type=radio] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    box-shadow: inset 0px 0px 0px 1px #e6e6e6;\n    border-radius: 15px;\n    cursor: pointer;\n    display: inline-block;\n    height: 31px;\n    padding: 1px;\n    position: relative;\n    margin: 0px;\n    width: 52px;\n    outline: 0;\n    transition: all 0.3s ease-out;\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1);\n    background: #FFF; }\n  .effeckt-ckbox-ios7[type=checkbox]:checked, .effeckt-rdio-ios7:checked {\n    box-shadow: inset 0px 0px 0px 20px #666; }\n  .effeckt-ckbox-ios7[type=checkbox]:after, .effeckt-rdio-ios7[type=radio]:after {\n    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);\n    border-radius: 15px;\n    content: '';\n    cursor: pointer;\n    height: 29px;\n    position: absolute;\n    width: 29px;\n    transition: all 0.1s ease-in 0.1s;\n    background: #FFF; }\n  .effeckt-ckbox-ios7[type=\"checkbox\"]:checked:after, .effeckt-rdio-ios7[type=\"radio\"]:checked:after {\n    left: 22px; }\n  .effeckt-ckbox-android[type=checkbox], .effeckt-rdio-android[type=radio] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    box-shadow: inset 0px 0px 0px 1px #e6e6e6;\n    border-radius: 1px;\n    cursor: pointer;\n    display: inline-block;\n    height: 21px;\n    padding: 1px;\n    position: relative;\n    margin: 0px;\n    width: 72px;\n    outline: 0;\n    transition: all 0.3s ease-out;\n    -webkit-transform: scale(1);\n    -ms-transform: scale(1);\n    transform: scale(1);\n    background: #333; }\n  .effeckt-ckbox-android[type=checkbox]:checked, .effeckt-rdio-android:checked {\n    box-shadow: inset 0px 0px 0px 20px #666666; }\n  .effeckt-ckbox-android[type=checkbox]:after, .effeckt-rdio-android[type=radio]:after {\n    box-shadow: 0px 0px 0px 0px;\n    border-radius: 1px;\n    content: '';\n    cursor: pointer;\n    height: 19px;\n    position: absolute;\n    width: 29px;\n    transition: all 0.1s ease-in 0.1s;\n    background: #4d4d4d; }\n  .effeckt-ckbox-android[type=\"checkbox\"]:checked:after, .effeckt-rdio-android[type=\"radio\"]:checked:after {\n    left: 43px; } }\n"
  },
  {
    "path": "css/modules/lazy-loading.css",
    "content": ".effeckt-lazy-loading-element {\n  opacity: 0; }\n  .effeckt-lazy-loading-element.shown {\n    opacity: 1; }\n\n[data-effeckt-type=\"fade\"] .effeckt-lazy-loading-element.animating {\n  opacity: 0;\n  -webkit-animation: fadeIn 0.5s ease forwards;\n          animation: fadeIn 0.5s ease forwards; }\n\n@-webkit-keyframes fadeIn {\n  to {\n    opacity: 1; } }\n\n@keyframes fadeIn {\n  to {\n    opacity: 1; } }\n\n[data-effeckt-type=\"slide-up\"] .effeckt-lazy-loading-element.animating {\n  opacity: 0;\n  -webkit-transform: translateY(200px);\n      -ms-transform: translateY(200px);\n          transform: translateY(200px);\n  -webkit-animation: slideUp 0.5s ease forwards;\n          animation: slideUp 0.5s ease forwards; }\n\n@-webkit-keyframes slideUp {\n  to {\n    opacity: 1;\n    -webkit-transform: translateY(0px);\n            transform: translateY(0px); } }\n\n@keyframes slideUp {\n  to {\n    opacity: 1;\n    -webkit-transform: translateY(0px);\n            transform: translateY(0px); } }\n\n[data-effeckt-type=\"scale-up\"] .effeckt-lazy-loading-element.animating {\n  opacity: 0;\n  -webkit-transform: scale(0.6);\n      -ms-transform: scale(0.6);\n          transform: scale(0.6);\n  -webkit-animation: scaleUp 0.5s ease forwards;\n          animation: scaleUp 0.5s ease forwards; }\n\n@-webkit-keyframes scaleUp {\n  to {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes scaleUp {\n  to {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n[data-effeckt-type=\"scale-down\"] {\n  -webkit-perspective: 1300px;\n          perspective: 1300px; }\n  [data-effeckt-type=\"scale-down\"] .effeckt-lazy-loading-element.animating {\n    opacity: 0;\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform: scale(1.4);\n        -ms-transform: scale(1.4);\n            transform: scale(1.4);\n    -webkit-animation: scaleDown 0.5s ease forwards;\n            animation: scaleDown 0.5s ease forwards; }\n\n@-webkit-keyframes scaleDown {\n  to {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes scaleDown {\n  to {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n[data-effeckt-type=\"fall\"] {\n  -webkit-perspective: 1300px;\n          perspective: 1300px; }\n  [data-effeckt-type=\"fall\"] .effeckt-lazy-loading-element.animating {\n    opacity: 0;\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);\n            transform: translateZ(400px) translateY(300px) rotateX(-90deg);\n    -webkit-animation: fall 0.75s ease forwards;\n            animation: fall 0.75s ease forwards; }\n\n@-webkit-keyframes fall {\n  to {\n    opacity: 1;\n    -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg);\n            transform: translateZ(0px) translateY(0px) rotateX(0deg); } }\n\n@keyframes fall {\n  to {\n    opacity: 1;\n    -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg);\n            transform: translateZ(0px) translateY(0px) rotateX(0deg); } }\n\n[data-effeckt-type=\"fly\"] {\n  -webkit-perspective: 1300px;\n          perspective: 1300px; }\n  [data-effeckt-type=\"fly\"] .effeckt-lazy-loading-element.animating {\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform-origin: 50% 50% -300px;\n        -ms-transform-origin: 50% 50% -300px;\n            transform-origin: 50% 50% -300px;\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg);\n    -webkit-animation: fly 0.5s ease-in-out forwards;\n            animation: fly 0.5s ease-in-out forwards; }\n\n@-webkit-keyframes fly {\n  to {\n    opacity: 1;\n    -webkit-transform: rotateX(0deg);\n            transform: rotateX(0deg); } }\n\n@keyframes fly {\n  to {\n    opacity: 1;\n    -webkit-transform: rotateX(0deg);\n            transform: rotateX(0deg); } }\n\n[data-effeckt-type=\"sign-3D\"] {\n  -webkit-perspective: 1300px;\n          perspective: 1300px; }\n  [data-effeckt-type=\"sign-3D\"] .effeckt-lazy-loading-element.animating {\n    opacity: 0;\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform-origin: 0% 0%;\n        -ms-transform-origin: 0% 0%;\n            transform-origin: 0% 0%;\n    -webkit-transform: rotateX(-80deg);\n            transform: rotateX(-80deg);\n    -webkit-animation: sign3D 0.5s ease-in-out forwards;\n            animation: sign3D 0.5s ease-in-out forwards; }\n\n@-webkit-keyframes sign3D {\n  to {\n    opacity: 1;\n    -webkit-transform: rotateX(0deg);\n            transform: rotateX(0deg); } }\n\n@keyframes sign3D {\n  to {\n    opacity: 1;\n    -webkit-transform: rotateX(0deg);\n            transform: rotateX(0deg); } }\n\n[data-effeckt-type=\"helix\"] {\n  -webkit-perspective: 1300px;\n          perspective: 1300px; }\n  [data-effeckt-type=\"helix\"] .effeckt-lazy-loading-element.animating {\n    opacity: 0;\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform: rotateY(-180deg);\n            transform: rotateY(-180deg);\n    -webkit-animation: helix 0.5s ease-in-out forwards;\n            animation: helix 0.5s ease-in-out forwards; }\n\n@-webkit-keyframes helix {\n  to {\n    opacity: 1;\n    -webkit-transform: rotateY(0deg);\n            transform: rotateY(0deg); } }\n\n@keyframes helix {\n  to {\n    opacity: 1;\n    -webkit-transform: rotateY(0deg);\n            transform: rotateY(0deg); } }\n\n[data-effeckt-type=\"popup\"] {\n  -webkit-perspective: 1300px;\n          perspective: 1300px; }\n  [data-effeckt-type=\"popup\"] .effeckt-lazy-loading-element.animating {\n    opacity: 0;\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform: scale(0.4);\n        -ms-transform: scale(0.4);\n            transform: scale(0.4);\n    -webkit-animation: popup 0.5s ease-in-out forwards;\n            animation: popup 0.5s ease-in-out forwards; }\n\n@-webkit-keyframes popup {\n  70% {\n    -webkit-transform: scale(1.1);\n            transform: scale(1.1);\n    opacity: 0.8;\n    -webkit-animation-timing-function: ease-out;\n            animation-timing-function: ease-out; }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes popup {\n  70% {\n    -webkit-transform: scale(1.1);\n            transform: scale(1.1);\n    opacity: 0.8;\n    -webkit-animation-timing-function: ease-out;\n            animation-timing-function: ease-out; }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n"
  },
  {
    "path": "css/modules/list-items.css",
    "content": ".effeckt-list[data-effeckt-type='pop-in'] {\n  overflow: hidden; }\n\n.effeckt-list[data-effeckt-type='pop-in'] .new-item {\n  max-height: 0;\n  opacity: 0;\n  -webkit-transform: translateX(-300px);\n      -ms-transform: translateX(-300px);\n          transform: translateX(-300px);\n  -webkit-animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards;\n          animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='pop-in'] .remove-item {\n  max-height: 50px;\n  opacity: 1;\n  -webkit-animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms;\n          animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms; }\n\n@-webkit-keyframes openSpace {\n  to {\n    max-height: 50px; } }\n\n@keyframes openSpace {\n  to {\n    max-height: 50px; } }\n\n@-webkit-keyframes moveIn {\n  to {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n            transform: translateX(0); } }\n\n@keyframes moveIn {\n  to {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n            transform: translateX(0); } }\n\n@-webkit-keyframes moveOut {\n  to {\n    opacity: 0;\n    -webkit-transform: translateX(-300px);\n            transform: translateX(-300px); } }\n\n@keyframes moveOut {\n  to {\n    opacity: 0;\n    -webkit-transform: translateX(-300px);\n            transform: translateX(-300px); } }\n\n@-webkit-keyframes closeSpace {\n  to {\n    max-height: 0px; }\n\n  from {\n    max-height: 50px; } }\n\n@keyframes closeSpace {\n  to {\n    max-height: 0px; }\n\n  from {\n    max-height: 50px; } }\n\n.effeckt-list[data-effeckt-type='expand-in'] .new-item {\n  max-height: 0;\n  opacity: 0;\n  -webkit-transform: scale(0);\n      -ms-transform: scale(0);\n          transform: scale(0);\n  -webkit-animation: growHeight 500ms ease forwards;\n          animation: growHeight 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='expand-in'] .remove-item {\n  -webkit-animation: shrinkHeight 500ms ease forwards;\n          animation: shrinkHeight 500ms ease forwards; }\n\n@-webkit-keyframes growHeight {\n  to {\n    max-height: 50px;\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes growHeight {\n  to {\n    max-height: 50px;\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@-webkit-keyframes shrinkHeight {\n  to {\n    max-height: 0;\n    opacity: 1;\n    -webkit-transform: scale(0);\n            transform: scale(0); }\n\n  from {\n    max-height: 50px;\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes shrinkHeight {\n  to {\n    max-height: 0;\n    opacity: 1;\n    -webkit-transform: scale(0);\n            transform: scale(0); }\n\n  from {\n    max-height: 50px;\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n.effeckt-list[data-effeckt-type='wobble-in'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards;\n          animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='wobble-in'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms;\n          animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms; }\n\n@-webkit-keyframes WobbleInX {\n  0% {\n    -webkit-transform: perspective(250px) rotateX(90deg);\n            transform: perspective(250px) rotateX(90deg);\n    opacity: 0; }\n\n  40% {\n    -webkit-transform: perspective(250px) rotateX(-10deg);\n            transform: perspective(250px) rotateX(-10deg); }\n\n  70% {\n    -webkit-transform: perspective(250px) rotateX(10deg);\n            transform: perspective(250px) rotateX(10deg); }\n\n  100% {\n    -webkit-transform: perspective(250px) rotateX(0deg);\n            transform: perspective(250px) rotateX(0deg);\n    opacity: 1; } }\n\n@keyframes WobbleInX {\n  0% {\n    -webkit-transform: perspective(250px) rotateX(90deg);\n            transform: perspective(250px) rotateX(90deg);\n    opacity: 0; }\n\n  40% {\n    -webkit-transform: perspective(250px) rotateX(-10deg);\n            transform: perspective(250px) rotateX(-10deg); }\n\n  70% {\n    -webkit-transform: perspective(250px) rotateX(10deg);\n            transform: perspective(250px) rotateX(10deg); }\n\n  100% {\n    -webkit-transform: perspective(250px) rotateX(0deg);\n            transform: perspective(250px) rotateX(0deg);\n    opacity: 1; } }\n\n@-webkit-keyframes WobbleOutX {\n  0% {\n    -webkit-transform: perspective(250px) rotateX(0deg);\n            transform: perspective(250px) rotateX(0deg);\n    opacity: 1; }\n\n  100% {\n    -webkit-transform: perspective(250px) rotateX(90deg);\n            transform: perspective(250px) rotateX(90deg);\n    opacity: 0; } }\n\n@keyframes WobbleOutX {\n  0% {\n    -webkit-transform: perspective(250px) rotateX(0deg);\n            transform: perspective(250px) rotateX(0deg);\n    opacity: 1; }\n\n  100% {\n    -webkit-transform: perspective(250px) rotateX(90deg);\n            transform: perspective(250px) rotateX(90deg);\n    opacity: 0; } }\n\n.effeckt-list[data-effeckt-type='flip-in'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-transform-origin: top left;\n      -ms-transform-origin: top left;\n          transform-origin: top left;\n  -webkit-animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards;\n          animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='flip-in'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-transform-origin: top left;\n      -ms-transform-origin: top left;\n          transform-origin: top left;\n  -webkit-animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms;\n          animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms; }\n\n@-webkit-keyframes FlipIn {\n  0% {\n    -webkit-transform: perspective(300px) rotateX(90deg);\n            transform: perspective(300px) rotateX(90deg);\n    opacity: 0; }\n\n  100% {\n    -webkit-transform: perspective(300px) rotateX(0deg);\n            transform: perspective(300px) rotateX(0deg);\n    opacity: 1; } }\n\n@keyframes FlipIn {\n  0% {\n    -webkit-transform: perspective(300px) rotateX(90deg);\n            transform: perspective(300px) rotateX(90deg);\n    opacity: 0; }\n\n  100% {\n    -webkit-transform: perspective(300px) rotateX(0deg);\n            transform: perspective(300px) rotateX(0deg);\n    opacity: 1; } }\n\n@-webkit-keyframes FlipOut {\n  0% {\n    -webkit-transform: perspective(400px) rotateX(0deg);\n            transform: perspective(400px) rotateX(0deg);\n    opacity: 1; }\n\n  100% {\n    -webkit-transform: perspective(400px) rotateX(90deg);\n            transform: perspective(400px) rotateX(90deg);\n    opacity: 0; } }\n\n@keyframes FlipOut {\n  0% {\n    -webkit-transform: perspective(400px) rotateX(0deg);\n            transform: perspective(400px) rotateX(0deg);\n    opacity: 1; }\n\n  100% {\n    -webkit-transform: perspective(400px) rotateX(90deg);\n            transform: perspective(400px) rotateX(90deg);\n    opacity: 0; } }\n\n.effeckt-list[data-effeckt-type='fall-in'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: openSpace 1000ms ease forwards, fallInX 1000ms both;\n          animation: openSpace 1000ms ease forwards, fallInX 1000ms both; }\n\n.effeckt-list[data-effeckt-type='fall-in'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-transform-origin: top left;\n      -ms-transform-origin: top left;\n          transform-origin: top left;\n  -webkit-animation: fallOffX 1000ms both, closeSpace 750ms ease forwards 500ms;\n          animation: fallOffX 1000ms both, closeSpace 750ms ease forwards 500ms; }\n\n@-webkit-keyframes fallInX {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateY(-200px);\n            transform: translateY(-200px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n            transform: translateY(0); } }\n\n@keyframes fallInX {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateY(-200px);\n            transform: translateY(-200px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n            transform: translateY(0); } }\n\n@-webkit-keyframes fallOffX {\n  0% {\n    opacity: 1;\n    -webkit-transform: rotateZ(0);\n            transform: rotateZ(0); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: translateY(200px) rotateZ(90deg);\n            transform: translateY(200px) rotateZ(90deg); } }\n\n@keyframes fallOffX {\n  0% {\n    opacity: 1;\n    -webkit-transform: rotateZ(0);\n            transform: rotateZ(0); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: translateY(200px) rotateZ(90deg);\n            transform: translateY(200px) rotateZ(90deg); } }\n\n.effeckt-list[data-effeckt-type='from-above'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: openSpace 1000ms ease forwards, fromAbove 1000ms both 500ms;\n          animation: openSpace 1000ms ease forwards, fromAbove 1000ms both 500ms; }\n\n.effeckt-list[data-effeckt-type='from-above'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: toAbove 1000ms both, closeSpace 500ms ease forwards 650ms;\n          animation: toAbove 1000ms both, closeSpace 500ms ease forwards 650ms; }\n\n@-webkit-keyframes fromAbove {\n  0% {\n    opacity: 0;\n    -webkit-transform: scale(3);\n            transform: scale(3); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes fromAbove {\n  0% {\n    opacity: 0;\n    -webkit-transform: scale(3);\n            transform: scale(3); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@-webkit-keyframes toAbove {\n  0% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: scale(3);\n            transform: scale(3); } }\n\n@keyframes toAbove {\n  0% {\n    opacity: 1;\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: scale(3);\n            transform: scale(3); } }\n\n.effeckt-list[data-effeckt-type='wobble-out'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: openSpace 1000ms ease forwards, fallInX 1000ms both;\n          animation: openSpace 1000ms ease forwards, fallInX 1000ms both; }\n\n.effeckt-list[data-effeckt-type='wobble-out'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-transform-origin: top left;\n      -ms-transform-origin: top left;\n          transform-origin: top left;\n  -webkit-animation: wobbleOutY 1500ms both 500ms, closeSpace 500ms ease forwards 1500ms;\n          animation: wobbleOutY 1500ms both 500ms, closeSpace 500ms ease forwards 1500ms; }\n\n@-webkit-keyframes wobbleOutY {\n  0% {\n    opacity: 1;\n    -webkit-transform: rotateZ(0);\n            transform: rotateZ(0); }\n\n  20% {\n    opacity: 1;\n    -webkit-transform: rotateZ(140deg);\n            transform: rotateZ(140deg); }\n\n  40% {\n    opacity: 1;\n    -webkit-transform: rotateZ(60deg);\n            transform: rotateZ(60deg); }\n\n  60% {\n    opacity: 1;\n    -webkit-transform: rotateZ(110deg);\n            transform: rotateZ(110deg); }\n\n  70% {\n    opacity: 1;\n    -webkit-transform: rotateZ(90deg) translateX(0);\n            transform: rotateZ(90deg) translateX(0); }\n\n  90% {\n    opacity: 1;\n    -webkit-transform: rotateZ(90deg) translateX(400px);\n            transform: rotateZ(90deg) translateX(400px); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: rotateZ(90deg) translateX(400px);\n            transform: rotateZ(90deg) translateX(400px); } }\n\n@keyframes wobbleOutY {\n  0% {\n    opacity: 1;\n    -webkit-transform: rotateZ(0);\n            transform: rotateZ(0); }\n\n  20% {\n    opacity: 1;\n    -webkit-transform: rotateZ(140deg);\n            transform: rotateZ(140deg); }\n\n  40% {\n    opacity: 1;\n    -webkit-transform: rotateZ(60deg);\n            transform: rotateZ(60deg); }\n\n  60% {\n    opacity: 1;\n    -webkit-transform: rotateZ(110deg);\n            transform: rotateZ(110deg); }\n\n  70% {\n    opacity: 1;\n    -webkit-transform: rotateZ(90deg) translateX(0);\n            transform: rotateZ(90deg) translateX(0); }\n\n  90% {\n    opacity: 1;\n    -webkit-transform: rotateZ(90deg) translateX(400px);\n            transform: rotateZ(90deg) translateX(400px); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: rotateZ(90deg) translateX(400px);\n            transform: rotateZ(90deg) translateX(400px); } }\n\n.effeckt-list[data-effeckt-type='bouncy-slide-in'] .new-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: bouncySlideIn 1000ms both, openSpace 500ms ease forwards;\n          animation: bouncySlideIn 1000ms both, openSpace 500ms ease forwards; }\n\n.effeckt-list[data-effeckt-type='bouncy-slide-in'] .remove-item {\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  -webkit-animation: fallOffY 1500ms both 500ms, closeSpace 500ms ease forwards 1625ms;\n          animation: fallOffY 1500ms both 500ms, closeSpace 500ms ease forwards 1625ms; }\n\n@-webkit-keyframes bouncySlideIn {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateX(300px);\n            transform: translateX(300px); }\n\n  70% {\n    opacity: 1;\n    -webkit-transform: translateX(-50px);\n            transform: translateX(-50px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n            transform: translateX(0); } }\n\n@keyframes bouncySlideIn {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateX(300px);\n            transform: translateX(300px); }\n\n  70% {\n    opacity: 1;\n    -webkit-transform: translateX(-50px);\n            transform: translateX(-50px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n            transform: translateX(0); } }\n\n@-webkit-keyframes fallOffY {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateX(0) translateY(0) rotateZ(0deg);\n            transform: translateX(0) translateY(0) rotateZ(0deg); }\n\n  50% {\n    opacity: 1;\n    -webkit-transform: translateX(-50%) translateY(0) rotateZ(0deg);\n            transform: translateX(-50%) translateY(0) rotateZ(0deg); }\n\n  75% {\n    opacity: 0.75;\n    -webkit-transform: translateX(-50%) translateY(0) rotateZ(-30deg);\n            transform: translateX(-50%) translateY(0) rotateZ(-30deg); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: translateX(-50%) translateY(300px) rotateZ(-60deg);\n            transform: translateX(-50%) translateY(300px) rotateZ(-60deg); } }\n\n@keyframes fallOffY {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateX(0) translateY(0) rotateZ(0deg);\n            transform: translateX(0) translateY(0) rotateZ(0deg); }\n\n  50% {\n    opacity: 1;\n    -webkit-transform: translateX(-50%) translateY(0) rotateZ(0deg);\n            transform: translateX(-50%) translateY(0) rotateZ(0deg); }\n\n  75% {\n    opacity: 0.75;\n    -webkit-transform: translateX(-50%) translateY(0) rotateZ(-30deg);\n            transform: translateX(-50%) translateY(0) rotateZ(-30deg); }\n\n  100% {\n    opacity: 0;\n    -webkit-transform: translateX(-50%) translateY(300px) rotateZ(-60deg);\n            transform: translateX(-50%) translateY(300px) rotateZ(-60deg); } }\n"
  },
  {
    "path": "css/modules/list-scroll.css",
    "content": ".effeckt-list-scroll {\n  position: relative;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  -webkit-perspective: 400px;\n          perspective: 400px; }\n  .effeckt-list-scroll > li {\n    position: relative;\n    z-index: 2;\n    -webkit-transform: translateZ(0);\n            transform: translateZ(0); }\n\n[data-effeckt-type=\"grow\"] li {\n  transition: all 500ms ease;\n  -webkit-transform-origin: 50% 50%;\n      -ms-transform-origin: 50% 50%;\n          transform-origin: 50% 50%; }\n  [data-effeckt-type=\"grow\"] li.past, [data-effeckt-type=\"grow\"] li.future {\n    -webkit-transform: scale(0.01);\n        -ms-transform: scale(0.01);\n            transform: scale(0.01); }\n\n[data-effeckt-type=\"curl\"] li {\n  -webkit-perspective: 600px;\n          perspective: 600px;\n  -webkit-perspective-origin: 0% 50%;\n          perspective-origin: 0% 50%;\n  transition: all 500ms ease, opacity 166.6666666667ms ease;\n  -webkit-transform-origin: 0% 0%;\n      -ms-transform-origin: 0% 0%;\n          transform-origin: 0% 0%;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n  [data-effeckt-type=\"curl\"] li.past {\n    opacity: 0;\n    -webkit-transform: rotateY(90deg);\n            transform: rotateY(90deg); }\n  [data-effeckt-type=\"curl\"] li.future {\n    opacity: 0;\n    -webkit-transform: rotateY(90deg);\n            transform: rotateY(90deg); }\n\n[data-effeckt-type=\"wave\"] li {\n  transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }\n  [data-effeckt-type=\"wave\"] li.past {\n    -webkit-transform: translateX(-70%);\n        -ms-transform: translateX(-70%);\n            transform: translateX(-70%); }\n  [data-effeckt-type=\"wave\"] li.future {\n    -webkit-transform: translateX(-70%);\n        -ms-transform: translateX(-70%);\n            transform: translateX(-70%); }\n\n[data-effeckt-type=\"fan\"] li {\n  transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1);\n  -webkit-transform-origin: 0% 0%;\n      -ms-transform-origin: 0% 0%;\n          transform-origin: 0% 0%; }\n  [data-effeckt-type=\"fan\"] li.past {\n    -webkit-transform: rotate(-60deg);\n        -ms-transform: rotate(-60deg);\n            transform: rotate(-60deg); }\n  [data-effeckt-type=\"fan\"] li.future {\n    -webkit-transform: rotate(70deg);\n        -ms-transform: rotate(70deg);\n            transform: rotate(70deg); }\n\n[data-effeckt-type=\"fade\"] li {\n  transition: opacity 250ms ease-in-out; }\n  [data-effeckt-type=\"fade\"] li.past, [data-effeckt-type=\"fade\"] li.future {\n    opacity: 0; }\n\n[data-effeckt-type=\"fly\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"fly\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: 50% 50% -50px;\n        -ms-transform-origin: 50% 50% -50px;\n            transform-origin: 50% 50% -50px; }\n    [data-effeckt-type=\"fly\"] li.past, [data-effeckt-type=\"fly\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"fly\"] li.past {\n      -webkit-transform: rotateX(180deg);\n              transform: rotateX(180deg); }\n    [data-effeckt-type=\"fly\"] li.future {\n      -webkit-transform: rotateX(-180deg);\n              transform: rotateX(-180deg); }\n\n[data-effeckt-type=\"landing\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"landing\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: 50% 50%;\n        -ms-transform-origin: 50% 50%;\n            transform-origin: 50% 50%; }\n    [data-effeckt-type=\"landing\"] li.past, [data-effeckt-type=\"landing\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"landing\"] li.past {\n      -webkit-transform: scale(1.5) translate(10%, -50%);\n          -ms-transform: scale(1.5) translate(10%, -50%);\n              transform: scale(1.5) translate(10%, -50%); }\n    [data-effeckt-type=\"landing\"] li.future {\n      -webkit-transform: scale(1.5) translate(-10%, 50%);\n          -ms-transform: scale(1.5) translate(-10%, 50%);\n              transform: scale(1.5) translate(-10%, 50%); }\n\n[data-effeckt-type=\"swing-front\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"swing-front\"] li {\n    transition: all 500ms ease, opacity 250ms ease; }\n    [data-effeckt-type=\"swing-front\"] li.past, [data-effeckt-type=\"swing-front\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"swing-front\"] li.past {\n      -webkit-transform-origin: bottom;\n          -ms-transform-origin: bottom;\n              transform-origin: bottom;\n      -webkit-transform: rotateX(140deg);\n              transform: rotateX(140deg); }\n    [data-effeckt-type=\"swing-front\"] li.future {\n      -webkit-transform-origin: top;\n          -ms-transform-origin: top;\n              transform-origin: top;\n      -webkit-transform: rotateX(-140deg);\n              transform: rotateX(-140deg); }\n\n[data-effeckt-type=\"swing-back\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"swing-back\"] li {\n    transition: all 500ms ease, opacity 250ms ease; }\n    [data-effeckt-type=\"swing-back\"] li.past, [data-effeckt-type=\"swing-back\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"swing-back\"] li.past {\n      -webkit-transform-origin: bottom;\n          -ms-transform-origin: bottom;\n              transform-origin: bottom;\n      -webkit-transform: rotateX(-140deg);\n              transform: rotateX(-140deg); }\n    [data-effeckt-type=\"swing-back\"] li.future {\n      -webkit-transform-origin: top;\n          -ms-transform-origin: top;\n              transform-origin: top;\n      -webkit-transform: rotateX(140deg);\n              transform: rotateX(140deg); }\n\n[data-effeckt-type=\"twist\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"twist\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: center;\n        -ms-transform-origin: center;\n            transform-origin: center; }\n    [data-effeckt-type=\"twist\"] li.past, [data-effeckt-type=\"twist\"] li.future {\n      opacity: 0; }\n    [data-effeckt-type=\"twist\"] li.past {\n      -webkit-transform: rotateY(-180deg);\n              transform: rotateY(-180deg); }\n    [data-effeckt-type=\"twist\"] li.future {\n      -webkit-transform: rotateY(180deg);\n              transform: rotateY(180deg); }\n\n[data-effeckt-type=\"door\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"door\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: 0% 0%;\n        -ms-transform-origin: 0% 0%;\n            transform-origin: 0% 0%; }\n    [data-effeckt-type=\"door\"] li.past, [data-effeckt-type=\"door\"] li.future {\n      opacity: 0;\n      -webkit-transform: rotateY(-90deg);\n              transform: rotateY(-90deg); }\n\n[data-effeckt-type=\"climb\"] {\n  -webkit-perspective: 400px;\n          perspective: 400px;\n  -webkit-perspective-origin: 50% 50%;\n          perspective-origin: 50% 50%; }\n  [data-effeckt-type=\"climb\"] li {\n    transition: all 500ms ease, opacity 250ms ease;\n    -webkit-transform-origin: 0% 0%;\n        -ms-transform-origin: 0% 0%;\n            transform-origin: 0% 0%; }\n    [data-effeckt-type=\"climb\"] li.past {\n      -webkit-transform: translateY(-200%);\n          -ms-transform: translateY(-200%);\n              transform: translateY(-200%); }\n    [data-effeckt-type=\"climb\"] li.future {\n      -webkit-transform: translateY(200%);\n          -ms-transform: translateY(200%);\n              transform: translateY(200%); }\n"
  },
  {
    "path": "css/modules/modal.css",
    "content": ".effeckt-modal-wrap {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  max-width: 320px;\n  min-width: 320px;\n  -webkit-transform: translate(-50%, -50%);\n      -ms-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  z-index: 2000;\n  visibility: hidden;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden; }\n\n.effeckt-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  opacity: 0;\n  transition-duration: 500ms; }\n\n.effeckt-show.effeckt-modal-wrap {\n  visibility: visible; }\n  .effeckt-show.effeckt-modal-wrap ~ .effeckt-modal-overlay {\n    visibility: visible;\n    opacity: 1; }\n\n.effeckt-modal {\n  transition-property: all;\n  transition-duration: 500ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0, 1.5);\n  -webkit-animation-duration: 1000ms;\n          animation-duration: 1000ms;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0, 1.5);\n          animation-timing-function: cubic-bezier(0.4, 0, 0, 1.5); }\n\n.from-below .effeckt-content {\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5);\n  opacity: 0; }\n\n.effeckt-show.from-below .effeckt-content {\n  -webkit-transform: scale(1);\n      -ms-transform: scale(1);\n          transform: scale(1);\n  opacity: 1; }\n\n.from-above .effeckt-content {\n  -webkit-transform: scale(1.5);\n      -ms-transform: scale(1.5);\n          transform: scale(1.5);\n  opacity: 0; }\n\n.effeckt-show.from-above .effeckt-content {\n  -webkit-transform: scale(1);\n      -ms-transform: scale(1);\n          transform: scale(1);\n  opacity: 1; }\n\n.to-below .effeckt-content {\n  -webkit-transform: scale(0.5);\n      -ms-transform: scale(0.5);\n          transform: scale(0.5);\n  opacity: 0; }\n\n.to-above .effeckt-content {\n  -webkit-transform: scale(1.5);\n      -ms-transform: scale(1.5);\n          transform: scale(1.5);\n  opacity: 0; }\n\n.slide-in-top .effeckt-content {\n  -webkit-transform: translate3d(0, -100%, 0);\n          transform: translate3d(0, -100%, 0);\n  opacity: 0; }\n\n.effeckt-show.slide-in-top .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.slide-in-right .effeckt-content {\n  -webkit-transform: translate3d(30%, 0, 0);\n          transform: translate3d(30%, 0, 0);\n  opacity: 0; }\n\n.effeckt-show.slide-in-right .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.slide-in-bottom .effeckt-content {\n  -webkit-transform: translate3d(0, 30%, 0);\n          transform: translate3d(0, 30%, 0);\n  opacity: 0; }\n\n.effeckt-show.slide-in-bottom .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.slide-in-left .effeckt-content {\n  -webkit-transform: translate3d(-30%, 0, 0);\n          transform: translate3d(-30%, 0, 0);\n  opacity: 0; }\n\n.effeckt-show.slide-in-left .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.sticky-up {\n  top: 0;\n  -webkit-transform: translate(-50%, 0);\n      -ms-transform: translate(-50%, 0);\n          transform: translate(-50%, 0); }\n\n.sticky-up .effeckt-content {\n  -webkit-transform: translate3d(0, -100%, 0);\n          transform: translate3d(0, -100%, 0);\n  opacity: 0; }\n\n.effeckt-show.sticky-up .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n.slip-in-from-top ~ [data-effeckt-page], .slip-in-from-top ~ .effeckt-overlay {\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-transform-origin: 50% 100%;\n      -ms-transform-origin: 50% 100%;\n          transform-origin: 50% 100%; }\n\n.slip-in-from-top .effeckt-content {\n  -webkit-transform: translateY(-200%);\n      -ms-transform: translateY(-200%);\n          transform: translateY(-200%);\n  opacity: 0; }\n\n.effeckt-show.slip-in-from-top ~ [data-effeckt-page], .effeckt-show.slip-in-from-top ~ .effeckt-overlay {\n  -webkit-animation: OpenTop 500ms forwards ease-in;\n          animation: OpenTop 500ms forwards ease-in; }\n\n.effeckt-show.slip-in-from-top .effeckt-content {\n  -webkit-transform: translateY(0);\n      -ms-transform: translateY(0);\n          transform: translateY(0);\n  opacity: 1; }\n\n@-webkit-keyframes OpenTop {\n  50% {\n    -webkit-transform: rotateX(10deg);\n            transform: rotateX(10deg);\n    -webkit-animation-timing-function: ease-out;\n            animation-timing-function: ease-out; } }\n\n@keyframes OpenTop {\n  50% {\n    -webkit-transform: rotateX(10deg);\n            transform: rotateX(10deg);\n    -webkit-animation-timing-function: ease-out;\n            animation-timing-function: ease-out; } }\n\n.slide-out-bottom .effeckt-content {\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%);\n  opacity: 0; }\n\n.slide-out-top .effeckt-content {\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%);\n  opacity: 0; }\n\n.slide-out-right .effeckt-content {\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%);\n  opacity: 0; }\n\n.slide-out-left .effeckt-content {\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%);\n  opacity: 0; }\n\n.flip-horizontal-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.flip-horizontal-3D .effeckt-content {\n  -webkit-transform: rotateY(-70deg);\n          transform: rotateY(-70deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  opacity: 0; }\n\n.effeckt-show.flip-horizontal-3D .effeckt-content {\n  -webkit-transform: rotateY(0deg);\n          transform: rotateY(0deg);\n  opacity: 1; }\n\n.flip-vertical-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.flip-vertical-3D .effeckt-content {\n  -webkit-transform: rotateX(-70deg);\n          transform: rotateX(-70deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  opacity: 0; }\n\n.effeckt-show.flip-vertical-3D .effeckt-content {\n  -webkit-transform: rotateX(0deg);\n          transform: rotateX(0deg);\n  opacity: 1; }\n\n.sign-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.sign-3D .effeckt-content {\n  -webkit-transform: rotateX(-60deg);\n          transform: rotateX(-60deg);\n  -webkit-transform-origin: 50% 0;\n      -ms-transform-origin: 50% 0;\n          transform-origin: 50% 0;\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  opacity: 0; }\n\n.effeckt-show.sign-3D .effeckt-content {\n  -webkit-transform: rotateX(0deg);\n          transform: rotateX(0deg);\n  opacity: 1; }\n\n.slit-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.slit-3D .effeckt-content {\n  -webkit-transform: translateZ(-3000px) rotateY(90deg);\n          transform: translateZ(-3000px) rotateY(90deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  opacity: 0; }\n\n.effeckt-show.slit-3D .effeckt-content {\n  -webkit-animation: modalSlit 0.7s forwards ease-out;\n          animation: modalSlit 0.7s forwards ease-out; }\n\n@-webkit-keyframes modalSlit {\n  50% {\n    -webkit-transform: translateZ(-250px) rotateY(89deg);\n            transform: translateZ(-250px) rotateY(89deg);\n    opacity: 0.75;\n    -webkit-animation-timing-function: ease-in;\n            animation-timing-function: ease-in; }\n\n  100% {\n    -webkit-transform: translateZ(0) rotateY(0deg);\n            transform: translateZ(0) rotateY(0deg);\n    opacity: 1; } }\n\n@keyframes modalSlit {\n  50% {\n    -webkit-transform: translateZ(-250px) rotateY(89deg);\n            transform: translateZ(-250px) rotateY(89deg);\n    opacity: 0.75;\n    -webkit-animation-timing-function: ease-in;\n            animation-timing-function: ease-in; }\n\n  100% {\n    -webkit-transform: translateZ(0) rotateY(0deg);\n            transform: translateZ(0) rotateY(0deg);\n    opacity: 1; } }\n\n.rotate-from-bottom-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.rotate-from-bottom-3D .effeckt-content {\n  -webkit-transform: translateY(100%) rotateX(90deg);\n          transform: translateY(100%) rotateX(90deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-transform-origin: 0 100%;\n      -ms-transform-origin: 0 100%;\n          transform-origin: 0 100%;\n  opacity: 0; }\n\n.effeckt-show.rotate-from-bottom-3D .effeckt-content {\n  -webkit-transform: translateY(0%) rotateX(0deg);\n          transform: translateY(0%) rotateX(0deg);\n  opacity: 1; }\n\n.rotate-from-left-3D {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.rotate-from-left-3D .effeckt-content {\n  -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n          transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-transform-origin: 0 100%;\n      -ms-transform-origin: 0 100%;\n          transform-origin: 0 100%;\n  opacity: 0; }\n\n.effeckt-show.rotate-from-left-3D .effeckt-content {\n  -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);\n          transform: translateZ(0px) translateX(0%) rotateY(0deg);\n  opacity: 1; }\n\n.let-me-in ~ [data-effeckt-page].effeckt-page-active {\n  transition: 500ms;\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  -webkit-transform-origin: 50% 0%;\n      -ms-transform-origin: 50% 0%;\n          transform-origin: 50% 0%;\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d; }\n\n.let-me-in .effeckt-content {\n  opacity: 0;\n  -webkit-transform: translate3d(0, 200%, 0);\n          transform: translate3d(0, 200%, 0); }\n\n.effeckt-show.let-me-in ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-transform: rotateX(-7deg);\n          transform: rotateX(-7deg);\n  opacity: 1; }\n  .effeckt-show.let-me-in ~ [data-effeckt-page].effeckt-page-active:after {\n    opacity: 1;\n    visibility: visible; }\n\n.effeckt-show.let-me-in .effeckt-content {\n  -webkit-transform: translate3d(0, -50%, 0);\n          transform: translate3d(0, -50%, 0);\n  opacity: 1; }\n\n.make-way {\n  -webkit-perspective: 600px;\n          perspective: 600px; }\n\n.make-way ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  -webkit-transform-origin: 0% 50%;\n      -ms-transform-origin: 0% 50%;\n          transform-origin: 0% 50%; }\n\n.make-way .effeckt-content {\n  -webkit-transform: translate3d(200%, 0, 0);\n          transform: translate3d(200%, 0, 0);\n  opacity: 0; }\n\n.effeckt-show.make-way ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-animation: makeWay 500ms forwards ease-in;\n          animation: makeWay 500ms forwards ease-in; }\n\n.effeckt-show.make-way .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  opacity: 1; }\n\n@-webkit-keyframes makeWay {\n  50% {\n    -webkit-transform: translate3d(0, 0, -50px) rotateY(5deg);\n            transform: translate3d(0, 0, -50px) rotateY(5deg); }\n\n  100% {\n    -webkit-transform: translate3d(0, 0, -200px);\n            transform: translate3d(0, 0, -200px); } }\n\n@keyframes makeWay {\n  50% {\n    -webkit-transform: translate3d(0, 0, -50px) rotateY(5deg);\n            transform: translate3d(0, 0, -50px) rotateY(5deg); }\n\n  100% {\n    -webkit-transform: translate3d(0, 0, -200px);\n            transform: translate3d(0, 0, -200px); } }\n\n.deep-content .effeckt-content {\n  -webkit-transform: scale(0.8);\n      -ms-transform: scale(0.8);\n          transform: scale(0.8);\n  opacity: 0; }\n\n.effeckt-show.deep-content .effeckt-content {\n  -webkit-transform: scale(1.1);\n      -ms-transform: scale(1.1);\n          transform: scale(1.1);\n  opacity: 1; }\n\n.deep-content ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  transition: 500ms; }\n\n.effeckt-show.deep-content ~ [data-effeckt-page].effeckt-page-active {\n  -webkit-transform: translate3d(0, 0, -85px);\n          transform: translate3d(0, 0, -85px);\n  -webkit-filter: blur(3px);\n          filter: blur(3px); }\n\n.newspaper .effeckt-content {\n  -webkit-transform: scale(0.5) rotate(720deg);\n      -ms-transform: scale(0.5) rotate(720deg);\n          transform: scale(0.5) rotate(720deg);\n  opacity: 0; }\n\n.effeckt-show.newspaper .effeckt-content {\n  -webkit-transform: scale(1) rotate(0deg);\n      -ms-transform: scale(1) rotate(0deg);\n          transform: scale(1) rotate(0deg);\n  opacity: 1; }\n\n.side-fall {\n  -webkit-perspective: 600px;\n          perspective: 600px;\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d; }\n\n.side-fall .effeckt-content {\n  transition-timing-function: ease-out;\n  -webkit-transform: translateZ(600px) translateX(30%) rotate(10deg);\n          transform: translateZ(600px) translateX(30%) rotate(10deg);\n  opacity: 0; }\n\n.effeckt-show.side-fall .effeckt-content {\n  transition-timing-function: ease-in;\n  -webkit-transform: translateZ(0) translateX(0) rotate(0deg);\n          transform: translateZ(0) translateX(0) rotate(0deg);\n  opacity: 1; }\n\n.fade-in .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.fade-in .effeckt-content {\n  opacity: 1; }\n\n.effeckt-show.blur ~ [data-effeckt-page] {\n  -webkit-filter: blur(3px);\n          filter: blur(3px);\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0); }\n\n.blur .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.blur ~ [data-effeckt-page] {\n  transition: all 500ms ease; }\n\n.effeckt-show.blur .effeckt-content {\n  opacity: 1; }\n\n.tilt-fall .effeckt-content {\n  -webkit-transform: translateY(100%) rotate(-25deg);\n      -ms-transform: translateY(100%) rotate(-25deg);\n          transform: translateY(100%) rotate(-25deg);\n  opacity: 0; }\n\n.shake .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.shake .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: shake;\n          animation-name: shake;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes shake {\n  0%, 100% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0); }\n\n  10%, 30%, 50%, 70%, 90% {\n    -webkit-transform: translateX(-10px);\n            transform: translateX(-10px); }\n\n  20%, 40%, 60%, 80% {\n    -webkit-transform: translateX(10px);\n            transform: translateX(10px); } }\n\n@keyframes shake {\n  0%, 100% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0); }\n\n  10%, 30%, 50%, 70%, 90% {\n    -webkit-transform: translateX(-10px);\n            transform: translateX(-10px); }\n\n  20%, 40%, 60%, 80% {\n    -webkit-transform: translateX(10px);\n            transform: translateX(10px); } }\n\n.bounce .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.bounce .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: bounce;\n          animation-name: bounce;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes bounce {\n  0%, 20%, 50%, 80%, 100% {\n    -webkit-transform: translateY(0);\n            transform: translateY(0); }\n\n  40% {\n    -webkit-transform: translateY(-30px);\n            transform: translateY(-30px); }\n\n  60% {\n    -webkit-transform: translateY(-15px);\n            transform: translateY(-15px); } }\n\n@keyframes bounce {\n  0%, 20%, 50%, 80%, 100% {\n    -webkit-transform: translateY(0);\n            transform: translateY(0); }\n\n  40% {\n    -webkit-transform: translateY(-30px);\n            transform: translateY(-30px); }\n\n  60% {\n    -webkit-transform: translateY(-15px);\n            transform: translateY(-15px); } }\n\n.pulse .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.pulse .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: pulse;\n          animation-name: pulse;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  50% {\n    -webkit-transform: scale(1.1);\n            transform: scale(1.1); }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n@keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  50% {\n    -webkit-transform: scale(1.1);\n            transform: scale(1.1); }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1); } }\n\n.wobble .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.wobble .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: wobble;\n          animation-name: wobble;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes wobble {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  15% {\n    -webkit-transform: translateX(-25%) rotate(-5deg);\n            transform: translateX(-25%) rotate(-5deg); }\n\n  30% {\n    -webkit-transform: translateX(20%) rotate(3deg);\n            transform: translateX(20%) rotate(3deg); }\n\n  45% {\n    -webkit-transform: translateX(-15%) rotate(-3deg);\n            transform: translateX(-15%) rotate(-3deg); }\n\n  60% {\n    -webkit-transform: translateX(10%) rotate(2deg);\n            transform: translateX(10%) rotate(2deg); }\n\n  75% {\n    -webkit-transform: translateX(-5%) rotate(-1deg);\n            transform: translateX(-5%) rotate(-1deg); }\n\n  100% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); } }\n\n@keyframes wobble {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  15% {\n    -webkit-transform: translateX(-25%) rotate(-5deg);\n            transform: translateX(-25%) rotate(-5deg); }\n\n  30% {\n    -webkit-transform: translateX(20%) rotate(3deg);\n            transform: translateX(20%) rotate(3deg); }\n\n  45% {\n    -webkit-transform: translateX(-15%) rotate(-3deg);\n            transform: translateX(-15%) rotate(-3deg); }\n\n  60% {\n    -webkit-transform: translateX(10%) rotate(2deg);\n            transform: translateX(10%) rotate(2deg); }\n\n  75% {\n    -webkit-transform: translateX(-5%) rotate(-1deg);\n            transform: translateX(-5%) rotate(-1deg); }\n\n  100% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); } }\n\n.swing .effeckt-content {\n  -webkit-transform-origin: 50% 0%;\n      -ms-transform-origin: 50% 0%;\n          transform-origin: 50% 0%;\n  opacity: 0; }\n\n.effeckt-show.swing .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: swing;\n          animation-name: swing;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes swing {\n  20% {\n    -webkit-transform: rotate(15deg);\n            transform: rotate(15deg); }\n\n  40% {\n    -webkit-transform: rotate(-10deg);\n            transform: rotate(-10deg); }\n\n  60% {\n    -webkit-transform: rotate(5deg);\n            transform: rotate(5deg); }\n\n  80% {\n    -webkit-transform: rotate(-5deg);\n            transform: rotate(-5deg); }\n\n  100% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg); } }\n\n@keyframes swing {\n  20% {\n    -webkit-transform: rotate(15deg);\n            transform: rotate(15deg); }\n\n  40% {\n    -webkit-transform: rotate(-10deg);\n            transform: rotate(-10deg); }\n\n  60% {\n    -webkit-transform: rotate(5deg);\n            transform: rotate(5deg); }\n\n  80% {\n    -webkit-transform: rotate(-5deg);\n            transform: rotate(-5deg); }\n\n  100% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg); } }\n\n.tada .effeckt-content {\n  opacity: 0; }\n\n.effeckt-show.tada .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: tada;\n          animation-name: tada;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease; }\n\n@-webkit-keyframes tada {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  10%, 20% {\n    -webkit-transform: scale(0.9) rotate(-3deg);\n            transform: scale(0.9) rotate(-3deg); }\n\n  30%, 50%, 70%, 90% {\n    -webkit-transform: scale(1.1) rotate(3deg);\n            transform: scale(1.1) rotate(3deg); }\n\n  40%, 60%, 80% {\n    -webkit-transform: scale(1.1) rotate(-3deg);\n            transform: scale(1.1) rotate(-3deg); }\n\n  100% {\n    -webkit-transform: scale(1) rotate(0);\n            transform: scale(1) rotate(0); } }\n\n@keyframes tada {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1); }\n\n  10%, 20% {\n    -webkit-transform: scale(0.9) rotate(-3deg);\n            transform: scale(0.9) rotate(-3deg); }\n\n  30%, 50%, 70%, 90% {\n    -webkit-transform: scale(1.1) rotate(3deg);\n            transform: scale(1.1) rotate(3deg); }\n\n  40%, 60%, 80% {\n    -webkit-transform: scale(1.1) rotate(-3deg);\n            transform: scale(1.1) rotate(-3deg); }\n\n  100% {\n    -webkit-transform: scale(1) rotate(0);\n            transform: scale(1) rotate(0); } }\n"
  },
  {
    "path": "css/modules/modals.css",
    "content": ".effeckt-modal-wrap {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  max-width: 320px;\n  min-width: 320px;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  z-index: 2000;\n  visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n  -o-backface-visibility: hidden;\n  backface-visibility: hidden;\n}\n\n.effeckt-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  opacity: 0;\n  transition-duration: 300ms;\n}\n\n.effeckt-show.effeckt-modal-wrap {\n  visibility: visible;\n}\n\n.effeckt-show.effeckt-modal-wrap ~ .effeckt-modal-overlay {\n  visibility: visible;\n  opacity: 1;\n}\n\n.effeckt-modal {\n  transition-property: all;\n  transition-duration: 300ms;\n  -webkit-animation-duration: 900ms;\n  animation-duration: 900ms;\n  -webkit-animation-fill-mode: forwards;\n  animation-fill-mode: forwards;\n}\n\n.from-below .effeckt-content {\n  -webkit-transform: scale(0.7);\n  -ms-transform: scale(0.7);\n  transform: scale(0.7);\n  opacity: 0;\n}\n\n.effeckt-show.from-below .effeckt-content {\n  -webkit-transform: scale(1);\n  -ms-transform: scale(1);\n  transform: scale(1);\n  opacity: 1;\n}\n\n.from-above .effeckt-content {\n  -webkit-transform: scale(1.3);\n  -ms-transform: scale(1.3);\n  transform: scale(1.3);\n  opacity: 0;\n}\n\n.effeckt-show.from-above .effeckt-content {\n  -webkit-transform: scale(1);\n  -ms-transform: scale(1);\n  transform: scale(1);\n  opacity: 1;\n}\n\n.to-below .effeckt-content {\n  -webkit-transform: scale(0.7);\n  -ms-transform: scale(0.7);\n  transform: scale(0.7);\n  opacity: 0;\n}\n\n.to-above .effeckt-content {\n  -webkit-transform: scale(1.3);\n  -ms-transform: scale(1.3);\n  transform: scale(1.3);\n  opacity: 0;\n}\n\n.slide-in-top .effeckt-content {\n  -webkit-transform: translate3d(0, -100%, 0);\n  -ms-transform: translate3d(0, -100%, 0);\n  transform: translate3d(0, -100%, 0);\n  opacity: 0;\n}\n\n.effeckt-show.slide-in-top .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n  -ms-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n.slide-in-right .effeckt-content {\n  -webkit-transform: translate3d(30%, 0, 0);\n  -ms-transform: translate3d(30%, 0, 0);\n  transform: translate3d(30%, 0, 0);\n  opacity: 0;\n}\n\n.effeckt-show.slide-in-right .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n  -ms-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n.slide-in-bottom .effeckt-content {\n  -webkit-transform: translate3d(0, 30%, 0);\n  -ms-transform: translate3d(0, 30%, 0);\n  transform: translate3d(0, 30%, 0);\n  opacity: 0;\n}\n\n.effeckt-show.slide-in-bottom .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n  -ms-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n.slide-in-left .effeckt-content {\n  -webkit-transform: translate3d(-30%, 0, 0);\n  -ms-transform: translate3d(-30%, 0, 0);\n  transform: translate3d(-30%, 0, 0);\n  opacity: 0;\n}\n\n.effeckt-show.slide-in-left .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n  -ms-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n.sticky-up {\n  top: 0;\n  -webkit-transform: translate(-50%, 0);\n  -ms-transform: translate(-50%, 0);\n  transform: translate(-50%, 0);\n}\n\n.sticky-up .effeckt-content {\n  -webkit-transform: translate3d(0, -100%, 0);\n  -ms-transform: translate3d(0, -100%, 0);\n  transform: translate3d(0, -100%, 0);\n  opacity: 0;\n}\n\n.effeckt-show.sticky-up .effeckt-content {\n  -webkit-transform: translate3d(0, 0, 0);\n  -ms-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n.slip-in-from-top ~ [data-effeckt-page],\n.slip-in-from-top ~ .effeckt-overlay {\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  -webkit-transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  transform-origin: 50% 100%;\n}\n\n.slip-in-from-top .effeckt-content {\n  -webkit-transform: translateY(-200%);\n  -ms-transform: translateY(-200%);\n  transform: translateY(-200%);\n  opacity: 0;\n}\n\n.effeckt-show.slip-in-from-top ~ [data-effeckt-page],\n.effeckt-show.slip-in-from-top ~ .effeckt-overlay {\n  -webkit-animation: OpenTop 300ms forwards ease-in;\n  animation: OpenTop 300ms forwards ease-in;\n}\n\n.effeckt-show.slip-in-from-top .effeckt-content {\n  -webkit-transform: translateY(0);\n  -ms-transform: translateY(0);\n  transform: translateY(0);\n  opacity: 1;\n}\n\n@-webkit-keyframes OpenTop {\n  50% {\n    -webkit-transform: rotateX(10deg);\n    transform: rotateX(10deg);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n}\n\n@keyframes OpenTop {\n  50% {\n    -webkit-transform: rotateX(10deg);\n    -ms-transform: rotateX(10deg);\n    transform: rotateX(10deg);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n}\n\n.slide-out-bottom .effeckt-content {\n  -webkit-transform: translateY(100%);\n  -ms-transform: translateY(100%);\n  transform: translateY(100%);\n  opacity: 0;\n}\n\n.slide-out-top .effeckt-content {\n  -webkit-transform: translateY(-100%);\n  -ms-transform: translateY(-100%);\n  transform: translateY(-100%);\n  opacity: 0;\n}\n\n.slide-out-right .effeckt-content {\n  -webkit-transform: translateX(100%);\n  -ms-transform: translateX(100%);\n  transform: translateX(100%);\n  opacity: 0;\n}\n\n.slide-out-left .effeckt-content {\n  -webkit-transform: translateX(-100%);\n  -ms-transform: translateX(-100%);\n  transform: translateX(-100%);\n  opacity: 0;\n}\n\n.flip-horizontal-3D {\n  -webkit-perspective: 600px;\n  -ms-perspective: 600px;\n  -o-perspective: 600px;\n  perspective: 600px;\n}\n\n.flip-horizontal-3D .effeckt-content {\n  -webkit-transform: rotateY(-70deg);\n  -ms-transform: rotateY(-70deg);\n  transform: rotateY(-70deg);\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  opacity: 0;\n}\n\n.effeckt-show.flip-horizontal-3D .effeckt-content {\n  -webkit-transform: rotateY(0deg);\n  -ms-transform: rotateY(0deg);\n  transform: rotateY(0deg);\n  opacity: 1;\n}\n\n.flip-vertical-3D {\n  -webkit-perspective: 600px;\n  -ms-perspective: 600px;\n  -o-perspective: 600px;\n  perspective: 600px;\n}\n\n.flip-vertical-3D .effeckt-content {\n  -webkit-transform: rotateX(-70deg);\n  -ms-transform: rotateX(-70deg);\n  transform: rotateX(-70deg);\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  opacity: 0;\n}\n\n.effeckt-show.flip-vertical-3D .effeckt-content {\n  -webkit-transform: rotateX(0deg);\n  -ms-transform: rotateX(0deg);\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n.sign-3D {\n  -webkit-perspective: 600px;\n  -ms-perspective: 600px;\n  -o-perspective: 600px;\n  perspective: 600px;\n}\n\n.sign-3D .effeckt-content {\n  -webkit-transform: rotateX(-60deg);\n  -ms-transform: rotateX(-60deg);\n  transform: rotateX(-60deg);\n  -webkit-transform-origin: 50% 0;\n  -ms-transform-origin: 50% 0;\n  transform-origin: 50% 0;\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  opacity: 0;\n}\n\n.effeckt-show.sign-3D .effeckt-content {\n  -webkit-transform: rotateX(0deg);\n  -ms-transform: rotateX(0deg);\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n.slit-3D {\n  -webkit-perspective: 600px;\n  -ms-perspective: 600px;\n  -o-perspective: 600px;\n  perspective: 600px;\n}\n\n.slit-3D .effeckt-content {\n  -webkit-transform: translateZ(-3000px) rotateY(90deg);\n  -ms-transform: translateZ(-3000px) rotateY(90deg);\n  transform: translateZ(-3000px) rotateY(90deg);\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  opacity: 0;\n}\n\n.effeckt-show.slit-3D .effeckt-content {\n  -webkit-animation: modalSlit 0.7s forwards ease-out;\n  animation: modalSlit 0.7s forwards ease-out;\n}\n\n@-webkit-keyframes modalSlit {\n  50% {\n    -webkit-transform: translateZ(-250px) rotateY(89deg);\n    transform: translateZ(-250px) rotateY(89deg);\n    opacity: 0.75;\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  100% {\n    -webkit-transform: translateZ(0) rotateY(0deg);\n    transform: translateZ(0) rotateY(0deg);\n    opacity: 1;\n  }\n}\n\n@keyframes modalSlit {\n  50% {\n    -webkit-transform: translateZ(-250px) rotateY(89deg);\n    -ms-transform: translateZ(-250px) rotateY(89deg);\n    transform: translateZ(-250px) rotateY(89deg);\n    opacity: 0.75;\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n\n  100% {\n    -webkit-transform: translateZ(0) rotateY(0deg);\n    -ms-transform: translateZ(0) rotateY(0deg);\n    transform: translateZ(0) rotateY(0deg);\n    opacity: 1;\n  }\n}\n\n.rotate-from-bottom-3D {\n  -webkit-perspective: 600px;\n  -ms-perspective: 600px;\n  -o-perspective: 600px;\n  perspective: 600px;\n}\n\n.rotate-from-bottom-3D .effeckt-content {\n  -webkit-transform: translateY(100%) rotateX(90deg);\n  -ms-transform: translateY(100%) rotateX(90deg);\n  transform: translateY(100%) rotateX(90deg);\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  -webkit-transform-origin: 0 100%;\n  -ms-transform-origin: 0 100%;\n  transform-origin: 0 100%;\n  opacity: 0;\n}\n\n.effeckt-show.rotate-from-bottom-3D .effeckt-content {\n  -webkit-transform: translateY(0%) rotateX(0deg);\n  -ms-transform: translateY(0%) rotateX(0deg);\n  transform: translateY(0%) rotateX(0deg);\n  opacity: 1;\n}\n\n.rotate-from-left-3D {\n  -webkit-perspective: 600px;\n  -ms-perspective: 600px;\n  -o-perspective: 600px;\n  perspective: 600px;\n}\n\n.rotate-from-left-3D .effeckt-content {\n  -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n  -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n  transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  -webkit-transform-origin: 0 100%;\n  -ms-transform-origin: 0 100%;\n  transform-origin: 0 100%;\n  opacity: 0;\n}\n\n.effeckt-show.rotate-from-left-3D .effeckt-content {\n  -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);\n  -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);\n  transform: translateZ(0px) translateX(0%) rotateY(0deg);\n  opacity: 1;\n}\n\n.let-me-in ~ [data-effeckt-page] {\n  transition: 300ms;\n}\n\n.let-me-in ~ [data-effeckt-page],\n.let-me-in ~ .effeckt-overlay {\n  -webkit-transform-origin: 50% 0%;\n  -ms-transform-origin: 50% 0%;\n  transform-origin: 50% 0%;\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n}\n\n.let-me-in .effeckt-content {\n  opacity: 0;\n  -webkit-transform: translateY(200%);\n  -ms-transform: translateY(200%);\n  transform: translateY(200%);\n}\n\n.effeckt-show.let-me-in ~ [data-effeckt-page],\n.effeckt-show.let-me-in ~ .effeckt-overlay {\n  -webkit-transform: rotateX(-2deg);\n  -ms-transform: rotateX(-2deg);\n  transform: rotateX(-2deg);\n  opacity: 1;\n}\n\n.effeckt-show.let-me-in .effeckt-content {\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  opacity: 1;\n}\n\n.make-way {\n  -webkit-perspective: 600px;\n  -ms-perspective: 600px;\n  -o-perspective: 600px;\n  perspective: 600px;\n}\n\n.make-way ~ [data-effeckt-page] {\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  -webkit-transform-origin: 0% 50%;\n  -ms-transform-origin: 0% 50%;\n  transform-origin: 0% 50%;\n}\n\n.make-way .effeckt-content {\n  -webkit-transform: translateX(200%);\n  -ms-transform: translateX(200%);\n  transform: translateX(200%);\n  opacity: 0;\n}\n\n.effeckt-show.make-way ~ [data-effeckt-page] {\n  -webkit-animation: makeWay 300ms forwards ease-in;\n  animation: makeWay 300ms forwards ease-in;\n  overflow: visible;\n}\n\n.effeckt-show.make-way .effeckt-content {\n  -webkit-transform: translateX(0);\n  -ms-transform: translateX(0);\n  transform: translateX(0);\n  opacity: 1;\n}\n\n@-webkit-keyframes makeWay {\n  50% {\n    -webkit-transform: translateZ(-50px) rotateY(5deg);\n    transform: translateZ(-50px) rotateY(5deg);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n\n  100% {\n    -webkit-transform: translateZ(-200px);\n    transform: translateZ(-200px);\n  }\n}\n\n@keyframes makeWay {\n  50% {\n    -webkit-transform: translateZ(-50px) rotateY(5deg);\n    -ms-transform: translateZ(-50px) rotateY(5deg);\n    transform: translateZ(-50px) rotateY(5deg);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n\n  100% {\n    -webkit-transform: translateZ(-200px);\n    -ms-transform: translateZ(-200px);\n    transform: translateZ(-200px);\n  }\n}\n\n.deep-content .effeckt-content {\n  -webkit-transform: scale(0.7);\n  -ms-transform: scale(0.7);\n  transform: scale(0.7);\n  opacity: 0;\n}\n\n.deep-content ~ [data-effeckt-page] {\n  -webkit-transform: scale(1);\n  -ms-transform: scale(1);\n  transform: scale(1);\n  transition: 300ms;\n  height: 100%;\n  overflow: hidden;\n}\n\n.effeckt-show.deep-content ~ [data-effeckt-page] {\n  -webkit-transform: scale(0.85);\n  -ms-transform: scale(0.85);\n  transform: scale(0.85);\n  -webkit-filter: blur(3px);\n  filter: blur(3px);\n}\n\n.effeckt-show.deep-content .effeckt-content {\n  -webkit-transform: scale(1.1);\n  -ms-transform: scale(1.1);\n  transform: scale(1.1);\n  opacity: 1;\n}\n\n.newspaper .effeckt-content {\n  -webkit-transform: scale(0.5) rotate(720deg);\n  -ms-transform: scale(0.5) rotate(720deg);\n  transform: scale(0.5) rotate(720deg);\n  opacity: 0;\n}\n\n.effeckt-show.newspaper .effeckt-content {\n  -webkit-transform: scale(1) rotate(0deg);\n  -ms-transform: scale(1) rotate(0deg);\n  transform: scale(1) rotate(0deg);\n  opacity: 1;\n}\n\n.side-fall {\n  -webkit-perspective: 600px;\n  -ms-perspective: 600px;\n  -o-perspective: 600px;\n  perspective: 600px;\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n}\n\n.side-fall .effeckt-content {\n  transition-timing-function: ease-out;\n  -webkit-transform: translateZ(600px) translateX(30%) rotate(10deg);\n  -ms-transform: translateZ(600px) translateX(30%) rotate(10deg);\n  transform: translateZ(600px) translateX(30%) rotate(10deg);\n  opacity: 0;\n}\n\n.effeckt-show.side-fall .effeckt-content {\n  transition-timing-function: ease-in;\n  -webkit-transform: translateZ(0) translateX(0) rotate(0deg);\n  -ms-transform: translateZ(0) translateX(0) rotate(0deg);\n  transform: translateZ(0) translateX(0) rotate(0deg);\n  opacity: 1;\n}\n\n.fade-in .effeckt-content {\n  opacity: 0;\n}\n\n.effeckt-show.fade-in .effeckt-content {\n  opacity: 1;\n}\n\n.effeckt-show.blur ~ [data-effeckt-page] {\n  -webkit-filter: blur(3px);\n  filter: blur(3px);\n}\n\n.blur .effeckt-content {\n  opacity: 0;\n}\n\n.effeckt-show.blur ~ [data-effeckt-page] {\n  transition: all 300ms ease;\n}\n\n.effeckt-show.blur .effeckt-content {\n  opacity: 1;\n}\n\n.tilt-fall .effeckt-content {\n  -webkit-transform: translateY(100%) rotate(-25deg);\n  -ms-transform: translateY(100%) rotate(-25deg);\n  transform: translateY(100%) rotate(-25deg);\n  opacity: 0;\n}\n\n.shake .effeckt-content {\n  opacity: 0;\n}\n\n.effeckt-show.shake .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: shake;\n  animation-name: shake;\n}\n\n@-webkit-keyframes shake {\n  0%, 100% {\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n\n  10%, 30%, 50%, 70%, 90% {\n    -webkit-transform: translateX(-10px);\n    transform: translateX(-10px);\n  }\n\n  20%, 40%, 60%, 80% {\n    -webkit-transform: translateX(10px);\n    transform: translateX(10px);\n  }\n}\n\n@keyframes shake {\n  0%, 100% {\n    -webkit-transform: translateX(0);\n    -ms-transform: translateX(0);\n    transform: translateX(0);\n  }\n\n  10%, 30%, 50%, 70%, 90% {\n    -webkit-transform: translateX(-10px);\n    -ms-transform: translateX(-10px);\n    transform: translateX(-10px);\n  }\n\n  20%, 40%, 60%, 80% {\n    -webkit-transform: translateX(10px);\n    -ms-transform: translateX(10px);\n    transform: translateX(10px);\n  }\n}\n\n.bounce .effeckt-content {\n  opacity: 0;\n}\n\n.effeckt-show.bounce .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: bounce;\n  animation-name: bounce;\n}\n\n@-webkit-keyframes bounce {\n  0%, 20%, 50%, 80%, 100% {\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n  }\n\n  40% {\n    -webkit-transform: translateY(-30px);\n    transform: translateY(-30px);\n  }\n\n  60% {\n    -webkit-transform: translateY(-15px);\n    transform: translateY(-15px);\n  }\n}\n\n@keyframes bounce {\n  0%, 20%, 50%, 80%, 100% {\n    -webkit-transform: translateY(0);\n    -ms-transform: translateY(0);\n    transform: translateY(0);\n  }\n\n  40% {\n    -webkit-transform: translateY(-30px);\n    -ms-transform: translateY(-30px);\n    transform: translateY(-30px);\n  }\n\n  60% {\n    -webkit-transform: translateY(-15px);\n    -ms-transform: translateY(-15px);\n    transform: translateY(-15px);\n  }\n}\n\n.pulse .effeckt-content {\n  opacity: 0;\n}\n\n.effeckt-show.pulse .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: pulse;\n  animation-name: pulse;\n}\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(1.1);\n    transform: scale(1.1);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n}\n\n@keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n    -ms-transform: scale(1);\n    transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(1.1);\n    -ms-transform: scale(1.1);\n    transform: scale(1.1);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n    -ms-transform: scale(1);\n    transform: scale(1);\n  }\n}\n\n.wobble .effeckt-content {\n  opacity: 0;\n}\n\n.effeckt-show.wobble .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: wobble;\n  animation-name: wobble;\n}\n\n@-webkit-keyframes wobble {\n  0% {\n    -webkit-transform: translateX(0%);\n    transform: translateX(0%);\n  }\n\n  15% {\n    -webkit-transform: translateX(-25%) rotate(-5deg);\n    transform: translateX(-25%) rotate(-5deg);\n  }\n\n  30% {\n    -webkit-transform: translateX(20%) rotate(3deg);\n    transform: translateX(20%) rotate(3deg);\n  }\n\n  45% {\n    -webkit-transform: translateX(-15%) rotate(-3deg);\n    transform: translateX(-15%) rotate(-3deg);\n  }\n\n  60% {\n    -webkit-transform: translateX(10%) rotate(2deg);\n    transform: translateX(10%) rotate(2deg);\n  }\n\n  75% {\n    -webkit-transform: translateX(-5%) rotate(-1deg);\n    transform: translateX(-5%) rotate(-1deg);\n  }\n\n  100% {\n    -webkit-transform: translateX(0%);\n    transform: translateX(0%);\n  }\n}\n\n@keyframes wobble {\n  0% {\n    -webkit-transform: translateX(0%);\n    -ms-transform: translateX(0%);\n    transform: translateX(0%);\n  }\n\n  15% {\n    -webkit-transform: translateX(-25%) rotate(-5deg);\n    -ms-transform: translateX(-25%) rotate(-5deg);\n    transform: translateX(-25%) rotate(-5deg);\n  }\n\n  30% {\n    -webkit-transform: translateX(20%) rotate(3deg);\n    -ms-transform: translateX(20%) rotate(3deg);\n    transform: translateX(20%) rotate(3deg);\n  }\n\n  45% {\n    -webkit-transform: translateX(-15%) rotate(-3deg);\n    -ms-transform: translateX(-15%) rotate(-3deg);\n    transform: translateX(-15%) rotate(-3deg);\n  }\n\n  60% {\n    -webkit-transform: translateX(10%) rotate(2deg);\n    -ms-transform: translateX(10%) rotate(2deg);\n    transform: translateX(10%) rotate(2deg);\n  }\n\n  75% {\n    -webkit-transform: translateX(-5%) rotate(-1deg);\n    -ms-transform: translateX(-5%) rotate(-1deg);\n    transform: translateX(-5%) rotate(-1deg);\n  }\n\n  100% {\n    -webkit-transform: translateX(0%);\n    -ms-transform: translateX(0%);\n    transform: translateX(0%);\n  }\n}\n\n.swing .effeckt-content {\n  -webkit-transform-origin: 50% 0%;\n  -ms-transform-origin: 50% 0%;\n  transform-origin: 50% 0%;\n  opacity: 0;\n}\n\n.effeckt-show.swing .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: swing;\n  animation-name: swing;\n}\n\n@-webkit-keyframes swing {\n  20% {\n    -webkit-transform: rotate(15deg);\n    transform: rotate(15deg);\n  }\n\n  40% {\n    -webkit-transform: rotate(-10deg);\n    transform: rotate(-10deg);\n  }\n\n  60% {\n    -webkit-transform: rotate(5deg);\n    transform: rotate(5deg);\n  }\n\n  80% {\n    -webkit-transform: rotate(-5deg);\n    transform: rotate(-5deg);\n  }\n\n  100% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n}\n\n@keyframes swing {\n  20% {\n    -webkit-transform: rotate(15deg);\n    -ms-transform: rotate(15deg);\n    transform: rotate(15deg);\n  }\n\n  40% {\n    -webkit-transform: rotate(-10deg);\n    -ms-transform: rotate(-10deg);\n    transform: rotate(-10deg);\n  }\n\n  60% {\n    -webkit-transform: rotate(5deg);\n    -ms-transform: rotate(5deg);\n    transform: rotate(5deg);\n  }\n\n  80% {\n    -webkit-transform: rotate(-5deg);\n    -ms-transform: rotate(-5deg);\n    transform: rotate(-5deg);\n  }\n\n  100% {\n    -webkit-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n}\n\n.tada .effeckt-content {\n  opacity: 0;\n}\n\n.effeckt-show.tada .effeckt-content {\n  opacity: 1;\n  -webkit-animation-name: tada;\n  animation-name: tada;\n}\n\n@-webkit-keyframes tada {\n  0% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n\n  10%, 20% {\n    -webkit-transform: scale(0.9) rotate(-3deg);\n    transform: scale(0.9) rotate(-3deg);\n  }\n\n  30%, 50%, 70%, 90% {\n    -webkit-transform: scale(1.1) rotate(3deg);\n    transform: scale(1.1) rotate(3deg);\n  }\n\n  40%, 60%, 80% {\n    -webkit-transform: scale(1.1) rotate(-3deg);\n    transform: scale(1.1) rotate(-3deg);\n  }\n\n  100% {\n    -webkit-transform: scale(1) rotate(0);\n    transform: scale(1) rotate(0);\n  }\n}\n\n@keyframes tada {\n  0% {\n    -webkit-transform: scale(1);\n    -ms-transform: scale(1);\n    transform: scale(1);\n  }\n\n  10%, 20% {\n    -webkit-transform: scale(0.9) rotate(-3deg);\n    -ms-transform: scale(0.9) rotate(-3deg);\n    transform: scale(0.9) rotate(-3deg);\n  }\n\n  30%, 50%, 70%, 90% {\n    -webkit-transform: scale(1.1) rotate(3deg);\n    -ms-transform: scale(1.1) rotate(3deg);\n    transform: scale(1.1) rotate(3deg);\n  }\n\n  40%, 60%, 80% {\n    -webkit-transform: scale(1.1) rotate(-3deg);\n    -ms-transform: scale(1.1) rotate(-3deg);\n    transform: scale(1.1) rotate(-3deg);\n  }\n\n  100% {\n    -webkit-transform: scale(1) rotate(0);\n    -ms-transform: scale(1) rotate(0);\n    transform: scale(1) rotate(0);\n  }\n}"
  },
  {
    "path": "css/modules/off-screen-nav.css",
    "content": ".effeckt-off-screen-nav ~ [data-effeckt-page].effeckt-page-active:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  background: rgba(0, 0, 0, 0.2);\n  opacity: 0;\n  visibility: hidden;\n  transition: 500ms; }\n.effeckt-off-screen-nav.effeckt-show ~ [data-effeckt-page].effeckt-page-active:after {\n  opacity: 1;\n  visibility: visible; }\n\n.effeckt-off-screen-nav-left-overlay {\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%);\n  transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); }\n  .effeckt-off-screen-nav-left-overlay.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n\n.effeckt-off-screen-nav-left-push {\n  -webkit-transform: translateX(-12rem);\n      -ms-transform: translateX(-12rem);\n          transform: translateX(-12rem);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-left-push.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-left-push.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n      -webkit-transform: translateX(12rem);\n          -ms-transform: translateX(12rem);\n              transform: translateX(12rem); }\n  .effeckt-off-screen-nav-left-push ~ [data-effeckt-page].effeckt-page-active {\n    transition: 500ms;\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n\n.effeckt-off-screen-nav-left-reveal {\n  width: 0px;\n  -webkit-transform: translate3D(0, 0, 0);\n      -ms-transform: translate3D(0, 0, 0);\n          transform: translate3D(0, 0, 0);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-left-reveal h4 {\n    width: 10rem; }\n  .effeckt-off-screen-nav-left-reveal.effeckt-show {\n    width: 12rem;\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-left-reveal.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateX(12rem);\n          -ms-transform: translateX(12rem);\n              transform: translateX(12rem); }\n  .effeckt-off-screen-nav-left-reveal ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-left-squeeze {\n  width: 40%;\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-left-squeeze.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-left-squeeze.effeckt-show ~ [data-effeckt-page] {\n      width: 60%; }\n  .effeckt-off-screen-nav-left-squeeze ~ [data-effeckt-page] {\n    float: right;\n    transition: width 500ms;\n    max-width: none; }\n\n.effeckt-off-screen-nav-right-overlay {\n  right: 0;\n  left: auto;\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%);\n  transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); }\n  .effeckt-off-screen-nav-right-overlay.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n\n.effeckt-off-screen-nav-right-push {\n  left: auto;\n  right: 0;\n  -webkit-transform: translateX(12rem);\n      -ms-transform: translateX(12rem);\n          transform: translateX(12rem);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-push.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-right-push.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateX(-12rem);\n          -ms-transform: translateX(-12rem);\n              transform: translateX(-12rem); }\n  .effeckt-off-screen-nav-right-push ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-right-reveal {\n  width: 0;\n  overflow: hidden;\n  left: auto;\n  right: 0;\n  -webkit-transform: translate3D(0, 0, 0);\n      -ms-transform: translate3D(0, 0, 0);\n          transform: translate3D(0, 0, 0);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-reveal h4 {\n    width: 10rem;\n    position: absolute;\n    top: 0px;\n    right: 0; }\n  .effeckt-off-screen-nav-right-reveal ul {\n    width: 12rem;\n    position: absolute;\n    top: 3.2rem;\n    right: 0; }\n  .effeckt-off-screen-nav-right-reveal.effeckt-show {\n    width: 12rem; }\n    .effeckt-off-screen-nav-right-reveal.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateX(-12rem);\n          -ms-transform: translateX(-12rem);\n              transform: translateX(-12rem); }\n  .effeckt-off-screen-nav-right-reveal ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-right-squeeze {\n  left: auto;\n  right: 0;\n  width: 40%;\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-squeeze.effeckt-show {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0); }\n    .effeckt-off-screen-nav-right-squeeze.effeckt-show ~ [data-effeckt-page] {\n      width: 60%; }\n  .effeckt-off-screen-nav-right-squeeze ~ [data-effeckt-page] {\n    float: left;\n    transition: width 500ms;\n    max-width: none; }\n\n.effeckt-off-screen-nav-left-rotate {\n  -webkit-transform-origin: 100% 50%;\n      -ms-transform-origin: 100% 50%;\n          transform-origin: 100% 50%;\n  transition: 500ms;\n  -webkit-transform: translateX(-100%) scale(1.01) rotateY(-30deg);\n          transform: translateX(-100%) scale(1.01) rotateY(-30deg); }\n  .effeckt-off-screen-nav-left-rotate ~ [data-effeckt-page].effeckt-page-active {\n    -webkit-transform-origin: 0 50%;\n        -ms-transform-origin: 0 50%;\n            transform-origin: 0 50%;\n    transition: 500ms; }\n  .effeckt-off-screen-nav-left-rotate ~ .effeckt-overlay {\n    z-index: 900;\n    visibility: visible;\n    opacity: 1; }\n  .effeckt-off-screen-nav-left-rotate.effeckt-show {\n    -webkit-transform: none;\n        -ms-transform: none;\n            transform: none; }\n    .effeckt-off-screen-nav-left-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n      -webkit-transform: translateX(260px) rotateY(15deg);\n              transform: translateX(260px) rotateY(15deg);\n      overflow: hidden; }\n      .effeckt-off-screen-nav-left-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active:after {\n        background: none; }\n    .effeckt-off-screen-nav-left-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-off-screen-nav-top-overlay {\n  width: 100%;\n  bottom: auto;\n  transition: 500ms;\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%); }\n  .effeckt-off-screen-nav-top-overlay.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n\n.effeckt-off-screen-nav-bottom-overlay {\n  width: 100%;\n  top: auto;\n  transition: 500ms;\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%); }\n  .effeckt-off-screen-nav-bottom-overlay.effeckt-show {\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n\n.effeckt-off-screen-nav-top-bounce {\n  width: 100%;\n  bottom: auto;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-top-bounce.effeckt-show {\n    visibility: visible;\n    -webkit-animation: navFromTopBounceIn 500ms both ease;\n            animation: navFromTopBounceIn 500ms both ease; }\n  .effeckt-off-screen-nav-top-bounce.effeckt-hide {\n    -webkit-animation: navFromTopBounceOut 500ms both ease;\n            animation: navFromTopBounceOut 500ms both ease; }\n\n.effeckt-off-screen-nav-top-bounce-out {\n  width: 100%;\n  bottom: auto;\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-top-bounce-out.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-top-bounce-out.effeckt-hide {\n    -webkit-animation: navFromTopBounceOut 500ms both ease;\n            animation: navFromTopBounceOut 500ms both ease; }\n\n@-webkit-keyframes navFromTopBounceIn {\n  0% {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); }\n\n  20% {\n    padding-top: 0px;\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%); }\n\n  60% {\n    padding-top: 20px; }\n\n  100% {\n    padding-top: 0; } }\n\n@keyframes navFromTopBounceIn {\n  0% {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); }\n\n  20% {\n    padding-top: 0px;\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%); }\n\n  60% {\n    padding-top: 20px; }\n\n  100% {\n    padding-top: 0; } }\n\n@-webkit-keyframes navFromTopBounceOut {\n  0% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-top: 0px; }\n\n  40% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-top: 20px; }\n\n  80% {\n    padding-top: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@keyframes navFromTopBounceOut {\n  0% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-top: 0px; }\n\n  40% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-top: 20px; }\n\n  80% {\n    padding-top: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n.effeckt-off-screen-nav-bottom-bounce {\n  width: 100%;\n  top: auto;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-bottom-bounce.effeckt-show {\n    -webkit-animation: navFromBottomBounceIn 500ms both ease;\n            animation: navFromBottomBounceIn 500ms both ease; }\n  .effeckt-off-screen-nav-bottom-bounce.effeckt-hide {\n    -webkit-animation: navFromBottomBounceOut 500ms both ease;\n            animation: navFromBottomBounceOut 500ms both ease; }\n\n.effeckt-off-screen-nav-bottom-bounce-out {\n  width: 100%;\n  top: auto;\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-bottom-bounce-out.effeckt-show {\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-bottom-bounce-out.effeckt-hide {\n    -webkit-animation: navFromBottomBounceOut 500ms both ease;\n            animation: navFromBottomBounceOut 500ms both ease; }\n\n@-webkit-keyframes navFromBottomBounceIn {\n  0% {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); }\n\n  20% {\n    padding-bottom: 0px;\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%); }\n\n  60% {\n    padding-bottom: 20px; }\n\n  100% {\n    padding-bottom: 0; } }\n\n@keyframes navFromBottomBounceIn {\n  0% {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); }\n\n  20% {\n    padding-bottom: 0px;\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%); }\n\n  60% {\n    padding-bottom: 20px; }\n\n  100% {\n    padding-bottom: 0; } }\n\n@-webkit-keyframes navFromBottomBounceOut {\n  0% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-bottom: 0px; }\n\n  40% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-bottom: 20px; }\n\n  80% {\n    padding-bottom: 0; }\n\n  90%, 100% {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@keyframes navFromBottomBounceOut {\n  0% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-bottom: 0px; }\n\n  40% {\n    -webkit-transform: translateY(0%);\n            transform: translateY(0%);\n    padding-bottom: 20px; }\n\n  80% {\n    padding-bottom: 0; }\n\n  90%, 100% {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n.effeckt-off-screen-nav-push-top {\n  width: 100%;\n  bottom: auto;\n  transition: 500ms;\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%); }\n  .effeckt-off-screen-nav-push-top.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n    .effeckt-off-screen-nav-push-top.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateY(12rem);\n          -ms-transform: translateY(12rem);\n              transform: translateY(12rem); }\n  .effeckt-off-screen-nav-push-top ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-push-bottom {\n  width: 100%;\n  top: auto;\n  transition: 500ms;\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%); }\n  .effeckt-off-screen-nav-push-bottom.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n    .effeckt-off-screen-nav-push-bottom.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateY(-12rem);\n          -ms-transform: translateY(-12rem);\n              transform: translateY(-12rem); }\n  .effeckt-off-screen-nav-push-bottom ~ [data-effeckt-page] {\n    transition: 500ms; }\n\n.effeckt-off-screen-nav-right-rotate {\n  left: auto;\n  right: 0;\n  -webkit-transform-origin: 100% 50%;\n      -ms-transform-origin: 100% 50%;\n          transform-origin: 100% 50%;\n  transition: 500ms;\n  -webkit-transform: rotateY(30deg) translateX(100%) scale(1.01);\n          transform: rotateY(30deg) translateX(100%) scale(1.01); }\n  .effeckt-off-screen-nav-right-rotate ~ [data-effeckt-page] {\n    -webkit-transform-origin: 100% 50%;\n        -ms-transform-origin: 100% 50%;\n            transform-origin: 100% 50%;\n    transition: 500ms; }\n  .effeckt-off-screen-nav-right-rotate ~ .effeckt-overlay {\n    z-index: 900;\n    visibility: visible;\n    opacity: 1; }\n  .effeckt-off-screen-nav-right-rotate.effeckt-show {\n    -webkit-transform: none;\n        -ms-transform: none;\n            transform: none; }\n    .effeckt-off-screen-nav-right-rotate.effeckt-show ~ [data-effeckt-page] {\n      -webkit-transform: translateX(-260px) rotateY(-15deg);\n              transform: translateX(-260px) rotateY(-15deg);\n      overflow: hidden; }\n      .effeckt-off-screen-nav-right-rotate.effeckt-show ~ [data-effeckt-page]:after {\n        background: none; }\n    .effeckt-off-screen-nav-right-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-off-screen-nav-top-card-deck {\n  -webkit-perspective: 800px;\n          perspective: 800px;\n  bottom: auto;\n  -webkit-transform: translateY(-100%);\n      -ms-transform: translateY(-100%);\n          transform: translateY(-100%);\n  width: 100%;\n  overflow: visible;\n  transition: -webkit-transform 250ms;\n  transition: transform 250ms; }\n  .effeckt-off-screen-nav-top-card-deck.effeckt-show {\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-top-card-deck h4 {\n    position: relative;\n    z-index: 300;\n    -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform-origin: 50% 0%;\n        -ms-transform-origin: 50% 0%;\n            transform-origin: 50% 0%;\n    transition: all 250ms ease-out;\n    display: block; }\n    .effeckt-off-screen-nav-top-card-deck h4:active {\n      -webkit-transform: rotateX(60deg);\n              transform: rotateX(60deg); }\n  .effeckt-off-screen-nav-top-card-deck ul {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    margin: 0; }\n    .effeckt-off-screen-nav-top-card-deck ul li {\n      transition: all 250ms ease-out;\n      position: absolute;\n      top: 0;\n      z-index: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: translateY(0px);\n          -ms-transform: translateY(0px);\n              transform: translateY(0px); }\n\n.effeckt-off-screen-nav-bottom-card-deck {\n  -webkit-perspective: 800px;\n          perspective: 800px;\n  top: auto;\n  -webkit-transform: translateY(100%);\n      -ms-transform: translateY(100%);\n          transform: translateY(100%);\n  width: 100%;\n  overflow: visible;\n  transition: -webkit-transform 250ms;\n  transition: transform 250ms; }\n  .effeckt-off-screen-nav-bottom-card-deck.effeckt-show {\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-bottom-card-deck h4 {\n    position: relative;\n    z-index: 300;\n    -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n    -webkit-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n    -webkit-transform-origin: 50% 100%;\n        -ms-transform-origin: 50% 100%;\n            transform-origin: 50% 100%;\n    transition: all 250ms ease-out;\n    display: block; }\n    .effeckt-off-screen-nav-bottom-card-deck h4:active {\n      -webkit-transform: rotateX(-60deg);\n              transform: rotateX(-60deg); }\n  .effeckt-off-screen-nav-bottom-card-deck ul {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    bottom: 0;\n    margin: 0; }\n    .effeckt-off-screen-nav-bottom-card-deck ul li {\n      transition: all 250ms ease-out;\n      position: absolute;\n      top: 0;\n      z-index: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-transform: translateY(300px);\n          -ms-transform: translateY(300px);\n              transform: translateY(300px); }\n\n.effeckt-off-screen-nav-left-bounce {\n  transition: 500ms;\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%); }\n  .effeckt-off-screen-nav-left-bounce.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateX(0%);\n        -ms-transform: translateX(0%);\n            transform: translateX(0%);\n    -webkit-animation: navFromLeftBounceIn 500ms both ease;\n            animation: navFromLeftBounceIn 500ms both ease; }\n  .effeckt-off-screen-nav-left-bounce.effeckt-hide {\n    -webkit-transform: translateX(-100%);\n        -ms-transform: translateX(-100%);\n            transform: translateX(-100%);\n    -webkit-animation: navFromLeftBounceOut 500ms both ease;\n            animation: navFromLeftBounceOut 500ms both ease; }\n\n@-webkit-keyframes navFromLeftBounceIn {\n  0% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); }\n\n  20% {\n    padding-left: 0px;\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  60% {\n    padding-left: 20px; }\n\n  100% {\n    padding-left: 0px; } }\n\n@keyframes navFromLeftBounceIn {\n  0% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); }\n\n  20% {\n    padding-left: 0px;\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  60% {\n    padding-left: 20px; }\n\n  100% {\n    padding-left: 0px; } }\n\n@-webkit-keyframes navFromLeftBounceOut {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-left: 0px; }\n\n  40% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-left: 20px; }\n\n  80% {\n    padding-left: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@keyframes navFromLeftBounceOut {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-left: 0px; }\n\n  40% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-left: 20px; }\n\n  80% {\n    padding-left: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n.effeckt-off-screen-nav-left-bounce-out {\n  -webkit-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n          transform: translateX(-100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-left-bounce-out.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-left-bounce-out.effeckt-hide {\n    -webkit-animation: navFromLeftBounceOut 500ms both ease;\n            animation: navFromLeftBounceOut 500ms both ease; }\n\n.effeckt-off-screen-nav-right-bounce {\n  left: auto;\n  right: 0;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-bounce.effeckt-show {\n    visibility: visible;\n    -webkit-animation: navFromRightBounceIn 500ms both ease;\n            animation: navFromRightBounceIn 500ms both ease; }\n  .effeckt-off-screen-nav-right-bounce.effeckt-hide {\n    -webkit-animation: navFromRightBounceOut 500ms both ease;\n            animation: navFromRightBounceOut 500ms both ease; }\n\n@-webkit-keyframes navFromRightBounceIn {\n  0% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); }\n\n  20% {\n    padding-right: 0px;\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  60% {\n    padding-right: 20px; }\n\n  100% {\n    padding-right: 0px; } }\n\n@keyframes navFromRightBounceIn {\n  0% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); }\n\n  20% {\n    padding-right: 0px;\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%); }\n\n  60% {\n    padding-right: 20px; }\n\n  100% {\n    padding-right: 0px; } }\n\n@-webkit-keyframes navFromRightBounceOut {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-right: 0px; }\n\n  40% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-right: 20px; }\n\n  80% {\n    padding-right: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@keyframes navFromRightBounceOut {\n  0% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-right: 0px; }\n\n  40% {\n    -webkit-transform: translateX(0%);\n            transform: translateX(0%);\n    padding-right: 20px; }\n\n  80% {\n    padding-right: 0px; }\n\n  90%, 100% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n.effeckt-off-screen-nav-right-bounce-out {\n  left: auto;\n  right: 0;\n  -webkit-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n          transform: translateX(100%);\n  transition: 500ms; }\n  .effeckt-off-screen-nav-right-bounce-out.effeckt-show {\n    visibility: visible;\n    -webkit-transform: translateY(0%);\n        -ms-transform: translateY(0%);\n            transform: translateY(0%); }\n  .effeckt-off-screen-nav-right-bounce-out.effeckt-hide {\n    -webkit-animation: navFromRightBounceOut 500ms both ease;\n            animation: navFromRightBounceOut 500ms both ease; }\n\n.effeckt-off-screen-nav-bottom-rotate {\n  top: auto;\n  width: 100%;\n  -webkit-transform-origin: 100% 50%;\n      -ms-transform-origin: 100% 50%;\n          transform-origin: 100% 50%;\n  transition: 500ms;\n  -webkit-transform: translateY(100%) scale(1.01) rotateX(-30deg);\n          transform: translateY(100%) scale(1.01) rotateX(-30deg); }\n  .effeckt-off-screen-nav-bottom-rotate ~ [data-effeckt-page].effeckt-page-active {\n    -webkit-transform-origin: 0% 100%;\n        -ms-transform-origin: 0% 100%;\n            transform-origin: 0% 100%;\n    transition: 500ms; }\n  .effeckt-off-screen-nav-bottom-rotate ~ .effeckt-overlay {\n    z-index: 900;\n    visibility: visible;\n    opacity: 1; }\n  .effeckt-off-screen-nav-bottom-rotate.effeckt-show {\n    -webkit-transform: none;\n        -ms-transform: none;\n            transform: none; }\n    .effeckt-off-screen-nav-bottom-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n      -webkit-transform: translateY(-260px) rotateX(15deg);\n              transform: translateY(-260px) rotateX(15deg);\n      overflow: hidden; }\n      .effeckt-off-screen-nav-bottom-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active:after {\n        background: none; }\n    .effeckt-off-screen-nav-bottom-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-off-screen-nav-top-rotate {\n  bottom: auto;\n  width: 100%;\n  -webkit-transform-origin: 50% 0%;\n      -ms-transform-origin: 50% 0%;\n          transform-origin: 50% 0%;\n  transition: 500ms;\n  -webkit-transform: translateY(-100%) scale(1.01) rotateX(30deg);\n          transform: translateY(-100%) scale(1.01) rotateX(30deg); }\n  .effeckt-off-screen-nav-top-rotate ~ [data-effeckt-page].effeckt-page-active {\n    -webkit-transform-origin: 100% 0%;\n        -ms-transform-origin: 100% 0%;\n            transform-origin: 100% 0%;\n    transition: 500ms; }\n  .effeckt-off-screen-nav-top-rotate ~ .effeckt-overlay {\n    z-index: 900;\n    visibility: visible;\n    opacity: 1; }\n  .effeckt-off-screen-nav-top-rotate.effeckt-show {\n    -webkit-transform: none;\n        -ms-transform: none;\n            transform: none; }\n    .effeckt-off-screen-nav-top-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n      -webkit-transform: translateY(260px) rotateX(-15deg);\n              transform: translateY(260px) rotateX(-15deg);\n      overflow: hidden; }\n      .effeckt-off-screen-nav-top-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active:after {\n        background: none; }\n    .effeckt-off-screen-nav-top-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%; }\n\n.effeckt-off-screen-nav-minimize-reaveal {\n  width: 100%;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-minimize-reaveal ~ [data-effeckt-page].effeckt-page-active {\n    transition: 500ms;\n    box-shadow: 0px 0px 50px #CACACA;\n    z-index: 1000; }\n  .effeckt-off-screen-nav-minimize-reaveal li, .effeckt-off-screen-nav-minimize-reaveal h4 {\n    transition: 500ms cubic-bezier(0.16, 0.86, 0.33, 0.97);\n    -webkit-transform: translateX(5%);\n        -ms-transform: translateX(5%);\n            transform: translateX(5%);\n    opacity: 0; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show h4 {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 500ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(1) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1125ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(2) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1250ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(3) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1375ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(4) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1500ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(5) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1625ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(6) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1750ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(7) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1875ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(8) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2000ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(9) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2125ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(10) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2250ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(11) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2375ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(12) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2500ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(13) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2625ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(14) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2750ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(15) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2875ms; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n    transition: 750ms cubic-bezier(0.16, 0.86, 0.33, 0.97);\n    -webkit-transform: translateX(50%) scale3d(0.5, 0.5, 1);\n            transform: translateX(50%) scale3d(0.5, 0.5, 1);\n    overflow: hidden; }\n  .effeckt-off-screen-nav-minimize-reaveal.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%; }\n\n.effeckt-off-screen-nav-minimize-flip {\n  width: 100%;\n  transition: 500ms; }\n  .effeckt-off-screen-nav-minimize-flip ~ [data-effeckt-page].effeckt-page-active {\n    transition: 500ms;\n    box-shadow: 0px 0px 50px #CACACA;\n    z-index: 1000; }\n  .effeckt-off-screen-nav-minimize-flip li, .effeckt-off-screen-nav-minimize-flip h4 {\n    transition: 500ms cubic-bezier(0.16, 0.86, 0.33, 0.97);\n    -webkit-transform: translateX(5%);\n        -ms-transform: translateX(5%);\n            transform: translateX(5%);\n    opacity: 0; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show h4 {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 500ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(1) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1125ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(2) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1250ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(3) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1375ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(4) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1500ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(5) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1625ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(6) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1750ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(7) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 1875ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(8) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2000ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(9) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2125ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(10) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2250ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(11) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2375ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(12) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2500ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(13) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2625ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(14) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2750ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show li:nth-child(15) {\n    -webkit-transform: translateX(0);\n        -ms-transform: translateX(0);\n            transform: translateX(0);\n    opacity: 1;\n    transition-delay: 2875ms; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show ~ [data-effeckt-page].effeckt-page-active {\n    transition: 750ms cubic-bezier(0.16, 0.86, 0.33, 0.97);\n    -webkit-transform: translateX(50%) rotateY(-15deg) scale3d(0.5, 0.5, 1);\n            transform: translateX(50%) rotateY(-15deg) scale3d(0.5, 0.5, 1);\n    overflow: hidden; }\n  .effeckt-off-screen-nav-minimize-flip.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%; }\n"
  },
  {
    "path": "css/modules/page-transitions.css",
    "content": "[data-effeckt-page] {\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  -webkit-overflow-scrolling: touch;\n  overflow-x: hidden;\n  visibility: hidden;\n  z-index: 0;\n  padding: 2rem 4rem 0;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n  display: none; }\n  [data-effeckt-page].effeckt-page-active {\n    display: block;\n    visibility: visible;\n    z-index: 10; }\n  [data-effeckt-page].effeckt-page-animating {\n    overflow: hidden;\n    z-index: 100;\n    position: absolute; }\n\n[data-effeckt-page].slide-from-left {\n  -webkit-animation: slideFromLeft 1000ms forwards ease-in-out;\n          animation: slideFromLeft 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-to-left {\n  -webkit-animation: slideToLeft 1000ms forwards ease-in-out;\n          animation: slideToLeft 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-from-right {\n  -webkit-animation: slideFromRight 1000ms forwards ease-in-out;\n          animation: slideFromRight 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-to-right {\n  -webkit-animation: slideToRight 1000ms forwards ease-in-out;\n          animation: slideToRight 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-from-top {\n  -webkit-animation: slideFromTop 1000ms forwards ease-in-out;\n          animation: slideFromTop 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-to-top {\n  -webkit-animation: slideToTop 1000ms forwards ease-in-out;\n          animation: slideToTop 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-from-bottom {\n  -webkit-animation: slideFromBottom 1000ms forwards ease-in-out;\n          animation: slideFromBottom 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].slide-to-bottom {\n  -webkit-animation: slideToBottom 1000ms forwards ease-in-out;\n          animation: slideToBottom 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-up-from-behind {\n  -webkit-animation: scaleUpFromBehind 1000ms forwards ease-in-out;\n          animation: scaleUpFromBehind 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-up-to-front {\n  -webkit-animation: scaleUpToFront 1000ms forwards ease-in-out;\n          animation: scaleUpToFront 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-to-behind {\n  -webkit-animation: scaleDownToBehind 1000ms forwards ease-in-out;\n          animation: scaleDownToBehind 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-from-front {\n  -webkit-animation: scaleDownFromFront 1000ms forwards ease-in-out;\n          animation: scaleDownFromFront 1000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-to-left {\n  -webkit-animation: scaleDownSlideToLeft 2000ms forwards ease-in-out;\n          animation: scaleDownSlideToLeft 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-from-right {\n  -webkit-animation: scaleDownSlideFromRight 2000ms forwards ease-in-out;\n          animation: scaleDownSlideFromRight 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-from-left {\n  -webkit-animation: scaleDownSlideFromLeft 2000ms forwards ease-in-out;\n          animation: scaleDownSlideFromLeft 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-to-right {\n  -webkit-animation: scaleDownSlideToRight 2000ms forwards ease-in-out;\n          animation: scaleDownSlideToRight 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-from-top {\n  -webkit-animation: scaleDownSlideFromTop 2000ms forwards ease-in-out;\n          animation: scaleDownSlideFromTop 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-to-bottom {\n  -webkit-animation: scaleDownSlideToBottom 2000ms forwards ease-in-out;\n          animation: scaleDownSlideToBottom 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-from-bottom {\n  -webkit-animation: scaleDownSlideFromBottom 2000ms forwards ease-in-out;\n          animation: scaleDownSlideFromBottom 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].scale-down-slide-to-top {\n  -webkit-animation: scaleDownSlideToTop 2000ms forwards ease-in-out;\n          animation: scaleDownSlideToTop 2000ms forwards ease-in-out; }\n\n[data-effeckt-page].rotate-to-behind {\n  -webkit-transform-origin: -50% 50%;\n      -ms-transform-origin: -50% 50%;\n          transform-origin: -50% 50%;\n  -webkit-animation: rotateToBehind 500ms both ease-in;\n          animation: rotateToBehind 500ms both ease-in; }\n\n[data-effeckt-page].rotate-to-front {\n  -webkit-transform-origin: 150% 50%;\n      -ms-transform-origin: 150% 50%;\n          transform-origin: 150% 50%;\n  -webkit-animation: rotateToFront 500ms both ease-out;\n          animation: rotateToFront 500ms both ease-out; }\n\n[data-effeckt-page].flip-to-right-front {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToRightBack 1000ms forwards ease;\n          animation: flipToRightBack 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-right-back {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToRight 1000ms forwards ease;\n          animation: flipToRight 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-left-front {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToLeftBack 1000ms forwards ease;\n          animation: flipToLeftBack 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-left-back {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToLeft 1000ms forwards ease;\n          animation: flipToLeft 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-top-front {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToTopBack 1000ms forwards ease;\n          animation: flipToTopBack 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-top-back {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToTop 1000ms forwards ease;\n          animation: flipToTop 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-bottom-front {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToBottomBack 1000ms forwards ease;\n          animation: flipToBottomBack 1000ms forwards ease; }\n\n[data-effeckt-page].flip-to-bottom-back {\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  -webkit-animation: flipToBottom 1000ms forwards ease;\n          animation: flipToBottom 1000ms forwards ease; }\n\n@-webkit-keyframes slideFromTop {\n  from {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@keyframes slideFromTop {\n  from {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@-webkit-keyframes slideToTop {\n  to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@keyframes slideToTop {\n  to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%); } }\n\n@-webkit-keyframes slideFromRight {\n  from {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@keyframes slideFromRight {\n  from {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@-webkit-keyframes slideToRight {\n  to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@keyframes slideToRight {\n  to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%); } }\n\n@-webkit-keyframes slideFromBottom {\n  from {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@keyframes slideFromBottom {\n  from {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@-webkit-keyframes slideToBottom {\n  to {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@keyframes slideToBottom {\n  to {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%); } }\n\n@-webkit-keyframes slideFromLeft {\n  from {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@keyframes slideFromLeft {\n  from {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@-webkit-keyframes slideToLeft {\n  to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@keyframes slideToLeft {\n  to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%); } }\n\n@-webkit-keyframes scaleUpFromBehind {\n  from {\n    opacity: 0;\n    -webkit-transform: scale(0.5);\n            transform: scale(0.5); } }\n\n@keyframes scaleUpFromBehind {\n  from {\n    opacity: 0;\n    -webkit-transform: scale(0.5);\n            transform: scale(0.5); } }\n\n@-webkit-keyframes scaleUpToFront {\n  to {\n    opacity: 0;\n    -webkit-transform: scale(1.3);\n            transform: scale(1.3); } }\n\n@keyframes scaleUpToFront {\n  to {\n    opacity: 0;\n    -webkit-transform: scale(1.3);\n            transform: scale(1.3); } }\n\n@-webkit-keyframes scaleDownToBehind {\n  to {\n    opacity: 0;\n    -webkit-transform: scale(0.5);\n            transform: scale(0.5); } }\n\n@keyframes scaleDownToBehind {\n  to {\n    opacity: 0;\n    -webkit-transform: scale(0.5);\n            transform: scale(0.5); } }\n\n@-webkit-keyframes scaleDownFromFront {\n  from {\n    opacity: 0;\n    -webkit-transform: scale(1.3);\n            transform: scale(1.3); }\n\n  to {\n    opacity: 1; } }\n\n@keyframes scaleDownFromFront {\n  from {\n    opacity: 0;\n    -webkit-transform: scale(1.3);\n            transform: scale(1.3); }\n\n  to {\n    opacity: 1; } }\n\n@-webkit-keyframes scaleDownSlideToLeft {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); } }\n\n@keyframes scaleDownSlideToLeft {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); } }\n\n@-webkit-keyframes scaleDownSlideFromRight {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateX(0);\n            transform: translateZ(0) translateX(0); } }\n\n@keyframes scaleDownSlideFromRight {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateX(0);\n            transform: translateZ(0) translateX(0); } }\n\n@-webkit-keyframes scaleDownSlideFromLeft {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateX(0%);\n            transform: translateZ(0) translateX(0%); } }\n\n@keyframes scaleDownSlideFromLeft {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(-200%);\n            transform: translateZ(-500px) translateX(-200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateX(0%);\n            transform: translateZ(0) translateX(0%); } }\n\n@-webkit-keyframes scaleDownSlideToRight {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); } }\n\n@keyframes scaleDownSlideToRight {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateX(200%);\n            transform: translateZ(-500px) translateX(200%); } }\n\n@-webkit-keyframes scaleDownSlideFromTop {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateY(0%);\n            transform: translateZ(0) translateY(0%); } }\n\n@keyframes scaleDownSlideFromTop {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateY(0%);\n            transform: translateZ(0) translateY(0%); } }\n\n@-webkit-keyframes scaleDownSlideToBottom {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); } }\n\n@keyframes scaleDownSlideToBottom {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); } }\n\n@-webkit-keyframes scaleDownSlideFromBottom {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateY(0%);\n            transform: translateZ(0) translateY(0%); } }\n\n@keyframes scaleDownSlideFromBottom {\n  0%, 25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(200%);\n            transform: translateZ(-500px) translateY(200%); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  100% {\n    opacity: 1;\n    -webkit-transform: translateZ(0) translateY(0%);\n            transform: translateZ(0) translateY(0%); } }\n\n@-webkit-keyframes scaleDownSlideToTop {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); } }\n\n@keyframes scaleDownSlideToTop {\n  25% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px);\n            transform: translateZ(-500px); }\n\n  75% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); }\n\n  100% {\n    opacity: 0.5;\n    -webkit-transform: translateZ(-500px) translateY(-200%);\n            transform: translateZ(-500px) translateY(-200%); } }\n\n@-webkit-keyframes rotateToBehind {\n  to {\n    opacity: 0;\n    -webkit-transform: translateZ(-500px) rotateY(90deg);\n            transform: translateZ(-500px) rotateY(90deg); } }\n\n@keyframes rotateToBehind {\n  to {\n    opacity: 0;\n    -webkit-transform: translateZ(-500px) rotateY(90deg);\n            transform: translateZ(-500px) rotateY(90deg); } }\n\n@-webkit-keyframes rotateToFront {\n  from {\n    opacity: 0;\n    -webkit-transform: translateZ(-500px) rotateY(-90deg);\n            transform: translateZ(-500px) rotateY(-90deg); } }\n\n@keyframes rotateToFront {\n  from {\n    opacity: 0;\n    -webkit-transform: translateZ(-500px) rotateY(-90deg);\n            transform: translateZ(-500px) rotateY(-90deg); } }\n\n@-webkit-keyframes flipToRight {\n  to {\n    -webkit-transform: rotateY(180deg);\n            transform: rotateY(180deg); } }\n\n@keyframes flipToRight {\n  to {\n    -webkit-transform: rotateY(180deg);\n            transform: rotateY(180deg); } }\n\n@-webkit-keyframes flipToRightBack {\n  from {\n    -webkit-transform: rotateY(-180deg);\n            transform: rotateY(-180deg); } }\n\n@keyframes flipToRightBack {\n  from {\n    -webkit-transform: rotateY(-180deg);\n            transform: rotateY(-180deg); } }\n\n@-webkit-keyframes flipToLeft {\n  to {\n    -webkit-transform: rotateY(-180deg);\n            transform: rotateY(-180deg); } }\n\n@keyframes flipToLeft {\n  to {\n    -webkit-transform: rotateY(-180deg);\n            transform: rotateY(-180deg); } }\n\n@-webkit-keyframes flipToLeftBack {\n  from {\n    -webkit-transform: rotateY(180deg);\n            transform: rotateY(180deg); } }\n\n@keyframes flipToLeftBack {\n  from {\n    -webkit-transform: rotateY(180deg);\n            transform: rotateY(180deg); } }\n\n@-webkit-keyframes flipToTop {\n  to {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg); } }\n\n@keyframes flipToTop {\n  to {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg); } }\n\n@-webkit-keyframes flipToTopBack {\n  from {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg); } }\n\n@keyframes flipToTopBack {\n  from {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg); } }\n\n@-webkit-keyframes flipToBottom {\n  to {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg); } }\n\n@keyframes flipToBottom {\n  to {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg); } }\n\n@-webkit-keyframes flipToBottomBack {\n  from {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg); } }\n\n@keyframes flipToBottomBack {\n  from {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg); } }\n\n.page-on-top, [data-effeckt-page].scale-up-to-front.effeckt-page-animating, [data-effeckt-page].scale-down-from-front.effeckt-page-animating {\n  z-index: 999; }\n\n.animation-delay-100 {\n  -webkit-animation-delay: 0.1s;\n          animation-delay: 0.1s; }\n\n.animation-delay-200 {\n  -webkit-animation-delay: 0.2s;\n          animation-delay: 0.2s; }\n\n.animation-delay-300, [data-effeckt-page].scale-up-from-behind {\n  -webkit-animation-delay: 0.3s;\n          animation-delay: 0.3s; }\n\n.animation-delay-500 {\n  -webkit-animation-delay: 0.5s;\n          animation-delay: 0.5s; }\n\n.animation-delay-700 {\n  -webkit-animation-delay: 0.7s;\n          animation-delay: 0.7s; }\n\n.animation-delay-1000 {\n  -webkit-animation-delay: 1000s;\n          animation-delay: 1000s; }\n"
  },
  {
    "path": "css/modules/positional-modals.css",
    "content": ".effeckt-positional-modal-wrap {\n  position: absolute;\n  z-index: 10;\n  display: none; }\n  .effeckt-positional-modal-wrap.effeckt-front {\n    z-index: 20; }\n\n.effeckt-positional-modal-wrap[data-effeckt-position=\"above\"] {\n  margin-top: -15px; }\n  .effeckt-positional-modal-wrap[data-effeckt-position=\"above\"] .effeckt-modal:before {\n    content: \"\";\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    width: 0;\n    height: 0;\n    margin-left: -10px;\n    border-top: 10px solid #ccc;\n    border-right: 10px solid transparent;\n    border-left: 10px solid transparent; }\n.effeckt-positional-modal-wrap[data-effeckt-position=\"below\"] {\n  margin-top: 15px; }\n  .effeckt-positional-modal-wrap[data-effeckt-position=\"below\"] .effeckt-modal:before {\n    content: \"\";\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    width: 0;\n    height: 0;\n    margin-left: -10px;\n    border-bottom: 10px solid #ccc;\n    border-right: 10px solid transparent;\n    border-left: 10px solid transparent; }\n.effeckt-positional-modal-wrap[data-effeckt-position=\"right\"] {\n  margin-left: 15px; }\n  .effeckt-positional-modal-wrap[data-effeckt-position=\"right\"] .effeckt-modal:before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    right: 100%;\n    width: 0;\n    height: 0;\n    margin-top: -10px;\n    border-top: 10px solid transparent;\n    border-bottom: 10px solid transparent;\n    border-right: 10px solid #ccc; }\n.effeckt-positional-modal-wrap[data-effeckt-position=\"left\"] {\n  margin-left: -15px; }\n  .effeckt-positional-modal-wrap[data-effeckt-position=\"left\"] .effeckt-modal:before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 100%;\n    width: 0;\n    height: 0;\n    margin-top: -10px;\n    border-top: 10px solid transparent;\n    border-bottom: 10px solid transparent;\n    border-left: 10px solid #ccc; }\n"
  },
  {
    "path": "css/modules/tabs.css",
    "content": ".effeckt-tabs-wrap {\n  position: relative; }\n  .effeckt-tabs-wrap ul.effeckt-tabs {\n    overflow: hidden; }\n  .effeckt-tabs-wrap .effeckt-tabs-container {\n    position: relative;\n    transition: all 500ms ease-in-out; }\n    .effeckt-tabs-wrap .effeckt-tabs-container .effeckt-tab-content {\n      position: absolute;\n      transition: all 250ms ease-in-out; }\n  .effeckt-tabs-wrap[data-effeckt-type='scale'] .effeckt-tab-content.effeckt-hide {\n    -webkit-transform: scale(0.9);\n        -ms-transform: scale(0.9);\n            transform: scale(0.9);\n    opacity: 0; }\n  .effeckt-tabs-wrap[data-effeckt-type='scale'] .effeckt-tab-content.effeckt-show {\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1);\n    transition-delay: 0.3s;\n    opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='scale-up'] .effeckt-tab-content.effeckt-hide {\n    -webkit-transform: scale(1.1);\n        -ms-transform: scale(1.1);\n            transform: scale(1.1);\n    opacity: 0; }\n  .effeckt-tabs-wrap[data-effeckt-type='scale-up'] .effeckt-tab-content.effeckt-show {\n    -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n            transform: scale(1);\n    transition-delay: 0.3s;\n    opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='slide-left'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-left'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: translateX(-100%);\n          -ms-transform: translateX(-100%);\n              transform: translateX(-100%);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-left'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: translateX(0%);\n          -ms-transform: translateX(0%);\n              transform: translateX(0%);\n      transition-delay: 0.3s;\n      opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='slide-right'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-right'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: translateX(100%);\n          -ms-transform: translateX(100%);\n              transform: translateX(100%);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-right'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: translateX(0%);\n          -ms-transform: translateX(0%);\n              transform: translateX(0%);\n      transition-delay: 0.3s;\n      opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='slide-up'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-up'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: translateY(-100%);\n          -ms-transform: translateY(-100%);\n              transform: translateY(-100%);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-up'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: translateY(0%);\n          -ms-transform: translateY(0%);\n              transform: translateY(0%);\n      transition-delay: 0.3s;\n      opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='slide-down'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-down'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: translateY(100%);\n          -ms-transform: translateY(100%);\n              transform: translateY(100%);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='slide-down'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: translateX(0%);\n          -ms-transform: translateX(0%);\n              transform: translateX(0%);\n      transition-delay: 0.3s;\n      opacity: 1; }\n  .effeckt-tabs-wrap[data-effeckt-type='flip'] .effeckt-tabs-container {\n    overflow: hidden; }\n    .effeckt-tabs-wrap[data-effeckt-type='flip'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide {\n      -webkit-transform: rotateY(-90deg) scale(1.1);\n              transform: rotateY(-90deg) scale(1.1);\n      opacity: 0; }\n    .effeckt-tabs-wrap[data-effeckt-type='flip'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show {\n      -webkit-transform: rotateY(0deg) scale(1);\n              transform: rotateY(0deg) scale(1);\n      transition-delay: 0.3s;\n      opacity: 1; }\n"
  },
  {
    "path": "css/modules/tooltips.css",
    "content": ".effeckt-tooltip[data-effeckt-tooltip-text] {\n  position: relative;\n  display: inline-block; }\n  .effeckt-tooltip[data-effeckt-tooltip-text]::before, .effeckt-tooltip[data-effeckt-tooltip-text]::after {\n    opacity: 0;\n    transition: 0.2s; }\n  .effeckt-tooltip[data-effeckt-tooltip-text]:hover::before, .effeckt-tooltip[data-effeckt-tooltip-text]:hover::after {\n    visibility: visible;\n    opacity: 1;\n    transition: 0.2s 0.3s; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"]::after {\n  content: attr(data-effeckt-tooltip-text);\n  position: absolute;\n  border-radius: 10px;\n  background: black;\n  color: white;\n  padding: 0.45rem 0.8rem;\n  font-size: 90%;\n  white-space: nowrap;\n  visibility: hidden;\n  z-index: 2; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"]::before {\n  content: \"\";\n  width: 0;\n  height: 0;\n  position: absolute; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]::after {\n  -webkit-transform: translateX(-50%);\n      -ms-transform: translateX(-50%);\n          transform: translateX(-50%);\n  left: 50%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]:before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]:before {\n  left: 50%;\n  margin-left: -5px; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]::before {\n  bottom: 125%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]::before {\n  border-top: 5px solid black;\n  border-left: 5px solid transparent;\n  border-right: 5px solid transparent;\n  margin-bottom: -4px; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]:hover::before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"]:hover::after {\n  bottom: 115%; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]::before {\n  top: 125%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]::before {\n  border-bottom: 5px solid black;\n  border-left: 5px solid transparent;\n  border-right: 5px solid transparent;\n  margin-top: -4px; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]:hover::before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"]:hover::after {\n  top: 115%; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]:before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]:before {\n  top: 45%;\n  -webkit-transform: translateY(-45%);\n      -ms-transform: translateY(-45%);\n          transform: translateY(-45%);\n  margin-top: 2px; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]::before {\n  left: 115%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]::before {\n  border-right: 5px solid black;\n  border-top: 5px solid transparent;\n  border-bottom: 5px solid transparent;\n  margin-left: -4px; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]:hover::before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"]:hover::after {\n  left: 105%; }\n\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]::after, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]::before {\n  right: 115%; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]::before {\n  border-left: 5px solid black;\n  border-top: 5px solid transparent;\n  border-bottom: 5px solid transparent;\n  margin-right: -4px; }\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]:hover::before, .effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"]:hover::after {\n  right: 105%; }\n"
  },
  {
    "path": "js/core.js",
    "content": ";(function(window){\n\n  var\n    // Is Modernizr defined on the global scope\n    Modernizr = typeof Modernizr !== \"undefined\" ? Modernizr : false,\n\n    // Always expect both kinds of event\n    buttonPressedEvent = 'touchstart click',\n\n    // List of all animation/transition properties\n    // with its animationEnd/transitionEnd event\n    animationEndEventNames = {\n      'WebkitAnimation' : 'webkitAnimationEnd',\n      'OAnimation' : 'oAnimationEnd',\n      'msAnimation' : 'MSAnimationEnd',\n      'animation' : 'animationend'\n    },\n\n    transitionEndEventNames = {\n      'WebkitTransition' : 'webkitTransitionEnd',\n      'OTransition' : 'oTransitionEnd',\n      'msTransition' : 'MSTransitionEnd',\n      'transition' : 'transitionend'\n    },\n\n    Effeckt = function() {\n      this.init();\n    };\n\n  // Current version.\n  Effeckt.version = '0.0.1';\n\n  // Initialization method\n  Effeckt.prototype.init = function() {\n    this.buttonPressedEvent = buttonPressedEvent;\n\n    //event trigger after animation/transition end.\n    this.transitionEndEventName = Modernizr ? transitionEndEventNames[Modernizr.prefixed('transition')] : getTransitionEndEventNames();\n    this.animationEndEventName  = Modernizr ? animationEndEventNames[Modernizr.prefixed('animation')] : getAnimationEndEventNames();\n    this.transitionAnimationEndEvent = this.animationEndEventName + ' ' + this.transitionEndEventName;\n  };\n\n  Effeckt.prototype.getViewportHeight = function() {\n\n    var docElement = document.documentElement,\n      client = docElement['clientHeight'],\n      inner = window['innerHeight'];\n\n    if( client < inner )\n      return inner;\n    else\n      return client;\n  };\n\n  // Get all the properties for transition/animation end\n  function getTransitionEndEventNames() {\n    return _getEndEventNames( transitionEndEventNames );\n  }\n\n  function getAnimationEndEventNames() {\n    return _getEndEventNames( animationEndEventNames );\n  }\n\n  function _getEndEventNames(obj) {\n    var events = [];\n\n    for ( var eventName in obj ) {\n      events.push( obj[ eventName ] );\n    }\n\n    return events.join(' ');\n  }\n\n  // Creates a Effeckt object.\n  window.Effeckt = new Effeckt();\n\n})(this);\n"
  },
  {
    "path": "js/demo/demo.js",
    "content": "var EffecktDemos = {\n\n  contribURL: 'https://api.github.com/repos/h5bp/Effeckt.css/contributors?callback=?',\n\n  init: function() {\n\n    $(window).load(function() {\n      $(\".no-transitions\").removeClass(\"no-transitions\");\n    });\n\n    stroll.bind('.effeckt-demo-list-scroll ul');\n\n    this.getContributorsData();\n\n  },\n\n  getContributorsData: function() {\n\n    var self = this;\n\n    $.ajax({\n      type: 'GET',\n      url: this.contribURL,\n      async: false,\n      contentType: \"application/json\",\n      dataType: 'jsonp',\n      success: function(data){\n        self.listContributors(data.data);\n      },\n      error: function(e) {\n        console.log(e.message);\n      }\n    });\n  },\n\n  listContributors: function(data) {\n\n    var html = '';\n\n    $(data).each(function(i, user){\n      html += '<li><a href=\"'+ user.url.replace('api.','').replace('users/','') +'\"><img src=\"'+ user.avatar_url +'\" alt=\"'+ user.login +'\" class=\"contributor-avatar\"></a></li>';\n    });\n\n    $(html).appendTo('#contributors-list');\n\n  }\n\n}\n\nEffecktDemos.init();\n"
  },
  {
    "path": "js/demo/lazy-loading.js",
    "content": "// This is on Demo to reminds you all that most of this are demo interactions\n// For me the only thing here that is necessary for animation is perspective\n// because it's change according to the scroll\nvar EffecktLazyLoading = {\n\n  init: function() {\n\n    var self = this;\n\n    this.bindUIActions();\n\n    this.elements = $('.effeckt-lazy-loading-element');\n    this.wrapper = $('.effeckt-lazy-loading');\n    this.needsPerspective = this.wrapper.data('effeckt-needs-perspective')?true:false;\n\n    this.viewportHeight = this.getViewportHeight();\n\n    this.elements.each( function( i, el ) {\n\n      if ( self.isElementVisible( el ) ) {\n        $(el).addClass('shown');\n      }\n    });\n\n  },\n\n  bindUIActions: function() {\n\n    var self = this;\n\n    $('.effeckt-page-active').on( 'scroll', function(){\n      self._onScrollMethod();\n    });\n\n    $(window).on( 'resize', function() {\n      self.viewportHeight = self.getViewportHeight();\n    });\n\n    $('.effeckt-lazy-loading-options input[type=radio]').on( 'click', function(){\n      self.wrapper.attr('data-effeckt-type', $(this).val());\n    });\n\n  },\n\n  _scrollPage: function() {\n\n    var self = this;\n    \n    this.didScroll = false;\n\n    if ( self.needsPerspective ) {\n      // This only work with page transition\n      var perspectiveY = $('.effeckt-page-active').scrollTop() + self.viewportHeight / 2;\n      $('.effeckt-lazy-loading').css(Modernizr.prefixed('perspectiveOrigin'), '50% ' + perspectiveY + 'px');\n    }\n\n    this.elements.each( function( i, el ) {\n      if( !$(el).hasClass( 'shown' ) && !$(el).hasClass( 'animating' ) && self.isElementVisible( el ) ) {\n\n        $(el).on( Effeckt.transitionAnimationEndEvent, function() {\n          $(el).off( Effeckt.transitionAnimationEndEvent );\n          $(el).removeClass( 'animating' );\n        });\n\n        $(el).addClass( 'shown animating' );\n      }\n    });\n  },\n\n  isElementVisible: function( el ) {\n\n    var elHeight = el.offsetHeight,\n      // This only work with page transition\n      scrolled = $('.effeckt-page-active').scrollTop(),\n      viewed = scrolled + this.viewportHeight,\n      elTop = $(el).offset().top,\n      elBottom = elTop + elHeight,\n      // if 0, the element is considered in the viewport as soon as it enters.\n      // if 1, the element is considered in the viewport only when it's fully inside\n      // value in percentage (1 >= h >= 0)\n      h = 0.75;\n    return (elTop + (elHeight * h) + scrolled) <= viewed;\n  },\n\n  getViewportHeight: function() {\n\n    var docElement = document.documentElement,\n      client = docElement['clientHeight'],\n      inner = window['innerHeight'];\n\n    if( client < inner )\n      return inner;\n    else\n      return client;\n  },\n\n  _onScrollMethod : function() {\n\n    var self = this;\n\n    if( !this.didScroll ) {\n      this.didScroll = true;\n\n      setTimeout(function(){\n        self._scrollPage();\n      }, 1000 / 60);\n    }\n  },\n\n};\n\nEffecktLazyLoading.init();"
  },
  {
    "path": "js/modules/_template.js",
    "content": "var Effeckt = {\n\n  init: function() {\n\n    this.bindUIActions();\n\n  },\n\n  bindUIActions: function() {\n\n    // event handlers\n\n  },\n\n  specificAction: function() {\n\n  }\n\n};\n\nEffeckt.init();\n"
  },
  {
    "path": "js/modules/buttons.js",
    "content": "var EffecktButtons = {\n\n  init: function() {\n\n    this.bindUIActions();\n\n  },\n\n  bindUIActions: function() {\n\n    var self = this;\n\n    $('.effeckt-button').on( Effeckt.buttonPressedEvent, function(){\n      self.showLoader(this);\n    });\n\n  },\n\n  showLoader: function(el) {\n\n    var button = $(el),\n        resetTimeout;\n\n    if(button.attr( 'data-loading' )){\n\n      button.removeAttr( 'data-loading' );\n\n    } else {\n\n      button.attr( 'data-loading', true );\n\n    }\n\n    clearTimeout( resetTimeout );\n    resetTimeout = setTimeout( function() {\n      button.removeAttr( 'data-loading' );\n    }, 2000 );\n\n  }\n\n};\n\nEffecktButtons.init();\n"
  },
  {
    "path": "js/modules/captions.js",
    "content": "/*!\n * captions.js\n *\n * author: Effeckt.css\n *\n * Licensed under the MIT license\n */\n\nvar effecktCaptions = {\n\n  init: function() {\n    this.bindUIActions();\n  },\n\n  bindUIActions: function() {\n    var self = this; //keep a reference to this (Captions) object.\n\n    $('[data-effeckt-type]').on(Effeckt.buttonPressedEvent, function(event) {\n      self.activateCaptions(this);\n      event.preventDefault();\n    });\n  },\n\n  activateCaptions: function(el) {\n    var activeClass = 'active';\n\n    if (document.documentElement.classList) {\n      el.classList.toggle(activeClass);\n    } else {\n      var $caption = $(el);\n      $caption.toggleClass(activeClass);\n    }\n  }\n};\n\neffecktCaptions.init();"
  },
  {
    "path": "js/modules/list-items.js",
    "content": "var EffecktListItems = {\n\n  init: function() {\n\n    this.bindUIActions();\n\n  },\n\n  bindUIActions: function() {\n\n    var self = this;\n\n    $(\".effeckt-list-wrap button.add\").on( Effeckt.buttonPressedEvent, function() {\n      self.addListItem(this);\n    });\n\n    $(\".effeckt-list-wrap button.remove\").on( Effeckt.buttonPressedEvent, function() {\n      self.removeListItem(this);\n    });\n\n    $(\"button.remove\").hide();\n  },\n\n  addListItem: function(el) {\n\n    var insertPoint = $(el).parent().find(\"li:nth-child(3)\");\n    $(el).parent().find(\"button.remove\").show();\n\n    $(\"<li />\", {\n      'text': \"new item\",\n      'class': \"new-item\"\n    }).insertAfter(insertPoint);\n\n  },\n\n  removeListItem: function(el) {\n\n    var $parent = $(el).parent(),\n        self = this;\n\n    var elToRemove = $parent.find(\"li.new-item\").last();\n    elToRemove.on( Effeckt.transitionAnimationEndEvent, function () {\n      elToRemove.off( Effeckt.transitionAnimationEndEvent );\n      elToRemove.remove();\n    });\n\n    elToRemove.toggleClass(\"remove-item new-item\");\n    if (!$parent.find(\"li.new-item\").length) {\n      $parent.find(\"button.remove\").hide();\n    }\n\n  }\n\n};\n\nEffecktListItems.init();\n"
  },
  {
    "path": "js/modules/list-scroll.js",
    "content": "/*!\n * stroll.js 1.2 - CSS scroll effects\n * http://lab.hakim.se/scroll-effects\n * MIT licensed\n *\n * Modified to use Modernizer \n * \n * Copyright (C) 2012 Hakim El Hattab, http://hakim.se\n */\n(function(){\n\n  \"use strict\";\n\n  // When a list is configured as 'live', this is how frequently \n  // the DOM will be polled for changes\n  var LIVE_INTERVAL = 500;\n\n  var IS_TOUCH_DEVICE = Modernizr.touch;\n\n  // All of the lists that are currently bound\n  var lists = [];\n\n  // Set to true when there are lists to refresh\n  var active = false;\n\n  /**\n   * Updates all currently bound lists.\n   */\n  function refresh() {\n    if( active ) {\n      requestAnimFrame( refresh );\n      \n      for( var i = 0, len = lists.length; i < len; i++ ) {\n        lists[i].update();\n      }\n    }\n  }\n\n  /**\n   * Starts monitoring a list and applies classes to each of \n   * its contained elements based on its position relative to \n   * the list's viewport.\n   * \n   * @param {HTMLElement} element \n   * @param {Object} options Additional arguments;\n   *  - live; Flags if the DOM should be repeatedly checked for changes\n   *      repeatedly. Useful if the list contents is changing. Use \n   *      scarcely as it has an impact on performance.\n   */\n  function add( element, options ) {\n    // Only allow ul/ol\n    if( !element.nodeName || /^(ul|li)$/i.test( element.nodeName ) === false ) {\n      return false;\n    }\n    // Delete duplicates (but continue and re-bind this list to get the \n    // latest properties and list items)\n    else if( contains( element ) ) {\n      remove( element );\n    }\n\n    var list = IS_TOUCH_DEVICE ? new TouchList( element ) : new List( element );\n\n    // Handle options\n    if( options && options.live ) {\n      list.syncInterval = setInterval( function() {\n        list.sync.call( list );\n      }, LIVE_INTERVAL );\n    }\n\n    // Synchronize the list with the DOM\n    list.sync();\n\n    // Add this element to the collection\n    lists.push( list );\n\n    // Start refreshing if this was the first list to be added\n    if( lists.length === 1 ) {\n      active = true;\n      refresh();\n    }\n  }\n\n  /**\n   * Stops monitoring a list element and removes any classes \n   * that were applied to its list items.\n   * \n   * @param {HTMLElement} element \n   */\n  function remove( element ) {\n    for( var i = 0; i < lists.length; i++ ) {\n      var list = lists[i];\n\n      if( list.element == element ) {\n        list.destroy();\n        lists.splice( i, 1 );\n        i--;\n      }\n    }\n\n    // Stopped refreshing if the last list was removed\n    if( lists.length === 0 ) {\n      active = false;\n    }\n  }\n\n  /**\n   * Checks if the specified element has already been bound.\n   */\n  function contains( element ) {\n    for( var i = 0, len = lists.length; i < len; i++ ) {\n      if( lists[i].element == element ) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  /**\n   * Calls 'method' for each DOM element discovered in \n   * 'target'.\n   * \n   * @param target String selector / array of UL elements / \n   * jQuery object / single UL element\n   * @param method A function to call for each element target\n   */\n  function batch( target, method, options ) {\n    var i, len;\n\n    // Selector\n    if( typeof target === 'string' ) {\n      var targets = document.querySelectorAll( target );\n\n      for( i = 0, len = targets.length; i < len; i++ ) {\n        method.call( null, targets[i], options );\n      }\n    }\n    // Array (jQuery)\n    else if( typeof target === 'object' && typeof target.length === 'number' ) {\n      for( i = 0, len = target.length; i < len; i++ ) {\n        method.call( null, target[i], options );\n      }\n    }\n    // Single element\n    else if( target.nodeName ) {\n      method.call( null, target, options );\n    }\n    else {\n      throw 'Stroll target was of unexpected type.';\n    }\n  }\n\n  /**\n   * Checks if the client is capable of running the library.\n   */\n  function isCapable() {\n    return !!document.body.classList;\n  }\n\n  /**\n   * The basic type of list; applies past & future classes to \n   * list items based on scroll state.\n   */\n  function List( element ) {\n    this.element = element;\n  }\n\n  /** \n   * Fetches the latest properties from the DOM to ensure that \n   * this list is in sync with its contents. \n   */\n  List.prototype.sync = function() {\n    this.items = Array.prototype.slice.apply( this.element.children );\n\n    // Caching some heights so we don't need to go back to the DOM so much\n    this.listHeight = this.element.offsetHeight;\n\n    // One loop to get the offsets from the DOM\n    for( var i = 0, len = this.items.length; i < len; i++ ) {\n      var item = this.items[i];\n      item._offsetHeight = item.offsetHeight;\n      item._offsetTop = item.offsetTop;\n      item._offsetBottom = item._offsetTop + item._offsetHeight;\n      item._state = '';\n    }\n\n    // Force an update\n    this.update( true );\n  }\n\n  /** \n   * Apply past/future classes to list items outside of the viewport\n   */\n  List.prototype.update = function( force ) {\n    var scrollTop = this.element.pageYOffset || this.element.scrollTop,\n      scrollBottom = scrollTop + this.listHeight;\n\n    // Quit if nothing changed\n    if( scrollTop !== this.lastTop || force ) {\n      this.lastTop = scrollTop;\n\n      // One loop to make our changes to the DOM\n      for( var i = 0, len = this.items.length; i < len; i++ ) {\n        var item = this.items[i];\n\n        // Above list viewport\n        if( item._offsetBottom < scrollTop ) {\n          // Exclusion via string matching improves performance\n          if( item._state !== 'past' ) {\n            item._state = 'past';\n            item.classList.add( 'past' );\n            item.classList.remove( 'future' );\n          }\n        }\n        // Below list viewport\n        else if( item._offsetTop > scrollBottom ) {\n          // Exclusion via string matching improves performance\n          if( item._state !== 'future' ) {\n            item._state = 'future';\n            item.classList.add( 'future' );\n            item.classList.remove( 'past' );\n          }\n        }\n        // Inside of list viewport\n        else if( item._state ) {\n          if( item._state === 'past' ) item.classList.remove( 'past' );\n          if( item._state === 'future' ) item.classList.remove( 'future' );\n          item._state = '';\n        }\n      }\n    }\n  }\n\n  /**\n   * Cleans up after this list and disposes of it.\n   */\n  List.prototype.destroy = function() {\n    clearInterval( this.syncInterval );\n\n    for( var j = 0, len = this.items.length; j < len; j++ ) {\n      var item = this.items[j];\n\n      item.classList.remove( 'past' );\n      item.classList.remove( 'future' );\n    }\n  }\n\n\n  /**\n   * A list specifically for touch devices. Simulates the style \n   * of scrolling you'd see on a touch device but does not rely \n   * on webkit-overflow-scrolling since that makes it impossible \n   * to read the up-to-date scroll position.\n   */\n  function TouchList( element ) {\n    this.element = element;\n    this.element.style.overflow = 'hidden';\n\n    this.top = {\n      value: 0,\n      natural: 0\n    };\n\n    this.touch = {\n      value: 0,\n      offset: 0,\n      start: 0,\n      previous: 0,\n      lastMove: Date.now(),\n      accellerateTimeout: -1,\n      isAccellerating: false,\n      isActive: false\n    };\n\n    this.velocity = 0;\n  }\n  TouchList.prototype = new List();\n\n  /** \n   * Fetches the latest properties from the DOM to ensure that \n   * this list is in sync with its contents. This is typically \n   * only used once (per list) at initialization.\n   */\n  TouchList.prototype.sync = function() {\n    this.items = Array.prototype.slice.apply( this.element.children );\n\n    this.listHeight = this.element.offsetHeight;\n\n    var item;\n\n    // One loop to get the properties we need from the DOM\n    for( var i = 0, len = this.items.length; i < len; i++ ) {\n      item = this.items[i];\n      item._offsetHeight = item.offsetHeight;\n      item._offsetTop = item.offsetTop;\n      item._offsetBottom = item._offsetTop + item._offsetHeight;\n      item._state = '';\n\n      // Animating opacity is a MAJOR performance hit on mobile so we can't allow it\n      item.style.opacity = 1;\n    }\n\n    this.top.natural = this.element.scrollTop;\n    this.top.value = this.top.natural;\n    this.top.max = item._offsetBottom - this.listHeight;\n\n    // Force an update\n    this.update( true );\n\n    this.bind();\n  }\n\n  /**\n   * Binds the events for this list. References to proxy methods \n   * are kept for unbinding if the list is disposed of.\n   */\n  TouchList.prototype.bind = function() {\n    var scope = this;\n\n    this.touchStartDelegate = function( event ) {\n      scope.onTouchStart( event );\n    };\n\n    this.touchMoveDelegate = function( event ) {\n      scope.onTouchMove( event );\n    };\n\n    this.touchEndDelegate = function( event ) {\n      scope.onTouchEnd( event );\n    };\n\n    this.element.addEventListener( 'touchstart', this.touchStartDelegate, false );\n    this.element.addEventListener( 'touchmove', this.touchMoveDelegate, false );\n    this.element.addEventListener( 'touchend', this.touchEndDelegate, false );\n  }\n\n  TouchList.prototype.onTouchStart = function( event ) {\n    event.preventDefault();\n    \n    if( event.touches.length === 1 ) {\n      this.touch.isActive = true;\n      this.touch.start = event.touches[0].clientY;\n      this.touch.previous = this.touch.start;\n      this.touch.value = this.touch.start;\n      this.touch.offset = 0;\n\n      if( this.velocity ) {\n        this.touch.isAccellerating = true;\n\n        var scope = this;\n\n        this.touch.accellerateTimeout = setTimeout( function() {\n          scope.touch.isAccellerating = false;\n          scope.velocity = 0;\n        }, 500 );\n      }\n      else {\n        this.velocity = 0;\n      }\n    }\n  }\n\n  TouchList.prototype.onTouchMove = function( event ) {\n    if( event.touches.length === 1 ) {\n      var previous = this.touch.value;\n\n      this.touch.value = event.touches[0].clientY;\n      this.touch.lastMove = Date.now();\n\n      var sameDirection = ( this.touch.value > this.touch.previous && this.velocity < 0 )\n                || ( this.touch.value < this.touch.previous && this.velocity > 0 );\n      \n      if( this.touch.isAccellerating && sameDirection ) {\n        clearInterval( this.touch.accellerateTimeout );\n\n        // Increase velocity significantly\n        this.velocity += ( this.touch.previous - this.touch.value ) / 10;\n      }\n      else {\n        this.velocity = 0;\n\n        this.touch.isAccellerating = false;\n        this.touch.offset = Math.round( this.touch.start - this.touch.value );\n      }\n\n      this.touch.previous = previous;\n    }\n  }\n\n  TouchList.prototype.onTouchEnd = function( event ) {\n    var distanceMoved = this.touch.start - this.touch.value;\n\n    if( !this.touch.isAccellerating ) {\n      // Apply velocity based on the start position of the touch\n      this.velocity = ( this.touch.start - this.touch.value ) / 10;\n    }\n\n    // Don't apply any velocity if the touch ended in a still state\n    if( Date.now() - this.touch.lastMove > 200 || Math.abs( this.touch.previous - this.touch.value ) < 5 ) {\n      this.velocity = 0;\n    }\n\n    this.top.value += this.touch.offset;\n\n    // Reset the variables used to determne swipe speed\n    this.touch.offset = 0;\n    this.touch.start = 0;\n    this.touch.value = 0;\n    this.touch.isActive = false;\n    this.touch.isAccellerating = false;\n\n    clearInterval( this.touch.accellerateTimeout );\n\n    // If a swipe was captured, prevent event propagation\n    if( Math.abs( this.velocity ) > 4 || Math.abs( distanceMoved ) > 10 ) {\n      event.preventDefault();\n    }\n  };\n\n  /** \n   * Apply past/future classes to list items outside of the viewport\n   */\n  TouchList.prototype.update = function( force ) {\n    // Determine the desired scroll top position\n    var scrollTop = this.top.value + this.velocity + this.touch.offset;\n\n    // Only scroll the list if there's input\n    if( this.velocity || this.touch.offset ) {\n      // Scroll the DOM and add on the offset from touch\n      this.element.scrollTop = scrollTop;\n\n      // Keep the scroll value within bounds\n      scrollTop = Math.max( 0, Math.min( this.element.scrollTop, this.top.max ) );\n\n      // Cache the currently set scroll top and touch offset\n      this.top.value = scrollTop - this.touch.offset;\n    }\n\n    // If there is no active touch, decay velocity\n    if( !this.touch.isActive || this.touch.isAccellerating ) {\n      this.velocity *= 0.95;\n    }\n\n    // Cut off early, the last fraction of velocity doesn't have \n    // much impact on movement\n    if( Math.abs( this.velocity ) < 0.15 ) {\n      this.velocity = 0;\n    }\n\n    // Only proceed if the scroll position has changed\n    if( scrollTop !== this.top.natural || force ) {\n      this.top.natural = scrollTop;\n      this.top.value = scrollTop - this.touch.offset;\n\n      var scrollBottom = scrollTop + this.listHeight;\n      \n      // One loop to make our changes to the DOM\n      for( var i = 0, len = this.items.length; i < len; i++ ) {\n        var item = this.items[i];\n\n        // Above list viewport\n        if( item._offsetBottom < scrollTop ) {\n          // Exclusion via string matching improves performance\n          if( this.velocity <= 0 && item._state !== 'past' ) {\n            item.classList.add( 'past' );\n            item._state = 'past';\n          }\n        }\n        // Below list viewport\n        else if( item._offsetTop > scrollBottom ) {\n          // Exclusion via string matching improves performance\n          if( this.velocity >= 0 && item._state !== 'future' ) {\n            item.classList.add( 'future' );\n            item._state = 'future';\n          }\n        }\n        // Inside of list viewport\n        else if( item._state ) {\n          if( item._state === 'past' ) item.classList.remove( 'past' );\n          if( item._state === 'future' ) item.classList.remove( 'future' );\n          item._state = '';\n        }\n      }\n    }\n  };\n\n  /**\n   * Cleans up after this list and disposes of it.\n   */\n  TouchList.prototype.destroy = function() {\n    List.prototype.destroy.apply( this );\n\n    this.element.removeEventListener( 'touchstart', this.touchStartDelegate, false );\n    this.element.removeEventListener( 'touchmove', this.touchMoveDelegate, false );\n    this.element.removeEventListener( 'touchend', this.touchEndDelegate, false );\n  }\n\n\n  /**\n   * Public API\n   */\n  window.stroll = {\n    /**\n     * Binds one or more lists for scroll effects.\n     * \n     * @see #add()\n     */\n    bind: function( target, options ) {\n      if( isCapable() ) {\n        batch( target, add, options );\n      }\n    },\n\n    /**\n     * Unbinds one or more lists from scroll effects.\n     * \n     * @see #remove()\n     */\n    unbind: function( target ) {\n      if( isCapable() ) {\n        batch( target, remove );\n      }\n    }\n  }\n\n  window.requestAnimFrame = (function(){\n    return  window.requestAnimationFrame       ||\n        window.webkitRequestAnimationFrame ||\n        window.mozRequestAnimationFrame    ||\n        window.oRequestAnimationFrame      ||\n        window.msRequestAnimationFrame     ||\n        function( callback ){\n          window.setTimeout(callback, 1000 / 60);\n        };\n  })()\n\n})();"
  },
  {
    "path": "js/modules/modal.js",
    "content": "/**\n * modalEffects.js v1.1.0\n * http://www.codrops.com\n *\n * Rewritten for effeckts project\n *\n * Licensed under the MIT license.\n * http://www.opensource.org/licenses/mit-license.php\n *\n * Copyright 2013, Codrops\n * http://www.codrops.com\n */\n;(function(window){\n\n  var Effeckt = window.Effeckt;\n\n  var EffecktModal = function() {\n    if ( !(this instanceof EffecktModal) ) {\n      return new EffecktModal();\n    }\n\n    this.init();\n  };\n\n  EffecktModal.version = '0.0.1';\n\n  EffecktModal.prototype.init = function() {\n    this.$body                = $('body');\n    this.$element             = null;\n    this.$overlay             = null;\n    this.isShown              = false;\n    this.hasPerspective       = false;\n    this.modalEffeckt         = '';\n    this.modalEffecktOut      = '';\n    this.modalEffecktProvided = true; //it's suppose to be provided\n\n    this.bindUIActions();\n  };\n\n  EffecktModal.prototype.bindUIActions = function() {\n    $(document).on( Effeckt.buttonPressedEvent,\n                    '.effeckt-modal-button',\n                    $.proxy(this.open, this)\n                  );\n\n    $(document).on( Effeckt.buttonPressedEvent,\n                    '.effeckt-modal-close, [data-effeckt-dismiss=\"modal\"]',\n                    $.proxy(this.close, this)\n                  );\n\n    var self = this;\n    $(window).on( 'keyup', function( e ) {\n      if ( e.keyCode === 27 ) self.close(e);\n    });\n  };\n\n  EffecktModal.prototype.open = function( e ) {\n    e.preventDefault();\n\n    if ( this.isShown ) {\n      return;\n    }\n\n    var $button = $(e.target);\n    var target = $button.data('effeckt-target');\n\n    this.$element = $(target || '#effeckt-modal-wrap');\n\n    if ( !this.$element.length ) return;\n\n    // Modal Effeckt-Type\n    this.modalEffeckt     = $button.data( 'effeckt-type' );\n    this.modalEffecktOut  = $button.data( 'effeckt-out-type' );\n\n    if ( $button.data( 'effeckt-needs-perspective' ) ) {\n      this.$body.addClass( 'effeckt-perspective' );\n      this.hasPerspective = true;\n    }\n\n    // check if the effeckt class is already added\n    if ( this.$element.hasClass( this.modalEffeckt ) || this.modalEffeckt === undefined ) {\n      this.showModal();\n    } else {\n      this.modalEffecktProvided = false;\n      this.$element.addClass( this.modalEffeckt );\n\n      this.$element.on( Effeckt.transitionAnimationEndEvent, $.proxy(function() {\n        this.$element.off( Effeckt.transitionAnimationEndEvent );\n        this.showModal();\n      }, this));\n    }\n  };\n\n  EffecktModal.prototype.close = function( e ) {\n    e.preventDefault();\n\n    if ( !this.isShown ) {\n      return;\n    }\n\n    this.$element.on( Effeckt.transitionAnimationEndEvent, $.proxy(function () {\n      this.$element.off( Effeckt.transitionAnimationEndEvent );\n      this.hideModal();\n    }, this));\n\n    this.$element.removeClass( 'effeckt-show' );\n    this.isShown = false;\n\n    if ( this.modalEffecktOut ) {\n      this.$element.addClass( this.modalEffecktOut );\n    }\n  };\n\n  EffecktModal.prototype.showModal = function() {\n    this.addOverlay();\n    this.$element.addClass( 'effeckt-show' );\n    this.isShown = true;\n  };\n\n  EffecktModal.prototype.hideModal = function() {\n    // Only remove effeckt-hide class if it's any\n    if ( this.modalEffecktOut ){\n      this.$element.removeClass( this.modalEffecktOut );\n      this.modalEffecktOut = '';\n    }\n\n    if ( this.hasPerspective ) {\n      this.$body.removeClass( 'effeckt-perspective' );\n      this.hasPerspective = false;\n    }\n\n    this.removeOverlay();\n    this.$element.removeClass( this.modalEffeckt );\n    this.modalEffeckt = '';\n  }\n\n  EffecktModal.prototype.addOverlay = function() {\n    // just for fun\n    var atts = [];\n    atts.push('class=\"effeckt-overlay effeckt-modal-overlay\"');\n    atts.push('id=\"effeckt-modal-overlay\"');\n    atts.push('data-effeckt-dismiss=\"modal\"')\n\n    this.$overlay = $('<div ' + atts.join(' ') + ' />')\n                        .insertAfter( this.$element );\n\n    this.$overlay[0].offsetWidth; // force reflow\n  };\n\n  EffecktModal.prototype.removeOverlay = function() {\n    this.$overlay.remove();\n    this.$overlay = null;\n  };\n\n  window.Effeckt.Modal = EffecktModal();\n\n})(this);\n"
  },
  {
    "path": "js/modules/off-screen-nav.js",
    "content": "var EffecktOffScreenNav = {\n\n  nav: $(\"#effeckt-off-screen-nav\"),\n  closeButton: $(\"#effeckt-off-screen-nav-close\"),\n\n  effeckt_type: '',\n  threedee: false,\n\n  _checkForMore: {\n    'effeckt-off-screen-nav-top-card-deck': {\n      'showMethod': '_showCardDeckTop',\n      'hideMethod': '_hideCardDeckTop',\n      'initMethod': '_initCardDeckTop',\n      'endMethod': '_endCardDeck'\n    },\n    'effeckt-off-screen-nav-bottom-card-deck': {\n      'showMethod': '_showCardDeckBottom',\n      'hideMethod': '_hideCardDeckBottom',\n      'initMethod': '_initCardDeckBottom',\n      'endMethod': '_endCardDeck'\n    }\n  },\n\n\n  init: function() {\n\n    this.bindUIActions();\n\n  },\n\n  bindUIActions: function() {\n\n    var self = this;\n\n    $(\".off-screen-nav-button, #effeckt-off-screen-nav-close\").on( Effeckt.buttonPressedEvent, function() {\n      self.toggleNav(this);\n    });\n\n  },\n\n  toggleNav: function(el) {\n\n    var button = $(el),\n        self = this;\n\n    this.effeckt_type = button.data(\"effeckt-type\");\n    this.threedee = button.data(\"threedee\");\n\n    // Show\n    if (!this.nav.hasClass(\"effeckt-show\")) {\n\n      this.nav.addClass(this.effeckt_type);\n      this.closeButton.data(\"effeckt-type\", this.effeckt_type);\n\n      if (this.threedee) {\n        $(\"body\").addClass(\"effeckt-perspective\");\n      }\n\n      if (button.data(\"effeckt-needs-hide-class\")) {\n        this.nav.data(\"effeckt-needs-hide-class\", button.data(\"effeckt-needs-hide-class\"));\n      }\n\n      this.nav.on( Effeckt.transitionAnimationEndEvent, function () {\n        self.nav.off( Effeckt.transitionAnimationEndEvent );\n        self.nav.addClass(\"effeckt-show\");\n\n        $('[data-effeckt-page].effeckt-page-active, .effeckt-overlay').on( Effeckt.buttonPressedEvent, self.toggleNav.bind(self));\n      });\n\n      // check if need more coding done\n      // to make the effect works\n      // beyond css\n      this._checkForMoreOnShow();\n\n    // Hide\n    } else {\n\n      var self = this;\n\n      this.nav.removeClass(\"effeckt-show\");\n\n      this.nav.on( Effeckt.transitionAnimationEndEvent, function () {\n        self.nav.off( Effeckt.transitionAnimationEndEvent );\n        self.hideNav();\n\n        $('[data-effeckt-page].effeckt-page-active, .effeckt-overlay').off( Effeckt.buttonPressedEvent );\n      });\n\n      if( this.nav.data(\"effeckt-needs-hide-class\") ){\n        this.nav.addClass(\"effeckt-hide\");\n      }\n\n      // check if need more coding done\n      // to make the effect works\n      // beyond css\n      this._checkForMoreOnHide();\n\n    }\n\n  },\n\n  hideNav: function() {\n\n    //var self = this;\n\n    this.nav.removeClass(this.closeButton.data(\"effeckt-type\"));\n    this.nav.removeClass(\"effeckt-hide\");\n    this.nav.removeData(\"effeckt-needs-hide-class\");\n\n    $(\"body\").removeClass(\"effeckt-perspective\");\n  },\n\n  // Check for more thing to do using javascript\n  // that is beyond CSS\n  _checkForMoreOnShow: function() {\n\n    // Iterate each effeckt_type declared before\n    // which need more thing do to\n    for ( effeckt_type in this._checkForMore ) {\n\n      if ( effeckt_type !== this.effeckt_type ) {\n        continue;\n      }\n\n      var hideMethod = this._checkForMore[effeckt_type]['hideMethod'],\n          initMethod = this._checkForMore[effeckt_type]['initMethod'];\n\n      this._callThisMethod(hideMethod);\n      this._callThisMethod(initMethod);\n\n      // Break on first match\n      // because we are only working with only one effect at time\n      break;\n\n    }\n  },\n\n  _checkForMoreOnHide: function() {\n\n    for ( effeckt_type in this._checkForMore ) {\n\n      if ( effeckt_type !== this.effeckt_type ) {\n        continue;\n      }\n\n      var hideMethod = this._checkForMore[effeckt_type]['hideMethod'],\n          endMethod = this._checkForMore[effeckt_type]['endMethod'];\n\n      this._callThisMethod(hideMethod);\n      this._callThisMethod(endMethod);\n\n      // Break on first match\n      // because we are only working with only one effect at time\n      break;\n\n    }\n  },\n\n  //--------------------------------\n  // Methods for Card Deck From Top\n  //--------------------------------\n  _initCardDeckTop: function() {\n\n    var self = this;\n\n    this.nav.find('h4').on( Effeckt.buttonPressedEvent, function(e){\n      e.preventDefault();\n\n      if ( self.nav.hasClass('shown') ) {\n        self._hideCardDeckTop();\n      } else {\n        self._showCardDeckTop();\n      }\n\n    });\n  },\n\n  _hideCardDeckTop: function() {\n    var li = this.nav.find('li');\n\n    li.removeAttr('style');\n    this.nav.removeClass('shown');\n\n    li.each(function(index){\n      $(this).css(Modernizr.prefixed('transform'), 'translateY(' + (index*2) + 'px)')\n        .css('z-index', li.length - index)\n        .css(\"width\" , (100 - index/2)+'%')\n        .css(\"margin-left\" , index/4+'%');\n    });\n  },\n\n  _showCardDeckTop: function() {\n    var li = this.nav.find('li');\n    li.removeAttr('style');\n    this.nav.addClass('shown');\n\n    li.each(function(index){\n      var height = $(this).height();\n\n      $(this).css(Modernizr.prefixed('transform'), 'translateY(' + (index+1) * height + 'px)')\n        .css(\"width\" , '100%');\n    });\n  },\n\n  //--------------------------------\n  // Methods for Card Deck From Bottom\n  //--------------------------------\n  _initCardDeckBottom: function() {\n\n    var self = this;\n\n    this.nav.find('h4').on( Effeckt.buttonPressedEvent, function(e){\n      e.preventDefault();\n\n      if ( self.nav.hasClass('shown') ) {\n        self._hideCardDeckBottom();\n      } else {\n        self._showCardDeckBottom();\n      }\n\n    });\n  },\n\n  _hideCardDeckBottom: function() {\n    var li = this.nav.find('li');\n\n    li.removeAttr('style');\n    this.nav.removeClass('shown');\n\n    li.each(function(index){\n      $(this).css(Modernizr.prefixed('transform'), 'translateY(-' + (index*2) + 'px)')\n        .css('z-index', li.length - index)\n        .css(\"width\" , (100 - index/2)+'%')\n        .css(\"margin-left\" , index/4+'%');\n    });\n  },\n\n  _showCardDeckBottom: function() {\n    var li = this.nav.find('li');\n    li.removeAttr('style');\n    this.nav.addClass('shown');\n\n    li.each(function(index){\n      var height = $(this).height();\n\n      $(this).css(Modernizr.prefixed('transform'), 'translateY(-' + (index+1) * height + 'px)')\n        .css(\"width\" , '100%');\n    });\n  },\n\n  // Card Deck\n  // unbind on click event\n  // after we closed the nav\n  _endCardDeck: function() {\n    var li = this.nav.find('li');\n    li.removeAttr('style');\n    this.nav.find('h4').off( Effeckt.buttonPressedEvent );\n  },\n\n  // This check if the method exists first\n  // before call it\n  _callThisMethod: function(methodName){\n    // TODO: check if is an existing method\n    if ( typeof methodName !== 'undefined' ) {\n      this[methodName]();\n    }\n  }\n\n};\n\nEffecktOffScreenNav.init();\n"
  },
  {
    "path": "js/modules/page-transitions.js",
    "content": "var EffecktPageTransitions = {\n\n  fromPage: '',\n  toPage: '',\n  isAnimating: false,\n  isNextPageEnd: false,\n  isCurrentPageEnd: false,\n  transitionInEffect: '',\n  transitionOutEffect: '',\n\n  init: function() {\n\n    this.initPages();\n    this.bindUIActions();\n\n  },\n\n  initPages: function(){\n\n    var $pages = $('[data-effeckt-page]');\n\n    this.fromPage = $pages.first().addClass('effeckt-page-active');\n\n  },\n\n  bindUIActions: function() {\n\n    var self = this;\n\n    $('.effeckt-page-transition-button').on( Effeckt.buttonPressedEvent, function(e){\n\n      e.preventDefault();\n\n      var transitionInEffect  = $(this).data('effeckt-transition-in'),\n          transitionOutEffect = $(this).data('effeckt-transition-out')\n          transitionPage      = $(this).data('effeckt-transition-page');\n\n      if ( $(this).data(\"effeckt-needs-perspective\")) {\n        $(\"html\").addClass(\"md-perspective\");\n      }\n\n      self.transitionPage( transitionPage, transitionInEffect, transitionOutEffect );\n\n    });\n  },\n\n  transitionPage: function( transitionPage, transitionInEffect, transitionOutEffect ) {\n\n    if ( this.isAnimating ) {\n\n      return false;\n\n    }\n\n    this.isAnimating = true;\n    this.isCurrentPageEnd = false;\n    this.isNextPageEnd = false;\n    this.transitionInEffect = transitionInEffect;\n    this.transitionOutEffect= transitionOutEffect;\n\n    // Get Pages\n    this.fromPage = $('[data-effeckt-page].effeckt-page-active');\n    this.toPage   = $('[data-effeckt-page=\"' + transitionPage + '\"]');\n\n    // Add this class to prevent scroll to be displayed\n    this.toPage.addClass('effeckt-page-animating effeckt-page-active ' + this.transitionInEffect);\n    this.fromPage.addClass('effeckt-page-animating');\n\n    // Set Transition Class\n    this.fromPage.addClass(this.transitionOutEffect);\n    \n    var self= this;\n    \n    this.toPage.on( Effeckt.transitionAnimationEndEvent, function() {\n      \n      self.toPage.off( Effeckt.transitionAnimationEndEvent );\n      self.isNextPageEnd = true;\n\n      if ( self.isCurrentPageEnd ) {\n        self.resetTransition();\n      }\n    });\n\n    this.fromPage.on( Effeckt.transitionAnimationEndEvent, function () {\n\n      self.fromPage.off( Effeckt.transitionAnimationEndEvent );\n      self.isCurrentPageEnd = true;\n\n      if ( self.isNextPageEnd ) {\n        self.resetTransition();\n      }\n\n    });\n\n  },\n\n  resetTransition: function() {\n\n    this.isAnimating = false;\n    this.isCurrentPageEnd = false;\n    this.isNextPageEnd = false;\n\n    this.fromPage.removeClass('effeckt-page-animating effeckt-page-active ' + this.transitionOutEffect);//.hide();\n    this.toPage.removeClass('effeckt-page-animating ' + this.transitionInEffect);\n\n    $(\"html\").removeClass(\"md-perspective\");\n  }\n\n};\n\nEffecktPageTransitions.init();"
  },
  {
    "path": "js/modules/positional-modals.js",
    "content": "var EffecktPositionalModals = {\n\n  modalButtonClass: '.effeckt-positional-modal-button',\n  modalCloseButtonClass: '.effeckt-modal-close',\n  modalWrapClass: 'effeckt-positional-modal-wrap',\n\n  modalsList: [],\n\n  init: function() {\n    this.bindUIActions();\n  },\n\n  bindUIActions: function() {\n    var self = this;\n\n    $(this.modalButtonClass).on( Effeckt.buttonPressedEvent, function(e) {\n      e.preventDefault();\n      self.openModal($(this));\n    });\n\n    $(document).on( Effeckt.buttonPressedEvent, this.modalCloseButtonClass, function(e) {\n      e.preventDefault();\n      self.close($(this));\n    });\n  },\n\n  openModal: function($el) {\n\n    var self = this,\n        style = $el.data('effeckt-type'),\n        position = $el.data('effeckt-position'),\n        buttonPosition = $el.offset(),\n        buttonSize = {\n          'width': $el.outerWidth(),\n          'height': $el.outerHeight()\n        },\n        // This only work with page transition\n        scrollTop = $('.effeckt-page-active').scrollTop();\n\n    // don't open if already open\n    if (this.contains($el)) {\n      return false;\n    }\n\n    var modal = this.createModal($(\"#effeckt-modal-wrap\").html(), style, position);\n    modal.show();\n    console.log(modal.width());\n\n    // append to dom, add to list\n    this.add($el, modal);\n\n    // TODO: check if modal window is outside the view.\n    // If it's outside switch position\n\n    // change based on position\n    switch ( position ) {\n\n      case 'below':\n        modal.css({\n          'top': buttonPosition.top + buttonSize.height + scrollTop,\n          'left': buttonPosition.left - (modal.outerWidth()/2) + buttonSize.width/2\n        });\n        break;\n\n      case 'right':\n        modal.css({\n          'top': buttonPosition.top - (modal.outerHeight()/2) + scrollTop + (buttonSize.height/2),\n          'left': buttonPosition.left + buttonSize.width\n        });\n        break;\n\n      case 'left':\n        modal.css({\n          'top': buttonPosition.top - (modal.outerHeight()/2) + scrollTop + (buttonSize.height/2),\n          'left': buttonPosition.left - (modal.outerWidth())\n        });\n        break;\n\n      default:\n      case 'above':\n        modal.css({\n          'top': buttonPosition.top - modal.outerHeight() + scrollTop,\n          'left': buttonPosition.left - (modal.outerWidth()/2) + (buttonSize.width/2)\n        });\n        break;\n    }\n\n    // todo: ensure is on top here.\n    // apply effect\n    modal.addClass('effeckt-show');\n\n  },\n\n  close: function($el) {\n\n    var self = this;\n\n    var modal = $el.parents('[class~=\"'+this.modalWrapClass+'\"]'),\n        sender = this.getSenderButton(modal);\n\n    modal.removeClass(\"effeckt-show\");\n\n    modal.on( Effeckt.transitionAnimationEndEvent, function() {\n      modal.off( Effeckt.transitionAnimationEndEvent );\n      modal.hide().remove();\n    });\n\n    this.remove(modal);\n    modal.find('.effeckt-positional-modal').removeClass('effeckt-show');\n\n    if (sender && sender.data(\"effeckt-needs-hide-class\")) {\n      modal.addClass(\"effeckt-hide\");\n    }\n\n  },\n\n  createModal: function(content, style, position) {\n    var modalWrap =\n      $('<div>')\n        .addClass('effeckt-positional-modal-wrap ' + style)\n        .attr('data-effeckt-position', position);\n\n    modalWrap.html(content);\n\n    return modalWrap;\n  },\n\n  getSenderButton: function(modal) {\n    var i;\n    for (var i = 0, len = this.modalsList.length; i < len; i++) {\n      if ( this.modalsList[i].modal.get(0) == modal.get(0) ) {\n        return this.modalsList[i].element;\n      }\n    }\n    return false;\n  },\n\n  add: function($el, modal) {\n    // add element to dom\n    // on the active page wrap\n    $('.effeckt-page-active').append(modal);\n\n    // add element to modal list\n    this.modalsList.push({\n      element: $el,\n      'modal': modal\n    });\n  },\n\n  remove: function(modal){\n    var i;\n    for (var i = 0, len = this.modalsList.length; i < len; i++) {\n      if ( this.modalsList[i].modal.get(0) == modal.get(0) ) {\n        this.modalsList.splice( i, 1 );\n        return true;\n      }\n    }\n  },\n\n  // check if already has modal open\n  contains: function($el) {\n    var i;\n    for (var i = 0, len = this.modalsList.length; i < len; i++) {\n      if ( this.modalsList[i].element.get(0) == $el.get(0) ) {\n        return true;\n      }\n    }\n    return false;\n  }\n};\n\nEffecktPositionalModals.init();\n"
  },
  {
    "path": "js/modules/tabs.js",
    "content": "/*!\n * strength.js\n * Original author: @aaronlumsden\n * Further changes, comments: @aaronlumsden\n *\n * Rewritten for effeckts project\n *\n * Licensed under the MIT license\n */\nvar Tabs = {\n\n  tabsWrapClass:  '.effeckt-tabs-wrap',\n  tabsClass:      '.effeckt-tabs a.effeckt-tab',\n  tabContentClass:'.effeckt-tab-content',\n\n  init: function() {\n\n    this.initComponent();\n    this.bindUIActions();\n\n  },\n\n  initComponent: function() {\n    \n    //keep a reference to this (Tabs) object.\n    var self = this;\n\n    $(this.tabsWrapClass).each(function(){\n\n      var $el             = $(this);\n      var effect          = $el.data('effeckt-type');\n      var tabContents     = $el.find(self.tabContentClass);\n      var firstTabContent = tabContents.first();\n      var tabs            = $el.find(self.tabsClass);\n\n      tabs.removeClass('active').first().addClass('active');\n      tabContents.not(':eq(0)').addClass('effeckt-hide');\n\n      firstTabContent.addClass('effeckt-show');\n      tabContents.parent().height(firstTabContent.height());\n\n    });\n\n  },\n\n  bindUIActions: function() {\n\n    //keep a reference to this (Tabs) object.\n    var self = this;\n\n    $(this.tabsClass).on( Effeckt.buttonPressedEvent, function(e) {\n      e.preventDefault();\n      self.showTab(this);\n    });\n\n  },\n\n  showTab: function(el) {\n\n    var tab         = $(el);\n    var tabsWrap    = tab.parents(this.tabsWrapClass);\n    var tabs        = tabsWrap.find(this.tabsClass);\n    var tabContents = tabsWrap.find(this.tabContentClass);\n    var effect      = tabsWrap.data('effeckt-type');\n    \n    //set active to this current clicked tab\n    tabs.removeClass('active');\n    tab.addClass('active');\n\n    var tabID = tab.attr('href');\n    var tabContent = tabContents.filter(tabID);\n\n    tabContents.removeClass('effeckt-show').addClass('effeckt-hide');\n    tabContent.addClass('effeckt-show');\n\n    //add parent height, just because of position: absolute;\n    tabContents.parent().height(tabContent.height());\n  }\n\n};\n\nTabs.init();\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"Effeckt\",\n  \"version\": \"0.5.0\",\n  \"devDependencies\": {\n    \"assemble\": \"^0.4.42\",\n    \"autoprefixer\": \"^3.1.0\",\n    \"grunt\": \"^0.4.5\",\n    \"grunt-autoprefixer\": \"^1.0.1\",\n    \"grunt-contrib-concat\": \"^0.5.0\",\n    \"grunt-contrib-connect\": \"^0.8.0\",\n    \"grunt-contrib-copy\": \"^0.6.0\",\n    \"grunt-contrib-watch\": \"^0.6.1\",\n    \"grunt-dev-update\": \"^0.9.0\",\n    \"grunt-gh-pages\": \"^0.9.1\",\n    \"grunt-sass\": \"^0.14.2\",\n    \"jit-grunt\": \"^0.8.0\"\n  },\n  \"engines\": {\n    \"node\": \">=0.10\"\n  }\n}\n"
  },
  {
    "path": "readme.md",
    "content": "# This repo is archived\n\n\nEffeckt.css\n===========\n\n\n**A Performant Transitions and Animations Library** : [http://h5bp.github.io/Effeckt.css](http://h5bp.github.io/Effeckt.css)\n\nEver notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?\n\nDesigning and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.\n\n@daneden did really nice work with [Animate.css](http://daneden.me/animate/) but I think the web would benefit if we could take that work to the next level. There's already been fantastic experiments and demos exploring CSS-based transitions, but it's distributed all over.\n\nOriginally started at [h5bp/lazyweb-requests#122](https://github.com/h5bp/lazyweb-requests/issues/122)\n\n#### Effeckt Trailer\n\n<a href=\"http://youtu.be/Qc40YDFA4Bg\">![image](https://f.cloud.github.com/assets/39191/725426/aa3af38c-e067-11e2-82e4-269086cb845d.png)</a>\n\n## Examples To Add\n\n* [tympanus.net/Development/ModalWindowEffects/](http://tympanus.net/Development/ModalWindowEffects/)\n* [tympanus.net/Development/PageTransitions/](http://tympanus.net/Development/PageTransitions/)\n* [tympanus.net/Development/PFold/index2.html](http://tympanus.net/Development/PFold/index2.html)\n* [leaverou.github.io/animatable/](http://leaverou.github.io/animatable/)\n* [lab.hakim.se/ladda/](http://lab.hakim.se/ladda/)\n* [lab.hakim.se/kontext/](http://lab.hakim.se/kontext/)\n* [lab.hakim.se/avgrund/](http://lab.hakim.se/avgrund/)\n* [lab.hakim.se/meny/](http://lab.hakim.se/meny/)\n\nBecause there are so many, I expect we could **group things by role**:\n\n* button/touch effects\n* state transition\n* modal/notification transition\n* attention attractors\n\n## Goals\n\n1. Provide a minimal UI. Only use style hooks for transitions and animations.\n1. Designer-curated set of classy and reasonable effects. (no [`easeInBounce`](http://easings.net/#easeInBounce))\n1. Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade)\n1. CSS performance regression testing (a la [bench.topcoat.io](http://bench.topcoat.io))\n1. Deliver jank-free *60fps* performance on target browsers/devices\n1. If a particular effect cannot deliver target performance (hey `blur()` css filter), it cannot be included.\n1. Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)\n1. Deliver a builder so users can pull only the CSS they need.\n1. There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap-based equivalent.\n\n## Action\n\n* If you know other transition/animation based demos/experiments that make sense to include here, file a ticket.\n* If you're interested in helping to define the API, let's hear it! File a ticket.\n* A web-based builder is a must. A command-line builder isn't important for this.\n\n## Getting Started\n\n- [https://github.com/h5bp/Effeckt.css/wiki/Getting-Started](https://github.com/h5bp/Effeckt.css/wiki/Getting-Started)\n\n## Code Style Guide\n\n- [https://github.com/h5bp/Effeckt.css/wiki/Code-Style-Guide](https://github.com/h5bp/Effeckt.css/wiki/Code-Style-Guide)\n\n## General Inquiries & Support\n\n- Effeckt.css Mailing List [https://groups.google.com/d/forum/effeckt](https://groups.google.com/d/forum/effeckt)\n\n## Bug Reports & Feature Requests\n\n- [http://github.com/h5bp/Effeckt.css/issues](https://github.com/h5bp/Effeckt.css/issues)\n"
  },
  {
    "path": "scss/_global.scss",
    "content": ".effeckt-perspective {\n  perspective: $effeckt-perspective;\n}\n\n.effeckt-show {\n  visibility: visible;\n}\n"
  },
  {
    "path": "scss/_variables.scss",
    "content": "// Overall\n$effeckt-transition-duration: 500ms !default;\n$effeckt-perspective: 600px !default;\n\n\n// Modals\n$effeckt-modal-transition-duration: 500ms !default;\n$effeckt-modal-animation-duration: $effeckt-modal-transition-duration*2 !default;\n\n// Forcing size so we can center w/o translate()\n$effeckt-modal-min-width: 320px !default;\n$effeckt-modal-max-width: 320px !default;\n$effeckt-modal-z-index: 2000 !default;\n\n\n\n// Buttons\n$effeckt-buttons-transition-duration: $effeckt-transition-duration !default;\n$effeckt-buttons-spinner-size: 32px !default;\n$effeckt-button-icon: \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEljb01vb24uaW8gLS0+IDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+IDxzdmcgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGZpbGw9IiNmZmZmZmYiPjxnPjxwYXRoIGQ9Ik0gMTYsMyBDIDEyLjUyOCwzIDkuMjYzLDQuMzUyIDYuODA4LDYuODA4IEMgNC4zNTIsOS4yNjMgMywxMi41MjggMywxNiBDIDMsMTkuNDcyIDQuMzUyLDIyLjczNyA2LjgwOCwyNS4xOTIgQyA5LjI2MywyNy42NDggMTIuNTI4LDI5IDE2LDI5IEMgMTkuNDcyLDI5IDIyLjczNywyNy42NDggMjUuMTkyLDI1LjE5MiBDIDI3LjY0OCwyMi43MzcgMjksMTkuNDcyIDI5LDE2IEMgMjksMTIuNTI4IDI3LjY0OCw5LjI2MyAyNS4xOTIsNi44MDggQyAyMi43MzcsNC4zNTIgMTkuNDcyLDMgMTYsMyBaIE0gMTYsMCBMIDE2LDAgQyAyNC44MzcsMCAzMiw3LjE2MyAzMiwxNiBDIDMyLDI0LjgzNyAyNC44MzcsMzIgMTYsMzIgQyA3LjE2MywzMiAwLDI0LjgzNyAwLDE2IEMgMCw3LjE2MyA3LjE2MywwIDE2LDAgWk0gMTQsMjJMIDE4LDIyTCAxOCwyNkwgMTQsMjZ6TSAxNCw2TCAxOCw2TCAxOCwxOEwgMTQsMTh6Ij48L3BhdGg+PC9nPjwvc3ZnPg==\";\n$effeckt-button-spinner: \"data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf///6+vr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs/Ly8vz8/AAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==\";\n\n\n// Page Transitions\n$effeckt-page-transition-duration: $effeckt-transition-duration * 2 !default;\n\n\n\n// Off Screen Nav\n$effeckt-off-screen-navigation-transition-duration: $effeckt-transition-duration !default;\n$effeckt-off-screen-navigation-list-item-amount: 15;\n\n\n// List Items\n$effeckt-list-item-transition-duration: $effeckt-transition-duration !default;\n$effeckt-list-scroll-transition-duration: $effeckt-transition-duration !default;\n\n\n\n// Form Elements\n// Radio and Checkboxes\n$effeckt-form-element-ckradio-ios7bg-off: #FFF !default;\n$effeckt-form-element-ckradio-ios7bg-on: #666 !default;\n$effeckt-form-element-ckradio-ios7border-radius: 15px !default;\n$effeckt-form-element-ckradio-ios7transition: all .3s ease-out !default;\n$effeckt-form-element-ckradio-ios7transition-after: all 0.1s ease-in .1s !default;\n\n\n// Tabs\n$effeckt-tabs-transition-duration: $effeckt-transition-duration !default;\n\n\n// Tooltips\n$effeckt-tooltip-transition-delay: .2s !default;\n$effeckt-tooltip-transition-duration: .3s !default;\n$effeckt-tooltip-background: black !default;\n$effeckt-tooltip-forground: white !default;\n$effeckt-tooltip-arrow-size: 5px !default;\n\n// Lazy loading\n$effeckt-lazy-loading-transition-duration: 0.5s;\n"
  },
  {
    "path": "scss/demo/demo.scss",
    "content": "// This version of Sass doesn't like using string MQ's apparently.\n// $mini: \"(max-width: 500px)\";\n\n// Reset\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.warning {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  padding: 0.5rem;\n  background: linear-gradient(#fff94d, #ddd610);\n  opacity: 0.95;\n  text-align: center;\n  z-index: 1000;\n}\n\n// to avoid extranaous animations while page settles\n.no-transitions,\n.no-transitions * {\n  transition: none !important;\n}\n\n// clearfix\n.group:after {\n  content: \"\";\n  display: block;\n  clear: both;\n}\n\n:root { // rem\n  font-size: large;\n  line-height: 1.4;\n  @media (max-width: 500px) {\n    font-size: small;\n  }\n}\n\n// is needed for overlay\nhtml, body {\n  height: 100%;\n  // testing\n  overflow: hidden;\n}\n\nbody {\n  background: #eee;\n  font-family: Sans-serif;\n  overflow: hidden; // for logo effect\n\n  // This is kinda good for performance overall\n  // But... you can't fixed position inside it then\n  // transform: translateZ(0);\n\n  @media (max-width: 500px) {\n  }\n}\n\n// Layout\n.page-wrap {\n  // Required for non-janky off-screen squishing\n  float: right;\n  width: 100%;\n}\n\n.effeckt {\n  padding: 2rem;\n  background: white;\n  margin: 0 0 1rem 0;\n  @media (max-width: 500px) {\n    padding: 1.5rem;\n  }\n  header {\n    margin: 0 0 1rem 0;\n    border-bottom: 2px solid #eee;\n    position: relative;\n    .source {\n      position: absolute;\n      right: 0;\n      bottom: 2px;\n      @media (max-width: 500px) {\n        position: relative;\n        display: block;\n        margin: 0.2rem 0;\n      }\n    }\n    &:nth-of-type(n+2) { // all but first\n      margin-top: 2rem;\n    }\n  }\n}\n.button-group {\n  line-height: 2;\n}\n\n\n\n// Typography\na {\n  text-decoration: none;\n  color: #ccc;\n}\na:hover, a:active {\n  color: black;\n}\nsubhead {\n  display: block;\n  font-size: 1.4rem;\n  margin: 0 0 2rem 0;\n}\n.mobile-break {\n  display: none;\n  @media (max-width: 500px) {\n    display: block;\n  }\n}\nh1 {\n  margin: 0 0 1rem 0;\n  @media (max-width: 500px) {\n    line-height: 0.8;\n  }\n}\nh1 span {\n  font-size: 1.5rem;\n  position: relative;\n  display: inline-block;\n  opacity: 0;\n  width: 50px;\n  height: 50px;\n  line-height: 50px;\n  background: #ccc;\n  color: white;\n  text-align: center;\n  text-transform: uppercase;\n  @media (max-width: 500px) {\n    font-size: 0.8rem;\n    width: 28px;\n    height: 28px;\n    line-height: 28px;\n  }\n}\nh2 {\n  margin: 0;\n}\nh3 {\n  margin: 0;\n}\nh4 {\n  margin: 0 0 0.5rem 0;\n}\np, ul, ol, blockquote, pre {\n  margin: 0 0 1rem 0;\n}\n\nbutton {\n  padding: 0.25rem;\n}\n\nhr {\n  height: 0;\n  border: 0;\n  border-top: 1px solid #ccc;\n}\n\nh1 span:nth-of-type(1) {\n  animation: logo-from-horz 0.5s ease forwards;\n  transform: translateX(-50px);\n  background: #666;\n}\nh1 span:nth-of-type(2) {\n  animation: logo-from-vert 0.5s 0.1s ease forwards;\n  transform: translateY(-50px);\n  background: #444;\n}\nh1 span:nth-of-type(3) {\n  animation: logo-from-vert 0.5s 0.2s ease forwards;\n  transform: translateX(50px);\n  background: #666;\n}\nh1 span:nth-of-type(4) {\n  animation: logo-from-horz 0.3s 0.3s ease forwards;\n  transform: translateX(50px);\n  background: #444;\n}\nh1 span:nth-of-type(5) {\n  animation: logo-from-horz 0.3s 0.4s ease forwards;\n  transform: translateX(-50px);\n  background: #666;\n}\nh1 span:nth-of-type(6) {\n  animation: logo-from-horz 0.3s 0.5s ease forwards;\n  transform: translateX(50px);\n  background: #444;\n}\nh1 span:nth-of-type(7) {\n  animation: logo-from-vert 0.3s 0.6s ease forwards;\n  transform: translateY(-50px);\n  background: #666;\n}\nh1 span:nth-of-type(8) {\n  animation: logo-from-horz 0.2s 1.1s ease forwards;\n  transform: translateX(1000px);\n  background: none;\n  color: black;\n}\nh1 span:nth-of-type(9) {\n  animation: logo-from-horz 0.2s 1.1s ease forwards;\n  transform: translateX(1000px);\n}\nh1 span:nth-of-type(10) {\n  animation: logo-from-horz 0.2s 1.1s ease forwards;\n  transform: translateX(1000px);\n}\nh1 span:nth-of-type(11) {\n  animation: logo-from-horz 0.2s 1.1s ease forwards;\n  transform: translateX(1000px);\n}\n@keyframes logo-from-horz {\n  100% { transform: translateX(0); opacity: 1; }\n}\n@keyframes logo-from-vert {\n  100% { transform: translateY(0); opacity: 1;}\n}\n\n\n\n\n// Contributors\n.contributors {\n  background: #222;\n  color: #eee;\n  header {\n    border-bottom-color: #666;\n  }\n  ol { margin-left: 35px; }\n  hr { margin: 15px 0; }\n}\n.fluid-video {\n  height: 0;\n  padding-top: 62.5%;\n  position: relative;\n  iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n\n\n\n\n// Individual demos, not specific to style\n\n.button-demo-wrap {\n  width: 35%;\n  float: left;\n  &:nth-child(2n) {\n    clear: both;\n  }\n  @media (max-width: 500px) {\n    width: 100%;\n    float: none;\n  }\n}\n\n\n.effeckt-list-wrap {\n  width: 50%;\n  float: left;\n  margin: 0 0 2rem 0;\n  &:nth-child(even) {\n    clear: both;\n    padding-right: 20px;\n  }\n}\n\n\n.effeckt-demo-list-scroll {\n  > ul {\n    width: 32%;\n    float: left;\n    margin-right: 2%;\n    margin-bottom: 2%;\n    &:nth-of-type(3n) {\n      margin-right: 0;\n    }\n    @media (max-width: 500px) {\n      width: 100%;\n      float: none;\n      height: 250px;\n      margin: 0 0 1rem 0;\n    }\n  }\n}\n\n\n.effeckt-toggle-demo {\n  min-height: 220px;\n}\n[data-toggle-trigger] { // Toggle buttons\n  margin-bottom: 20px;\n}\n\n.effeckt-modal {\n  background: white;\n  h3 {\n    padding: 1rem;\n    color: white;\n    background: #444;\n  }\n}\n\n\n.effeckt-modal-content {\n  padding: 1rem;\n}\n\n.effeckt-modal-overlay {\n  z-index: 1000;\n  background: rgba(black, 0.5);\n}\n\n// Pisitional Modal\n.effeckt-positional-modal-wrap {\n  .effeckt-modal {\n    padding: 10px;\n    background: #ccc;\n  }\n  .effeckt-modal-content {\n    background: white;\n  }\n}\n\n\n// Buttons\n.effeckt-button {\n  background: #444;\n  color: white;\n  border: 0;\n  padding: 0.8rem 1rem;\n  font-family: inherit;\n  font-size: 1.3em;\n  margin: 0 0.25rem 0.6rem 0;\n  white-space: nowrap;\n  cursor: pointer;\n  outline: none;\n  // As of 8-17-13, Autoprefixer does not catch these\n  -webkit-appearance: none;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: rgba(black, 0);\n}\n\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"]:after {\n  background: #7aca7c;\n  color: #358337;\n}\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"]:before {\n  background: #e96a6a;\n  color: #a33a3a;\n}\n\n.effeckt-button[data-loading] {\n  cursor: default;\n}\n\n.effeckt-page-transition {\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  overflow: hidden;\n  background: #555;\n}\n\n.effeckt-page-transition-content{\n  position: relative;\n  top: 50%;\n  left: 50%;\n  width: 200px;\n  margin: -100px 0 0 -100px;\n  color: white;\n}\n\n\n.effeckt-off-screen-nav {\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  overflow-y: auto;\n  background: #333;\n  visibility: hidden;\n  width: 12rem; // default, but some effects require different things\n  ul {\n    list-style: none;\n  }\n  li {\n    &:first-child {\n      a { border-top: 0; }\n    }\n    &:last-child {\n      a { border-bottom: 0; }\n    }\n    a {\n      display: block;\n      padding: 0.3rem 1rem;\n      color: white;\n      border-bottom: 1px solid #444;\n      &:hover, &:focus {\n        background: #444;\n      }\n      &:active {\n        background: #222;\n      }\n    }\n  }\n  // Make the close button move along with the header\n  header {\n    position: relative;\n  }\n\n  h4 {\n    color: white;\n    background: #333;\n    border-bottom: 1px solid #eee;\n    padding: 1rem 0.5rem 0.2rem 0;\n    margin: 0 1rem 1rem;\n    text-transform: uppercase;\n    font-size: 0.65rem;\n    letter-spacing: 0.1rem;\n    position: relative;\n  }\n\n}\n\n.effeckt-off-screen-nav-close {\n  position: absolute;\n  right: 1rem;\n  top: 0.65rem;\n  font-size: 100%;\n  z-index: 300;\n\n  &:hover, &:focus {\n    color: red;\n  }\n}\n.effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show ~ .page-wrap .off-screen-nav-cover {\n  background: linear-gradient(left, rgba(#eee, 0), rgba(#eee, 0.9));\n}\n\n.effeckt-off-screen-nav-top-card-deck,\n.effeckt-off-screen-nav-bottom-card-deck {\n  cursor: pointer;\n  background: transparent;\n\n  h4 {\n    margin:0;\n    padding: 1rem;\n    border-bottom: 0;\n  }\n\n  li {\n    background-color: #333;\n    border-bottom:1px solid #eee;\n  }\n\n  a {\n    height: 100%;\n  }\n\n  .effeckt-off-screen-nav-close {\n    right: 1rem;\n  }\n}\n\n.effeckt-off-screen-nav-bottom-card-deck {\n  li {\n    border-top:1px solid #eee;\n    border-bottom:none;\n  }\n}\n\n.effeckt-off-screen-nav-left-bounce,\n.effeckt-off-screen-nav-left-bounce-out,\n.effeckt-off-screen-nav-right-bounce,\n.effeckt-off-screen-nav-right-bounce-out {\n  box-sizing: content-box;\n}\n\n\n// The Captions\n.effeckt-caption {\n  float: left;\n  overflow: hidden;\n  width: 48%;\n  margin: 0 4% 1rem 0;\n\n  &:nth-child(2n) {\n    margin-right: 0;\n  }\n\n  img {\n    width: 100%;\n    display: block;\n  }\n\n  figcaption {\n    background: rgba(black, 0.8);\n    color: white;\n    padding: 1rem;\n\n    h3 {\n      font-size: 1.2rem;\n    }\n\n    p {\n      margin: 0;\n    }\n  }\n}\n\n\n.effeckt-list {\n  list-style: none;\n  li {\n    background: #e6e6e6;\n    padding: 0 0.5rem;\n    overflow: hidden;\n    margin-bottom: 2px;\n    line-height: 2;\n    &.new-item {\n      background: #ccc;\n    }\n  }\n}\n\n\n.effeckt-list-scroll {\n  width: 230px;\n  height: 480px;\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  list-style: none;\n  > li {\n    padding: 0.5rem;\n    background: #eee;\n    color: #252525;\n    font-size: 18px;\n    &:nth-child(odd) {\n      background: #e6e6e6;\n    }\n  }\n}\n\n\n// Contributors\n.contributors-list {\n  list-style: none;\n  overflow: hidden;\n  li {\n    float: left;\n    margin: 0 10px 10px 0;\n  }\n  img {\n    width: 40px;\n    height: 40px;\n  }\n}\n\n// Extra pages (page transition testing)\n[data-effeckt-page=\"page-1\"] {\n  background-color: #EEEEEE;\n}\n[data-effeckt-page=\"page-2\"] {\n  color: #203513;\n  background-color: #99CF78;\n}\n[data-effeckt-page=\"page-3\"] {\n  color: #282828;\n  background-color: #FECD3D;\n}\n[data-effeckt-page=\"page-4\"] {\n  color: #FFFEFE;\n  background-color: #CD4F5B;\n}\n[data-effeckt-page=\"page-5\"] {\n  color: #194772;\n  background-color:#62A1DC;\n}\n\n// Tabs\nul.effeckt-tabs {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  li {\n    float: left;\n    margin-right:2px;\n\n    a {\n      display: block;\n      padding: 10px 15px;\n      color: #383838;\n      background-color: #EEEEEE;\n\n      &.active, &:hover {\n        background-color: #E8E8E8;\n      }\n    }\n  }\n}\n\n.effeckt-tabs-container {\n  padding:10px;\n  margin-bottom: 20px;\n  border:1px solid #DDD;\n\n  .effeckt-tab-content {\n    top: 10px;\n  }\n}\n\n.effeckt-lazy-loading-options {\n  margin:0 0 15px;\n  label {\n    margin: 0 5px;\n  }\n}\n.effeckt-lazy-loading {\n  // Maybe this won't work on many browsers\n  // But the animations looks cooler like this.\n  column-count:3;\n  column-gap:0;\n  li {\n    display: block;\n    list-style-type: none;\n    padding: 0 5px 5px 0;\n  }\n  a {\n    display: inline-block;\n    background: #DDD;\n    border:1px solid #ccc;\n    width: 100%;\n    height: 250px;\n  }\n\n  li:nth-child(1) a,\n  li:nth-child(12n+12) a {\n    height: 500px;\n  }\n  li:nth-child(3n+3) a {\n    height: 350px;\n  }\n  li:nth-child(5n+5) a {\n    height: 200px;\n  }\n}\n"
  },
  {
    "path": "scss/effeckt.scss",
    "content": "@import \"_variables\";\n@import \"_global\";\n\n@import \"modules/buttons\";\n@import \"modules/captions\";\n@import \"modules/list-items\";\n@import \"modules/list-scroll\";\n@import \"modules/modal\";\n@import \"modules/off-screen-nav\";\n@import \"modules/page-transitions\";\n@import \"modules/tooltips\";\n@import \"modules/form-elements\";\n@import \"modules/tabs\";\n@import \"modules/positional-modals\";\n//@import \"modules/lazy-loading\";\n"
  },
  {
    "path": "scss/effeckts/captions/_mixins.scss",
    "content": "@mixin effecktCaptionFade() {\n  figcaption {\n    opacity: 1;\n  }\n}\n\n@mixin effecktCaptionOffset() {\n  figcaption {\n    transform: translate(15px, 15px);\n    opacity: 1;\n    z-index: 100; //prevent ovarslap\n    overflow: hidden;\n  }\n}\n\n@mixin effecktCaptionSlide() {\n  img {\n    transform: translateY(-50%);\n  }\n\n  figcaption {\n    transform: translateY(50%);\n  }\n}\n\n@mixin effecktCaptionGuillotine($direction) {\n  img {\n    transform: translateY($direction);\n  }\n}\n\n@mixin effecktQrtrSlideUp() {\n  figcaption {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@mixin effecktSqoosh() {\n  .effeckt-figcaption-wrap {\n    opacity: 1;\n    transition-delay: 0.25s;\n  }\n\n  img {\n    transform: scale(0.5) translateY(-80px);\n    transition-delay: 0;\n  }\n}\n\n@mixin effecktQrtrSlide() {\n  figcaption {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@mixin effecktQrtrFall() {\n  figcaption {\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n  }\n}\n\n@mixin effecktQrtrTwoStep() {\n  figcaption {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  .effeckt-figcaption-wrap {\n    transform: translateX(0);\n  }\n}\n\n@mixin effecktCoverPushRight() {\n  figcaption {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  img {\n    transform: translateX(100%);\n  }\n}\n\n@mixin effecktCoverSlideTop() {\n  figcaption {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@mixin effecktQrtrZoom() {\n  figcaption {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  img {\n    transform: scale(1.1);\n  }\n}\n\n@mixin effecktRevolvingDoor($rotate-dir: y, $perspective:1300px, $rotate-start:0, $rotate-end: -180deg) {\n  @if $rotate-dir == y {\n    figcaption {\n      transform: perspective($perspective) rotateY($rotate-start);\n    }\n\n    img {\n      transform: perspective($perspective) rotateY($rotate-end);\n    }\n  } @else {\n    figcaption {\n      transform: perspective($perspective) rotateX($rotate-start);\n    }\n\n    img {\n      transform: perspective($perspective) rotateX($rotate-end);\n    }\n  }\n}"
  },
  {
    "path": "scss/effeckts/modals/_3ds.scss",
    "content": "// Effect: 3D flip horizontal\n.flip-horizontal-3D {\n  perspective: $effeckt-perspective;\n}\n.flip-horizontal-3D .effeckt-content {\n  transform: rotateY(-70deg);\n  transform-style: preserve-3d;\n  opacity: 0;\n}\n.effeckt-show.flip-horizontal-3D .effeckt-content {\n  transform: rotateY(0deg);\n  opacity: 1;\n}\n\n\n// Effect: 3D flip vertical\n.flip-vertical-3D {\n  perspective: $effeckt-perspective;\n}\n.flip-vertical-3D .effeckt-content {\n  transform: rotateX(-70deg);\n  transform-style: preserve-3d;\n  opacity: 0;\n}\n.effeckt-show.flip-vertical-3D .effeckt-content {\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n\n// Effect: 3D sign\n.sign-3D {\n  perspective: $effeckt-perspective;\n}\n.sign-3D .effeckt-content {\n  transform: rotateX(-60deg);\n  transform-origin: 50% 0;\n  transform-style: preserve-3d;\n  opacity: 0;\n}\n.effeckt-show.sign-3D .effeckt-content {\n  transform: rotateX(0deg);\n  opacity: 1;\n}\n\n\n// Effect: 3D Slit\n.slit-3D {\n  perspective: $effeckt-perspective;\n}\n.slit-3D .effeckt-content {\n  transform: translateZ(-3000px) rotateY(90deg);\n  transform-style: preserve-3d;\n  opacity: 0;\n}\n.effeckt-show.slit-3D .effeckt-content {\n  animation: modalSlit 0.7s forwards ease-out;\n}\n\n@keyframes modalSlit {\n  50% {\n    transform: translateZ(-250px) rotateY(89deg);\n    opacity: 0.75;\n    animation-timing-function: ease-in;\n  }\n  100% {\n    transform: translateZ(0) rotateY(0deg);\n    opacity: 1;\n  }\n}\n\n\n// Effect:  3D Rotate from bottom\n.rotate-from-bottom-3D {\n  perspective: $effeckt-perspective;\n}\n.rotate-from-bottom-3D .effeckt-content {\n  transform: translateY(100%) rotateX(90deg);\n  transform-style: preserve-3d;\n  transform-origin: 0 100%;\n  opacity: 0;\n}\n.effeckt-show.rotate-from-bottom-3D .effeckt-content {\n  transform: translateY(0%) rotateX(0deg);\n  opacity: 1;\n}\n\n\n// Effect:  3D Rotate in from left\n.rotate-from-left-3D {\n  perspective: $effeckt-perspective;\n}\n.rotate-from-left-3D .effeckt-content {\n  transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n  transform-style: preserve-3d;\n  transform-origin: 0 100%;\n  opacity: 0;\n}\n.effeckt-show.rotate-from-left-3D .effeckt-content {\n  transform: translateZ(0px) translateX(0%) rotateY(0deg);\n  opacity: 1;\n}\n\n\n// Let me in\n.let-me-in ~ [data-effeckt-page].effeckt-page-active {\n  transition: $effeckt-modal-transition-duration;\n  transform: translate3d(0, 0, 0);\n  transform-origin: 50% 0%;\n  transform-style: preserve-3d;\n}\n.let-me-in .effeckt-content {\n  opacity: 0;\n  transform: translate3d(0, 200%, 0);\n}\n.effeckt-show.let-me-in ~ [data-effeckt-page].effeckt-page-active {\n  transform: rotateX(-7deg);\n  opacity: 1;\n\n  &:after {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n.effeckt-show.let-me-in .effeckt-content {\n  transform: translate3d(0, -50%, 0);\n  opacity: 1;\n}\n\n\n// Effect: Make way\n.make-way {\n  perspective: $effeckt-perspective;\n}\n.make-way ~ [data-effeckt-page].effeckt-page-active {\n  transform-style: preserve-3d;\n  transform-origin: 0% 50%;\n}\n.make-way .effeckt-content {\n  transform: translate3d(200%, 0, 0);\n  opacity: 0;\n}\n.effeckt-show.make-way ~ [data-effeckt-page].effeckt-page-active {\n  animation: makeWay $effeckt-modal-transition-duration forwards ease-in;\n}\n.effeckt-show.make-way .effeckt-content {\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n@keyframes makeWay {\n  50% {\n    transform: translate3d(0, 0, -50px) rotateY(5deg);\n  }\n  100% {\n    transform: translate3d(0, 0, -200px);\n  }\n}\n\n\n// Effect: Deep Content\n.deep-content .effeckt-content {\n  transform: scale(0.8);\n  opacity: 0;\n}\n\n.effeckt-show.deep-content .effeckt-content {\n  transform: scale(1.1);\n  opacity: 1;\n}\n\n.deep-content ~ [data-effeckt-page].effeckt-page-active {\n  transform: translate3d(0, 0, 0);\n  transition: $effeckt-modal-transition-duration;\n}\n\n.effeckt-show.deep-content ~ [data-effeckt-page].effeckt-page-active {\n  transform: translate3d(0, 0, -85px);\n  filter: blur(3px);\n}\n"
  },
  {
    "path": "scss/effeckts/modals/_misc.scss",
    "content": "// Effect: Newspaper\n.newspaper .effeckt-content {\n  transform: scale(0.5) rotate(720deg);\n  opacity: 0;\n}\n.effeckt-show.newspaper .effeckt-content {\n  transform: scale(1) rotate(0deg);\n  opacity: 1;\n}\n\n// Effect: Side fall\n.side-fall {\n  perspective: $effeckt-perspective;\n  transform-style: preserve-3d;\n}\n.side-fall .effeckt-content {\n  transition-timing-function: ease-out;\n  transform: translateZ(600px) translateX(30%) rotate(10deg);\n  opacity: 0;\n}\n\n.effeckt-show.side-fall .effeckt-content {\n  transition-timing-function: ease-in;\n  transform: translateZ(0) translateX(0) rotate(0deg);\n  opacity: 1;\n}\n\n// Effect: Fade In (Just me)\n.fade-in .effeckt-content {\n  opacity: 0;\n}\n.effeckt-show.fade-in .effeckt-content {\n  opacity: 1;\n}\n\n// Effect:  Blur\n.effeckt-show.blur ~ [data-effeckt-page] {\n  filter: blur(3px);\n  transform: translate3d(0, 0, 0);\n}\n.blur .effeckt-content {\n  opacity: 0;\n}\n.effeckt-show.blur ~ [data-effeckt-page] {\n  transition: all $effeckt-modal-transition-duration ease;\n}\n.effeckt-show.blur .effeckt-content {\n  opacity: 1;\n}\n\n// Effect: Tilt Fall / From the top to bottom with left tilt on the way out */\n.tilt-fall .effeckt-content {\n  transform: translateY(100%) rotate(-25deg);\n  opacity: 0;\n}\n\n\n// Effect: Shake\n.shake .effeckt-content {\n  opacity: 0;\n}\n.effeckt-show.shake .effeckt-content {\n  opacity: 1;\n  animation-name: shake;\n  animation-timing-function: ease;\n}\n@keyframes shake {\n  0%, 100% {transform: translateX(0);}\n  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}\n  20%, 40%, 60%, 80% {transform: translateX(10px);}\n}\n\n\n// Effect: Bounce\n.bounce .effeckt-content {\n  opacity: 0;\n}\n.effeckt-show.bounce .effeckt-content {\n  opacity: 1;\n  animation-name: bounce;\n  animation-timing-function: ease;\n}\n@keyframes bounce {\n  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}\n  40% {transform: translateY(-30px);}\n  60% {transform: translateY(-15px);}\n}\n\n\n// Effect: Pulse\n.pulse .effeckt-content {\n  opacity: 0;\n}\n.effeckt-show.pulse .effeckt-content {\n  opacity: 1;\n  animation-name: pulse;\n  animation-timing-function: ease;\n}\n@keyframes pulse {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.1); }\n  100% { transform: scale(1); }\n}\n\n// Effect: wobble\n.wobble .effeckt-content {\n  opacity: 0;\n}\n.effeckt-show.wobble .effeckt-content {\n  opacity: 1;\n  animation-name: wobble;\n  animation-timing-function: ease;\n}\n@keyframes wobble {\n  0% { transform: translateX(0%); }\n  15% { transform: translateX(-25%) rotate(-5deg); }\n  30% { transform: translateX(20%) rotate(3deg); }\n  45% { transform: translateX(-15%) rotate(-3deg); }\n  60% { transform: translateX(10%) rotate(2deg); }\n  75% { transform: translateX(-5%) rotate(-1deg); }\n  100% { transform: translateX(0%); }\n}\n\n// Effect: Swing\n.swing .effeckt-content {\n  transform-origin: 50% 0%;\n  opacity: 0;\n}\n.effeckt-show.swing .effeckt-content {\n  opacity: 1;\n  animation-name: swing;\n  animation-timing-function: ease;\n}\n@keyframes swing {\n  20% { transform: rotate(15deg); }\n  40% { transform: rotate(-10deg); }\n  60% { transform: rotate(5deg); }\n  80% { transform: rotate(-5deg); }\n  100% { transform: rotate(0deg); }\n}\n\n// Effect: Tada\n.tada .effeckt-content {\n  opacity: 0;\n}\n.effeckt-show.tada .effeckt-content {\n  opacity: 1;\n  animation-name: tada;\n  animation-timing-function: ease;\n}\n@keyframes tada {\n  0% {transform: scale(1);}\n  10%, 20% {transform: scale(0.9) rotate(-3deg);}\n  30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}\n  40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}\n  100% {transform: scale(1) rotate(0);}\n}\n"
  },
  {
    "path": "scss/effeckts/modals/_scale.scss",
    "content": "// Effeckt: Scale Up From Below\n.from-below .effeckt-content {\n  transform: scale(0.5);\n  opacity: 0;\n}\n.effeckt-show.from-below .effeckt-content {\n  transform: scale(1);\n  opacity: 1;\n}\n\n\n// Effeckt: Scale Down From Above\n.from-above .effeckt-content {\n  transform: scale(1.5);\n  opacity: 0;\n}\n.effeckt-show.from-above .effeckt-content {\n  transform: scale(1);\n  opacity: 1;\n}\n\n// Effeckt Out: Scale Down To Below\n.to-below .effeckt-content {\n  transform: scale(0.5);\n  opacity: 0;\n}\n\n// Effeckt Out: Scale Up To Above\n.to-above .effeckt-content {\n  transform: scale(1.5);\n  opacity: 0;\n}\n"
  },
  {
    "path": "scss/effeckts/modals/_slide.scss",
    "content": "// Effect: Slide from the top\n.slide-in-top .effeckt-content {\n  transform: translate3d(0, -100%, 0);\n  opacity: 0;\n}\n.effeckt-show.slide-in-top .effeckt-content {\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n// Effect: Slide from the right\n.slide-in-right .effeckt-content {\n  transform: translate3d(30%, 0, 0);\n  opacity: 0;\n}\n.effeckt-show.slide-in-right .effeckt-content {\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n// Effect: Slide from the bottom\n.slide-in-bottom .effeckt-content {\n  transform: translate3d(0, 30%, 0);\n  opacity: 0;\n}\n.effeckt-show.slide-in-bottom .effeckt-content {\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n// Effect: Slide from the left\n.slide-in-left .effeckt-content {\n  transform: translate3d(-30%, 0, 0);\n  opacity: 0;\n}\n.effeckt-show.slide-in-left .effeckt-content {\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n// Effect: Stick Up\n.sticky-up {\n  top: 0;\n  transform: translate(-50%, 0);\n}\n.sticky-up .effeckt-content {\n  transform: translate3d(0, -100%, 0);\n  opacity: 0;\n}\n.effeckt-show.sticky-up .effeckt-content {\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n\n// Effect:  Slip in from the top with perspective on container\n.slip-in-from-top ~ [data-effeckt-page],\n.slip-in-from-top ~ .effeckt-overlay {\n  transform-style: preserve-3d;\n  transform-origin: 50% 100%;\n}\n.slip-in-from-top .effeckt-content {\n  transform: translateY(-200%);\n  opacity: 0;\n}\n.effeckt-show.slip-in-from-top ~ [data-effeckt-page],\n.effeckt-show.slip-in-from-top ~ .effeckt-overlay {\n  animation: OpenTop $effeckt-modal-transition-duration forwards ease-in;\n}\n.effeckt-show.slip-in-from-top .effeckt-content {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n@keyframes OpenTop {\n  50% {\n    transform: rotateX(10deg);\n    animation-timing-function: ease-out;\n  }\n}\n\n// Effeckt Out: Slide Out Bottom\n.slide-out-bottom .effeckt-content {\n  transform: translateY(100%);\n  opacity: 0;\n}\n\n// Effeckt Out: Slide Out Top\n.slide-out-top .effeckt-content {\n  transform: translateY(-100%);\n  opacity: 0;\n}\n\n// Effeckt Out: Slide Out Right\n.slide-out-right .effeckt-content {\n  transform: translateX(100%);\n  opacity: 0;\n}\n\n// Effeckt Out: Slide Out Left\n.slide-out-left .effeckt-content {\n  transform: translateX(-100%);\n  opacity: 0;\n}\n"
  },
  {
    "path": "scss/modules/buttons.scss",
    "content": "// TODO\n// - Some of the moment happening here is happening with top/left instead of translate()\n\n@import \"../_variables\";\n\n.effeckt-button {\n  position: relative;\n}\n\n// Spinner animation\n.effeckt-button .spinner {\n  position: absolute;\n  width: $effeckt-buttons-spinner-size;\n  height: $effeckt-buttons-spinner-size;\n  top: 50%;\n  margin-top: -($effeckt-buttons-spinner-size / 2);\n  margin-left: -($effeckt-buttons-spinner-size / 2);\n  opacity: 0;\n  background-image: url(#{$effeckt-button-spinner});\n  background-size: $effeckt-buttons-spinner-size auto;\n}\n\n\n// Easing Setup\n.effeckt-button,\n.effeckt-button .spinner,\n.effeckt-button .label {\n  transition: $effeckt-buttons-transition-duration cubic-bezier(0.175, 0.885, 0.320, 1.275) all;\n}\n\n\n// Expand Right\n.effeckt-button[data-effeckt-type=\"expand-right\"] .spinner {\n  right: $effeckt-buttons-spinner-size / 2;\n}\n.effeckt-button[data-effeckt-type=\"expand-right\"][data-loading] {\n  padding-right: $effeckt-buttons-spinner-size * 2;\n}\n.effeckt-button[data-effeckt-type=\"expand-right\"][data-loading] .spinner {\n  opacity: 1;\n}\n\n\n// Expand Left\n.effeckt-button[data-effeckt-type=\"expand-left\"] .spinner {\n  left: $effeckt-buttons-spinner-size / 2;\n  margin-left: 0;\n}\n.effeckt-button[data-effeckt-type=\"expand-left\"][data-loading] {\n  padding-left: $effeckt-buttons-spinner-size * 2\n}\n.effeckt-button[data-effeckt-type=\"expand-left\"][data-loading] .spinner {\n  opacity: 1;\n}\n\n\n// Expand Up\n.effeckt-button[data-effeckt-type=\"expand-up\"] {\n  overflow: hidden;\n}\n.effeckt-button[data-effeckt-type=\"expand-up\"] .spinner {\n  top: $effeckt-buttons-spinner-size;\n  left: 50%;\n}\n.effeckt-button[data-effeckt-type=\"expand-up\"][data-loading] {\n  padding-top: $effeckt-buttons-spinner-size * 2;\n}\n.effeckt-button[data-effeckt-type=\"expand-up\"][data-loading] .spinner {\n  opacity: 1;\n  top: $effeckt-buttons-spinner-size / 2;\n  margin-top: 0;\n}\n\n\n// Expand Down\n.effeckt-button[data-effeckt-type=\"expand-down\"] {\n  overflow: hidden;\n}\n.effeckt-button[data-effeckt-type=\"expand-down\"] .spinner {\n  left: 50%;\n  top: 100%;\n  margin-top: -($effeckt-buttons-spinner-size * 1.5);\n}\n.effeckt-button[data-effeckt-type=\"expand-down\"][data-loading] {\n  padding-bottom: $effeckt-buttons-spinner-size * 2;\n}\n.effeckt-button[data-effeckt-type=\"expand-down\"][data-loading] .spinner {\n  opacity: 1;\n}\n\n\n// Slide Left\n.effeckt-button[data-effeckt-type=\"slide-left\"] {\n  overflow: hidden;\n}\n.effeckt-button[data-effeckt-type=\"slide-left\"] .label {\n  position: relative;\n}\n.effeckt-button[data-effeckt-type=\"slide-left\"] .spinner {\n  left: 100%;\n}\n.effeckt-button[data-effeckt-type=\"slide-left\"][data-loading] .label {\n  opacity: 0;\n  left: -100%;\n}\n.effeckt-button[data-effeckt-type=\"slide-left\"][data-loading] .spinner {\n  opacity: 1;\n  left: 50%;\n}\n\n\n// Slide right\n.effeckt-button[data-effeckt-type=\"slide-right\"] {\n  overflow: hidden;\n}\n.effeckt-button[data-effeckt-type=\"slide-right\"] .label {\n  position: relative;\n}\n.effeckt-button[data-effeckt-type=\"slide-right\"] .spinner {\n  left: 0%;\n}\n.effeckt-button[data-effeckt-type=\"slide-right\"][data-loading] .label {\n  opacity: 0;\n  left: 100%;\n}\n.effeckt-button[data-effeckt-type=\"slide-right\"][data-loading] .spinner {\n  opacity: 1;\n  left: 50%;\n}\n\n\n// Slide Up\n.effeckt-button[data-effeckt-type=\"slide-up\"] {\n  overflow: hidden;\n}\n.effeckt-button[data-effeckt-type=\"slide-up\"] .label {\n  position: relative;\n}\n.effeckt-button[data-effeckt-type=\"slide-up\"] .spinner {\n  left: 50%;\n  top: 100%;\n}\n.effeckt-button[data-effeckt-type=\"slide-up\"][data-loading] .label {\n  opacity: 0;\n  top: -1em;\n}\n.effeckt-button[data-effeckt-type=\"slide-up\"][data-loading] .spinner {\n  opacity: 1;\n  top: 50%;\n}\n\n\n// Slide Down\n.effeckt-button[data-effeckt-type=\"slide-down\"] {\n  overflow: hidden;\n}\n.effeckt-button[data-effeckt-type=\"slide-down\"] .label {\n  position: relative;\n}\n.effeckt-button[data-effeckt-type=\"slide-down\"] .spinner {\n  left: 50%;\n  top: 0%;\n}\n.effeckt-button[data-effeckt-type=\"slide-down\"][data-loading] .label {\n  opacity: 0;\n  top: 1em;\n}\n.effeckt-button[data-effeckt-type=\"slide-down\"][data-loading] .spinner {\n  opacity: 1;\n  top: 50%;\n}\n\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"],\n.effeckt-button[data-effeckt-type=\"zoom-in\"] .spinner,\n.effeckt-button[data-effeckt-type=\"zoom-in\"] .label,\n.effeckt-button[data-effeckt-type=\"zoom-out\"],\n.effeckt-button[data-effeckt-type=\"zoom-out\"] .spinner,\n.effeckt-button[data-effeckt-type=\"zoom-out\"] .label {\n  transition: $effeckt-buttons-transition-duration ease all;\n}\n\n\n// Zoom Out\n.effeckt-button[data-effeckt-type=\"zoom-out\"] {\n  overflow: hidden;\n}\n.effeckt-button[data-effeckt-type=\"zoom-out\"] .spinner {\n  left: 50%;\n  transform: scale(2.5);\n}\n.effeckt-button[data-effeckt-type=\"zoom-out\"] .label {\n  position: relative;\n  display: inline-block;\n}\n.effeckt-button[data-effeckt-type=\"zoom-out\"][data-loading] .label {\n  opacity: 0;\n  transform: scale(0.5);\n}\n.effeckt-button[data-effeckt-type=\"zoom-out\"][data-loading] .spinner {\n  opacity: 1;\n  transform: none;\n}\n\n\n// Zoom in\n.effeckt-button[data-effeckt-type=\"zoom-in\"] {\n  overflow: hidden;\n}\n.effeckt-button[data-effeckt-type=\"zoom-in\"] .spinner {\n  left: 50%;\n  transform: scale(0.2);\n}\n.effeckt-button[data-effeckt-type=\"zoom-in\"] .label {\n  position: relative;\n  display: inline-block;\n}\n\n.effeckt-button[data-effeckt-type=\"zoom-in\"][data-loading] .label {\n  opacity: 0;\n  transform: scale(2.2);\n}\n.effeckt-button[data-effeckt-type=\"zoom-in\"][data-loading] .spinner {\n  opacity: 1;\n  transform: none;\n}\n\n\n/*==========================\nFILL\n==========================*/\n\n@mixin effeckt-button-fill($translateX:0, $translateY:0) {\n overflow: hidden;\n position: relative;\n\n &:after {\n   content: '';\n   position: absolute;\n   top: 0;\n   right: 0;\n   width: 100%;\n   height: 100%;\n   background: #000;\n   transform: translate($translateX, $translateY);\n   transition: transform $effeckt-buttons-transition-duration;\n }\n\n &[data-loading] {\n   &:after {\n     transform: translate(0, 0);\n   }\n }\n\n .effeckt-button-label {\n   position: relative;\n   z-index: 1;\n }\n}\n\n// Fill from left\n.effeckt-button[data-effeckt-type=\"fill-from-left\"] {\n  @include effeckt-button-fill(-100%,0);\n}\n\n// Fill from right\n.effeckt-button[data-effeckt-type=\"fill-from-right\"] {\n  @include effeckt-button-fill(100%,0);\n}\n\n// Fill from top\n.effeckt-button[data-effeckt-type=\"fill-from-top\"] {\n  @include effeckt-button-fill(0,-100%);\n}\n\n// Fill from bottom\n.effeckt-button[data-effeckt-type=\"fill-from-bottom\"] {\n  @include effeckt-button-fill(0,100%);\n}\n\n\n/*==========================\nICON SLIDE\n\nExample markup:\n<button class=\"effeckt-button\" data-effeckt-type=\"icon-slide from-top\">\n  <span class=\"effeckt-button-label demo-button-icon\">Icon from top</span>\n</button>\n==========================*/\n\n/// The \"effeckt-button-icon\" data-URI and \"demo-button-icon\" class\n// are for demo purposes. A user could apply their own class to the\n// button's label to designate the icon/image they want sliding in\n// and out -- utilizing the :before pseudo-element to place a\n// background image or character from an icon font.\n.demo-button-icon:before {\n  background: url(#{$effeckt-button-icon}) no-repeat center center;\n  background-size: 30px;\n}\n\n// General styles\n.effeckt-button[data-effeckt-type~=\"icon-slide\"] {\n  overflow: hidden;\n  // Any padding has to be applied to the inner element, instead of the container.\n  // So, override the default styling of .effeckt-button from demo.scss.\n  padding: 0;\n  .effeckt-button-label {\n    padding: 0.8rem 1rem; // And re-apply it here.\n    display: block;\n    position: relative;\n    transition: transform $effeckt-buttons-transition-duration;\n    &:before {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Direction-specific styles\n.effeckt-button[data-effeckt-type~=\"icon-slide\"] {\n  // From top\n  &[data-effeckt-type~=\"from-top\"] .effeckt-button-label:before {\n    top: -100%;\n    left: 0;\n    right: 0;\n  }\n  // From bottom\n  &[data-effeckt-type~=\"from-bottom\"] .effeckt-button-label:before {\n    bottom: -100%;\n    left: 0;\n    right: 0;\n  }\n  // From left\n  &[data-effeckt-type~=\"from-left\"] .effeckt-button-label:before {\n    left: -100%;\n    top: 0;\n    bottom: 0;\n  }\n  // From left\n  &[data-effeckt-type~=\"from-right\"] .effeckt-button-label:before {\n    right: -100%;\n    top: 0;\n    bottom: 0;\n  }\n}\n\n// Active state -- could be applied to a class or data-attribute, instead,\n// to make it JS triggered. Hover is easiest for the demo.\n.effeckt-button[data-effeckt-type~=\"icon-slide\"][data-loading] {\n  &[data-effeckt-type~=\"from-top\"] .effeckt-button-label {\n    transform: translateY(100%);\n  }\n  &[data-effeckt-type~=\"from-bottom\"] .effeckt-button-label {\n    transform: translateY(-100%);\n  }\n  &[data-effeckt-type~=\"from-left\"] .effeckt-button-label {\n    transform: translateX(100%);\n  }\n  &[data-effeckt-type~=\"from-right\"] .effeckt-button-label {\n    transform: translateX(-100%);\n  }\n}\n\n// 3D Rotate Success/Error\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"],\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"] {\n  transition: all $effeckt-buttons-transition-duration;\n  transform-style: preserve-3d;\n  backface-visibility: hidden;\n}\n\n// Hidden side of the button\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"]:before,\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"]:after {\n  white-space: nowrap;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  line-height: 2em;\n}\n\n// Hidden side of the button\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"]:before {\n  top: 100%;\n  content: attr(data-effeckt-message);\n  transform-origin: 0% 0%;\n  transform: rotateX(-90deg);\n  backface-visibility: hidden;\n}\n\n// JS add's a 'data-loading' attr, which will triger the transition\n.effeckt-button[data-effeckt-type=\"3d-rotate-error\"][data-loading] {\n  transform-origin: 50% 0%;\n  transform: rotateX(90deg) translateY(-100%);\n}\n\n// Hidden side of the button\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"]:after {\n  top: -100%;\n  content: attr(data-effeckt-message);\n  transform-origin: 0% 100%;\n  transform: rotateX(90deg);\n  backface-visibility: hidden;\n}\n\n// JS add's a 'data-loading' attr, which will triger the transition\n.effeckt-button[data-effeckt-type=\"3d-rotate-success\"][data-loading] {\n  transform-origin: 50% 100%;\n  transform: rotateX(-90deg) translateY(100%);\n}\n\n"
  },
  {
    "path": "scss/modules/captions.scss",
    "content": "// ==========================================================================\n// $Effeckt Captions\n\n// @dependencies\n// js/libs/jquery-2.0.3.min.js\n// js/modules/captions.js\n// ==========================================================================\n\n\n$effeckt-caption-transition-duration: 500ms !default;\n\n\n/*\n\nCaptions Markup Pattern & Explanation\n\ndata-effeckt-type = \n\"<quarter-appear | quarter-slide-up | quarter-slide-side | quarter-fall-in |\nquarter-two-step | quarter-zoom | cover-fade | cover-push-right | revolving-door-left |\nrevolving-door-right | revolving-door-top | revolving-door-bottom | cover-slide-top |\noffset | guillotine-reverse | half-slide | sqkwoosh | tunnel>\"\n\n<figure class=\"effeckt-caption\" data-effeckt-type=\"\">\n  <img src=\"\" alt=\"\">\n  <figcaption>\n    <div class=\"effeckt-figcaption-wrap\"></div>\n  </figcaption>\n</figure>\n\n*/\n\n\n\n// ==========================================================================\n// Styles\n// ==========================================================================\n\n.effeckt-caption {\n  position: relative;\n\n  img {\n    transition: $effeckt-caption-transition-duration;\n  }\n\n  figcaption {\n    position: absolute;\n    transition: $effeckt-caption-transition-duration;\n    width: 100%;\n  }\n\n\n  // Effect 1: Appear\n  &[data-effeckt-type=\"quarter-appear\"] {\n    figcaption {\n      bottom: 0;\n      left: 0;\n      opacity: 0;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        opacity: 1;\n      }\n    }\n  }\n\n\n  // Effect 2: Quarter Slide Up\n  &[data-effeckt-type=\"quarter-slide-up\"] {\n    figcaption {\n      bottom: 0;\n      left: 0;\n      opacity: 0;\n      transform: translateY(100%);\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  }\n\n\n  // Effect 3: Sqwoosh\n  &[data-effeckt-type=\"sqkwoosh\"] {\n    figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transition: none;\n      z-index: 0;\n    }\n\n    img {\n      position: relative;\n      z-index: 1;\n      transition-delay: 0.25s;\n    }\n\n    .effeckt-figcaption-wrap {\n      position: absolute;\n      bottom: 1rem;\n      opacity: 0;\n      transition: opacity 0.25s linear 0s;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      .effeckt-figcaption-wrap {\n        opacity: 1;\n        transition-delay: 0.25s;\n      }\n\n      img {\n        transform: scale(0.5) translateY(-80px);\n        transition-delay: 0;\n      }\n    }\n  }\n\n\n  // Effect 4: Quarter Slide Side\n  &[data-effeckt-type=\"quarter-slide-side\"] {\n    figcaption {\n      left: 0;\n      bottom: 0;\n      opacity: 0;\n      transform: translateX(100%);\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        opacity: 1;\n        transform: translateX(0);\n      }\n    }\n  }\n\n\n  // Effect 5: Cover Fade\n  &[data-effeckt-type=\"cover-fade\"] {\n    figcaption {\n      top: 0;\n      left: 0;\n      height: 100%;\n      opacity: 0;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        opacity: 1;\n      }\n    }\n  }\n\n\n  // Effect 6 - Quarter Fall in\n  &[data-effeckt-type=\"quarter-fall-in\"] {\n    figcaption {\n      top: 0;\n      left: 0;\n      transform: translateX(100%) rotate(20deg);\n      opacity: 0;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: translateX(0) rotate(0deg);\n        opacity: 1;\n      }\n    }\n  }\n\n\n  // Effect 7 - 3Quarter Two Step\n  &[data-effeckt-type=\"quarter-two-step\"] {\n    figcaption {\n      top: 0;\n      left: 0;\n      transform: translateX(-100%);\n      opacity: 0;\n      z-index: 2;\n    }\n\n    .effeckt-figcaption-wrap {\n      transition: $effeckt-caption-transition-duration $effeckt-caption-transition-duration/2;\n      transform: translateX(200%);\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: translateX(0);\n        opacity: 1;\n      }\n\n      .effeckt-figcaption-wrap {\n        transform: translateX(0);\n      }\n    }\n  }\n\n\n  // Effect 8 - Cover Push Right\n  &[data-effeckt-type=\"cover-push-right\"] {\n    figcaption {\n      top: 0;\n      left: 0;\n      height: 100%;\n      transform: translateX(-100%);\n      opacity: 0;\n    }\n\n    img {\n      transition: $effeckt-caption-transition-duration;\n      transform: translateX(0);\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: translateX(0);\n        opacity: 1;\n      }\n\n      img {\n        transform: translateX(100%);\n      }\n    }\n  }\n\n  // Effect 15 - Cover Slide Top\n  &[data-effeckt-type=\"cover-slide-top\"] {\n    figcaption {\n      top: 0;\n      left: 0;\n      height: 100%;\n      transform: translateY(-100%);\n      opacity: 0;\n    }\n\n    img {\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: translateY(0);\n        opacity: 1;\n      }\n    }\n  }\n\n\n  // Effect 9 - Quarter Caption Zoom\n  &[data-effeckt-type=\"quarter-zoom\"] {\n    figcaption {\n      top: 0;\n      left: 0;\n      transform: scale(2);\n      text-align: center;\n      opacity: 0;\n    }\n\n    img {\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      img {\n        transform: scale(1.1);\n      }\n    }\n  }\n\n\n  // Effect 10 - Revolving Door\n  &[data-effeckt-type=\"revolving-door-left\"] {\n    overflow: visible;\n    figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transform: perspective(1300px) rotateY(180deg);\n      backface-visibility: hidden;\n    }\n\n    img {\n      transform: perspective(1300px);\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: perspective(1300px) rotateY(0deg);\n      }\n\n      img {\n        transform: perspective(1300px) rotateY(-180deg);\n      }\n    }\n  }\n\n\n  // Effect 11 - Revolving Door Right\n  &[data-effeckt-type=\"revolving-door-right\"] {\n    overflow: visible;\n    figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transform: perspective(1300px) rotateY(180deg);\n      backface-visibility: hidden;\n    }\n\n    img {\n      transform: perspective(1300px);\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: perspective(1300px) rotateY(360deg);\n      }\n      img {\n        transform: perspective(1300px) rotateY(180deg);\n      }\n    }\n  }\n\n\n  // Effect 12 - Revolving Door Top\n  &[data-effeckt-type=\"revolving-door-top\"] {\n    overflow: visible;\n    figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transform: perspective(1300px) rotateX(180deg);\n      backface-visibility: hidden;\n    }\n\n    img {\n      transform: perspective(1300px);\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: perspective(1300px) rotateX(360deg);\n      }\n\n      img {\n        transform: perspective(1300px) rotateX(180deg);\n      }\n    }\n  }\n\n\n  // Effect 13 - Revolving Door Bottom\n  &[data-effeckt-type=\"revolving-door-bottom\"] {\n    overflow: visible;\n    figcaption {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transform: perspective(1300px) rotateX(180deg);\n      backface-visibility: hidden;\n    }\n\n    img {\n      transform: perspective(1300px);\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: perspective(1300px) rotateX(0deg);\n      }\n\n      img {\n        transform: perspective(1300px) rotateX(-180deg);\n      }\n    }\n  }\n\n  // Effect 14 - Caption Offset\n  &[data-effeckt-type=\"offset\"] {\n    overflow: visible;\n    figcaption {\n      top: 0;\n      left: 0;\n      text-align: center;\n      opacity: 0;\n      height: 100%;\n    }\n\n    img {\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      figcaption {\n        transform: translate(15px, 15px);\n        opacity: 1;\n        z-index: 100; //prevent overlap\n        overflow: hidden;\n      }\n    }\n  }\n\n\n  // Effect 15 - Guillotine Reverse / Reveal Up\n  &[data-effeckt-type=\"guillotine-reverse\"] {\n    overflow: visible;\n    figcaption {\n      top: 0;\n      left: 0;\n      text-align: center;\n      height: 100%;\n    }\n\n    img {\n      display: block;\n      position:relative;\n      z-index:10;\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      img {\n        transform: translateY(-100%);\n      }\n    }\n  }\n\n\n  // Effect 16 - Half Slide\n  &[data-effeckt-type=\"half-slide\"] {\n    figcaption {\n      top: 0;\n      left: 0;\n      text-align: center;\n      height: 100%;\n      transform: translateY(100%);\n    }\n\n    img {\n      display: block;\n      position:relative;\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      img {\n        transform: translateY(-50%);\n      }\n\n      figcaption {\n        transform: translateY(50%);\n      }\n    }\n  }\n\n  // Effect 17 - Tunnel\n  &[data-effeckt-type=\"tunnel\"] {\n    figcaption {\n      top: 0;\n      left: 0;\n      text-align: center;\n      height: 100%;\n      opacity: 0;\n      transform: scale(0.7);\n    }\n\n    img {\n      display: block;\n      position:relative;\n      z-index: 10;\n      transition: $effeckt-caption-transition-duration;\n    }\n\n    &:hover,\n    &:active,\n    &.active {\n      img {\n        transform: scale(0.4);\n      }\n\n      figcaption {\n        opacity:1;\n        transform: scale(1);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "scss/modules/form-elements.scss",
    "content": "@import \"../_variables\";\n\n// Notes: Only works in WebKit for now\n// is this acceptable to our goals?\n\n// Fallback\n// Apply this style only on WebKit\n// To prevent ugly styles on non-WebKit Browser\n@media screen and (-webkit-min-device-pixel-ratio:0) {\n  \n  .effeckt-ckbox-ios7[type=checkbox],\n.effeckt-rdio-ios7[type=radio] {\n\n  // Not caught by autoprefixer\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  box-shadow: inset 0px 0px 0px 1px #e6e6e6;\n  border-radius: $effeckt-form-element-ckradio-ios7border-radius;\n  cursor: pointer;\n  display: inline-block;\n  height: 31px;\n  padding: 1px;\n  position: relative;\n  margin: 0px;\n  width: 52px;\n  outline: 0;\n  transition: $effeckt-form-element-ckradio-ios7transition;\n  transform: scale(1); // Adjust size here\n  background: $effeckt-form-element-ckradio-ios7bg-off;\n}\n\n.effeckt-ckbox-ios7[type=checkbox]:checked,\n.effeckt-rdio-ios7:checked {\n  box-shadow: inset 0px 0px 0px 20px $effeckt-form-element-ckradio-ios7bg-on;\n}\n\n.effeckt-ckbox-ios7[type=checkbox]:after,\n.effeckt-rdio-ios7[type=radio]:after {\n  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);\n  border-radius: $effeckt-form-element-ckradio-ios7border-radius;\n  content: '';\n  cursor: pointer;\n  height: 29px;\n  position: absolute;\n  width: 29px;\n  transition: $effeckt-form-element-ckradio-ios7transition-after;\n  background: $effeckt-form-element-ckradio-ios7bg-off;\n}\n\n.effeckt-ckbox-ios7[type=\"checkbox\"]:checked:after,\n.effeckt-rdio-ios7[type=\"radio\"]:checked:after {\n  left: 22px;\n}\n\n\n// Android\n\n.effeckt-ckbox-android[type=checkbox],\n.effeckt-rdio-android[type=radio] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  box-shadow: inset 0px 0px 0px 1px #e6e6e6;\n  border-radius: 1px;\n  cursor: pointer;\n  display: inline-block;\n  height: 21px;\n  padding: 1px;\n  position: relative;\n  margin: 0px;\n  width: 72px;\n  outline: 0;\n  -webkit-transition: all 0.3s ease-out;\n  -o-transition: all 0.3s ease-out;\n  transition: all 0.3s ease-out;\n  -webkit-transform: scale(1);\n  -ms-transform: scale(1);\n  -o-transform: scale(1);\n  transform: scale(1);\n  background: #333;\n}\n\n.effeckt-ckbox-android[type=checkbox]:checked,\n.effeckt-rdio-android:checked {\n  box-shadow: inset 0px 0px 0px 20px #666666;\n}\n\n.effeckt-ckbox-android[type=checkbox]:after,\n.effeckt-rdio-android[type=radio]:after {\n  box-shadow: 0px 0px 0px 0px ;\n  border-radius: 1px;\n  content: '';\n  cursor: pointer;\n  height: 19px;\n  position: absolute;\n  width: 29px;\n  -webkit-transition: all 0.1s ease-in 0.1s;\n  -o-transition: all 0.1s ease-in 0.1s;\n  transition: all 0.1s ease-in 0.1s;\n  background: #4d4d4d; \n}\n\n.effeckt-ckbox-android[type=\"checkbox\"]:checked:after,\n.effeckt-rdio-android[type=\"radio\"]:checked:after {\n  left: 43px;\n}\n\n}\n"
  },
  {
    "path": "scss/modules/lazy-loading.scss",
    "content": "@import \"../_variables\";\n\n.effeckt-lazy-loading-element {\n  opacity:0;\n\n  &.shown {\n    opacity: 1;\n  }\n}\n\n// Effeckt: Fade\n[data-effeckt-type=\"fade\"] {\n  .effeckt-lazy-loading-element {\n    &.animating {\n      opacity:0;\n      animation: fadeIn $effeckt-lazy-loading-transition-duration ease forwards;\n    }\n  }\n}\n\n@keyframes fadeIn {\n  to { opacity: 1; }\n}\n\n// Effeckt: Slide Up\n[data-effeckt-type=\"slide-up\"] {\n  .effeckt-lazy-loading-element {\n    &.animating {\n      opacity:0;\n      transform: translateY(200px);\n      animation: slideUp $effeckt-lazy-loading-transition-duration ease forwards;\n    }\n  }\n}\n\n@keyframes slideUp {\n  to { opacity: 1; transform: translateY(0px); }\n}\n\n// Effeckt: Scale Up\n[data-effeckt-type=\"scale-up\"] {\n  .effeckt-lazy-loading-element {\n    &.animating {\n      opacity:0;\n      transform: scale(0.6);\n      animation: scaleUp $effeckt-lazy-loading-transition-duration ease forwards;\n    }\n  }\n}\n\n@keyframes scaleUp {\n  to { opacity: 1; transform: scale(1); }\n}\n\n// Effeckt: Scale Down\n[data-effeckt-type=\"scale-down\"] {\n  perspective: 1300px;\n\n  .effeckt-lazy-loading-element {\n    &.animating {\n      opacity:0;\n      transform-style: preserve-3d;\n      transform: scale(1.4);\n      animation: scaleDown $effeckt-lazy-loading-transition-duration ease forwards;\n    }\n  }\n}\n\n@keyframes scaleDown {\n  to { opacity:1; transform: scale(1); }\n}\n\n// Effeckt: Fall\n[data-effeckt-type=\"fall\"] {\n  perspective: 1300px;\n\n  .effeckt-lazy-loading-element {\n    &.animating {\n      opacity:0;\n      transform-style: preserve-3d;\n      transform: translateZ(400px) translateY(300px) rotateX(-90deg);\n      animation: fall $effeckt-lazy-loading-transition-duration*1.5 ease forwards;\n    }\n  }\n}\n\n@keyframes fall {\n  to { opacity:1; transform: translateZ(0px) translateY(0px) rotateX(0deg); }\n}\n\n// Effeckt: Fly\n[data-effeckt-type=\"fly\"] {\n  perspective: 1300px;\n\n  .effeckt-lazy-loading-element {\n    &.animating {\n      transform-style: preserve-3d;\n      transform-origin: 50% 50% -300px;\n      transform: rotateX(-180deg);\n      animation: fly $effeckt-lazy-loading-transition-duration ease-in-out forwards;\n    }\n  }\n}\n\n@keyframes fly {\n  to { opacity:1; transform: rotateX(0deg); }\n}\n\n// Effeckt: 3D Sign\n[data-effeckt-type=\"sign-3D\"] {\n  perspective: 1300px;\n\n  .effeckt-lazy-loading-element {\n    &.animating {\n      opacity:0;\n      transform-style: preserve-3d;\n      transform-origin: 0% 0%;\n      transform: rotateX(-80deg);\n      animation: sign3D $effeckt-lazy-loading-transition-duration ease-in-out forwards;\n    }\n  }\n}\n\n@keyframes sign3D {\n  to { opacity:1; transform: rotateX(0deg); }\n}\n\n// Effeckt: Helix\n[data-effeckt-type=\"helix\"] {\n  perspective: 1300px;\n\n  .effeckt-lazy-loading-element {\n    &.animating {\n      opacity:0;\n      transform-style: preserve-3d;\n      transform: rotateY(-180deg);\n      animation: helix $effeckt-lazy-loading-transition-duration ease-in-out forwards;\n    }\n  }\n}\n\n@keyframes helix {\n  to { opacity:1; transform: rotateY(0deg); }\n}\n\n// Effeckt: Pop Up\n[data-effeckt-type=\"popup\"] {\n  perspective: 1300px;\n\n  .effeckt-lazy-loading-element {\n    &.animating {\n      opacity:0;\n      transform-style: preserve-3d;\n      transform: scale(0.4);\n      animation: popup $effeckt-lazy-loading-transition-duration ease-in-out forwards;\n    }\n  }\n}\n\n@keyframes popup {\n  70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }\n  100% { opacity: 1; transform: scale(1); }\n}"
  },
  {
    "path": "scss/modules/list-items.scss",
    "content": "@import \"../_variables\";\n\n// TODO: Removal Animations as well\n\n// Pop-in\n.effeckt-list[data-effeckt-type='pop-in'] {\n  overflow: hidden;\n}\n.effeckt-list[data-effeckt-type='pop-in'] .new-item {\n  max-height: 0;\n  opacity: 0;\n  transform: translateX(-300px);\n  animation:\n    openSpace $effeckt-list-item-transition-duration ease forwards,\n    moveIn $effeckt-list-item-transition-duration*1.5 $effeckt-list-item-transition-duration ease forwards;\n}\n.effeckt-list[data-effeckt-type='pop-in'] .remove-item {\n  max-height: 50px;\n  opacity: 1;\n  animation:\n    moveOut $effeckt-list-item-transition-duration*1.5 $effeckt-list-item-transition-duration ease forwards,\n    closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*1.5;\n}\n@keyframes openSpace {\n  to {\n    max-height: 50px;\n  }\n}\n@keyframes moveIn {\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes moveOut {\n  to {\n    opacity: 0;\n    transform: translateX(-300px);\n  }\n}\n@keyframes closeSpace {\n  to {\n    max-height: 0px;\n  }\n  from {\n    max-height: 50px;\n  }\n}\n\n\n// Expand in\n.effeckt-list[data-effeckt-type='expand-in'] .new-item {\n  max-height: 0;\n  opacity: 0;\n  transform: scale(0);\n  animation: growHeight $effeckt-list-item-transition-duration ease forwards;\n}\n.effeckt-list[data-effeckt-type='expand-in'] .remove-item {\n  animation: shrinkHeight $effeckt-list-item-transition-duration ease forwards;\n}\n@keyframes growHeight {\n  to {\n    // max-height kinda janky way to do this\n    max-height: 50px;\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes shrinkHeight {\n  to {\n    max-height: 0;\n    opacity: 1;\n    transform: scale(0);\n  }\n  from {\n    max-height: 50px;\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n// Wobble in\n.effeckt-list[data-effeckt-type='wobble-in'] .new-item {\n  backface-visibility: visible;\n  animation:\n    WobbleInX $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,\n    openSpace $effeckt-list-item-transition-duration ease forwards;\n}\n.effeckt-list[data-effeckt-type='wobble-in'] .remove-item {\n  backface-visibility: visible;\n  animation:\n    WobbleOutX $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,\n    closeSpace $effeckt-list-item-transition-duration*2 ease forwards $effeckt-list-item-transition-duration*3;\n}\n@keyframes WobbleInX {\n  0% {\n    transform: perspective(250px) rotateX(90deg);\n    opacity: 0;\n  }\n  40% {\n    transform: perspective(250px) rotateX(-10deg);\n  }\n  70% {\n    transform: perspective(250px) rotateX(10deg);\n  }\n  100% {\n    transform: perspective(250px) rotateX(0deg);\n    opacity: 1;\n  }\n}\n@keyframes WobbleOutX {\n  0% {\n    transform: perspective(250px) rotateX(0deg);\n    opacity: 1;\n  }\n  100% {\n    transform: perspective(250px) rotateX(90deg);\n    opacity: 0;\n  }\n}\n\n\n// Flip in\n.effeckt-list[data-effeckt-type='flip-in'] .new-item {\n  backface-visibility: visible;\n  transform-origin: top left;\n  animation:\n    FlipIn $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,\n    openSpace $effeckt-list-item-transition-duration ease forwards;\n}\n.effeckt-list[data-effeckt-type='flip-in'] .remove-item {\n  backface-visibility: visible;\n  transform-origin: top left;\n  animation:\n    FlipOut $effeckt-list-item-transition-duration*5 both $effeckt-list-item-transition-duration,\n    closeSpace $effeckt-list-item-transition-duration*2 ease forwards $effeckt-list-item-transition-duration*2;\n}\n@keyframes FlipIn {\n  0% {\n    transform: perspective(300px) rotateX(90deg);\n    opacity: 0;\n  }\n  100% {\n    transform: perspective(300px) rotateX(0deg);\n    opacity: 1;\n  }\n}\n@keyframes FlipOut {\n  0% {\n    transform: perspective(400px) rotateX(0deg);\n    opacity: 1;\n  }\n  100% {\n    transform: perspective(400px) rotateX(90deg);\n    opacity: 0;\n  }\n}\n\n\n// Fall in\n.effeckt-list[data-effeckt-type='fall-in'] .new-item {\n  backface-visibility: visible;\n  animation:\n    openSpace $effeckt-list-item-transition-duration*2 ease forwards,\n    fallInX $effeckt-list-item-transition-duration*2 both;\n}\n.effeckt-list[data-effeckt-type='fall-in'] .remove-item {\n  backface-visibility: visible;\n  transform-origin: top left;\n  animation:\n    fallOffX $effeckt-list-item-transition-duration*2 both,\n    closeSpace $effeckt-list-item-transition-duration*1.5 ease forwards $effeckt-list-item-transition-duration;\n}\n@keyframes fallInX {\n  0% {\n    opacity: 0;\n    transform: translateY(-200px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes fallOffX {\n  0% {\n    opacity: 1;\n    transform: rotateZ(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(200px) rotateZ(90deg);\n  }\n}\n\n\n// From Above\n.effeckt-list[data-effeckt-type='from-above'] .new-item {\n  backface-visibility: visible;\n  animation:\n    openSpace $effeckt-list-item-transition-duration*2 ease forwards,\n    fromAbove $effeckt-list-item-transition-duration*2 both $effeckt-list-item-transition-duration;\n}\n.effeckt-list[data-effeckt-type='from-above'] .remove-item {\n  backface-visibility: visible;\n  animation:\n    toAbove $effeckt-list-item-transition-duration*2 both,\n    closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*1.3;\n}\n@keyframes fromAbove {\n  0% {\n    opacity: 0;\n    transform: scale(3);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes toAbove {\n  0% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(3);\n  }\n}\n\n// Wobble Out\n.effeckt-list[data-effeckt-type='wobble-out'] .new-item {\n  backface-visibility: visible;\n  animation:\n    openSpace $effeckt-list-item-transition-duration*2 ease forwards,\n    fallInX $effeckt-list-item-transition-duration*2 both;\n}\n.effeckt-list[data-effeckt-type='wobble-out'] .remove-item {\n  backface-visibility: visible;\n  transform-origin: top left;\n  animation:\n    wobbleOutY $effeckt-list-item-transition-duration*3 both $effeckt-list-item-transition-duration,\n    closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*3;\n}\n@keyframes wobbleOutY {\n  0% {\n    opacity: 1;\n    transform: rotateZ(0);\n  }\n  20% {\n    opacity: 1;\n    transform: rotateZ(140deg);\n  }\n  40% {\n    opacity: 1;\n    transform: rotateZ(60deg);\n  }\n  60% {\n    opacity: 1;\n    transform: rotateZ(110deg);\n  }\n  70% {\n    opacity: 1;\n    transform: rotateZ(90deg) translateX(0);\n  }\n  90% {\n    opacity: 1;\n    transform: rotateZ(90deg) translateX(400px);\n  }\n  100% {\n    opacity: 0;\n    transform: rotateZ(90deg) translateX(400px);\n  }\n}\n\n\n// Bouncy Slide In\n.effeckt-list[data-effeckt-type='bouncy-slide-in'] .new-item {\n  backface-visibility: visible;\n  animation:\n    bouncySlideIn $effeckt-list-item-transition-duration*2 both,\n    openSpace $effeckt-list-item-transition-duration ease forwards;\n}\n.effeckt-list[data-effeckt-type='bouncy-slide-in'] .remove-item {\n  backface-visibility: visible;\n  animation:\n    fallOffY $effeckt-list-item-transition-duration*3 both $effeckt-list-item-transition-duration,\n    closeSpace $effeckt-list-item-transition-duration ease forwards $effeckt-list-item-transition-duration*3.25;\n}\n@keyframes bouncySlideIn {\n  0% {\n    opacity: 0;\n    transform: translateX(300px);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(-50px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes fallOffY {\n  0% {\n    opacity: 1;\n    transform: translateX(0) translateY(0) rotateZ(0deg);\n  }\n  50% {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0) rotateZ(0deg);\n  }\n  75% {\n    opacity: 0.75;\n    transform: translateX(-50%) translateY(0) rotateZ(-30deg);\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(-50%) translateY(300px) rotateZ(-60deg);\n  }\n}\n\n"
  },
  {
    "path": "scss/modules/list-scroll.scss",
    "content": "@import \"../_variables\";\n\n.effeckt-list-scroll {\n  position: relative;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  perspective: 400px;\n\n  > li {\n    position: relative;\n    z-index: 2;\n    transform: translateZ(0);\n  }\n}\n\n\n// Grow\n[data-effeckt-type=\"grow\"] li {\n  transition: all $effeckt-list-scroll-transition-duration ease;\n  transform-origin: 50% 50%;\n  &.past, &.future {\n    transform: scale(0.01);\n  }\n}\n\n\n// Curl\n[data-effeckt-type=\"curl\"] li {\n  // this was originally applied to the 'li', \n  // was this a mistake? Seems like it should \n  // be part of the parent <ul>\n  perspective: 600px;\n  perspective-origin: 0% 50%;\n  transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/3 ease;\n  transform-origin: 0% 0%;\n  backface-visibility: hidden;\n  &.past {\n    opacity: 0;\n    transform: rotateY(90deg);\n  }\n  &.future {\n    opacity: 0;\n    transform: rotateY(90deg);\n  }\n}\n\n// Wave\n[data-effeckt-type=\"wave\"] li {\n  transition: all $effeckt-list-scroll-transition-duration cubic-bezier(0.260, 0.860, 0.440, 0.985);\n  &.past {\n    transform: translateX(-70%);\n  }\n  &.future {\n    transform: translateX(-70%);\n  }\n}\n\n// Fan\n[data-effeckt-type=\"fan\"] li {\n  transition: all $effeckt-list-scroll-transition-duration cubic-bezier(0.390, 0.575, 0.565, 1.000);\n  transform-origin: 0% 0%;\n  &.past {\n    transform: rotate(-60deg);\n  }\n  &.future {\n    transform: rotate(70deg);\n  }\n}\n\n// Fade\n[data-effeckt-type=\"fade\"] li {\n  transition: opacity $effeckt-list-scroll-transition-duration/2 ease-in-out;\n\n  &.past, &.future {\n    opacity: 0;\n  }\n}\n\n// Fly\n[data-effeckt-type=\"fly\"] {\n  perspective: 400px;\n  perspective-origin: 50% 50%;\n  li {\n    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;\n    transform-origin: 50% 50% -50px;\n\n    &.past, &.future {\n      opacity: 0;\n    }\n    &.past {\n      transform: rotateX(180deg);\n    }\n    &.future {\n      transform: rotateX(-180deg);\n    }\n  }\n}\n\n//landing\n[data-effeckt-type=\"landing\"] {\n  perspective: 400px;\n  perspective-origin: 50% 50%;\n  li {\n    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;\n    transform-origin: 50% 50%;\n    &.past, &.future {\n      opacity: 0;\n    }\n    &.past {\n      transform: scale(1.5) translate(10%,-50%);\n    }\n    &.future {\n      transform: scale(1.5) translate(-10%,50%);\n    }\n  }\n}\n\n//swing from back to front\n[data-effeckt-type=\"swing-front\"] {\n  perspective: 400px;\n  perspective-origin: 50% 50%;\n  li {\n    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;\n    &.past, &.future {\n      opacity: 0;\n    }\n    &.past {\n      transform-origin: bottom;\n      transform: rotateX(140deg);\n    }\n    &.future {\n      transform-origin: top;\n      transform: rotateX(-140deg);\n    }\n  }\n}\n\n//swing from front to back\n[data-effeckt-type=\"swing-back\"] {\n  perspective: 400px;\n  perspective-origin: 50% 50%;\n  li {\n    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;\n    &.past, &.future {\n      opacity: 0;\n    }\n    &.past {\n      transform-origin: bottom;\n      transform: rotateX(-140deg);\n    }\n    &.future {\n      transform-origin: top;\n      transform: rotateX(140deg);\n    }\n  }\n}\n\n//swing from front to back\n[data-effeckt-type=\"twist\"] {\n  perspective: 400px;\n  perspective-origin: 50% 50%;\n  li {\n    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;\n    transform-origin: center;\n    &.past, &.future {\n      opacity: 0;\n    }\n    &.past {\n      transform: rotateY(-180deg);\n    }\n    &.future {\n      transform: rotateY(180deg);\n    }\n  }\n}\n\n//open door effect\n[data-effeckt-type=\"door\"] {\n  perspective: 400px;\n  perspective-origin: 50% 50%;\n  li {\n    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;\n    transform-origin: 0% 0%;\n    &.past, &.future {\n      opacity: 0;\n      transform: rotateY(-90deg);\n    }\n  }\n}\n\n//climb effect\n[data-effeckt-type=\"climb\"] {\n  perspective: 400px;\n  perspective-origin: 50% 50%;\n  li {\n    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;\n    transform-origin: 0% 0%;\n    &.past {\n      transform: translateY(-200%);\n    }\n    &.future {\n      transform: translateY(200%);\n    }\n  }\n}\n"
  },
  {
    "path": "scss/modules/modal.scss",
    "content": "@import \"../_variables\";\n\n//------------------------------------------------------------\n// Modal Effects\n// Some Based on https://github.com/daneden/animate.css\n//\n// Rewritten for effeckts project\n//------------------------------------------------------------\n\n// Modal itself\n.effeckt-modal-wrap {\n\n  // Line that causes blur\n  // But would be **SUPER RAD** if we could use so modals are centered no matter what author does\n  // transform: translate(-50%, -50%);\n\n  // Possible blur fix\n  // https://twitter.com/iamwarry/status/354595007937789954\n  // Problems:\n  //   1) Autoprefixer (?) garbles this to -webkit-transform: translate(-webkit-calc(-50%1px), -webkit-calc(-50%1px));\n  //   2) Safari just doesn't allow it even when syntax is right.\n  //   3) It doesn't always work. Still blurry = http://cl.ly/QVGo ; Sharp = http://cl.ly/QUgo\n\n  position: fixed;\n  // Sizing with sloppy centering so at least not blurry\n  top: 50%;\n  left: 50%;\n  max-width: $effeckt-modal-max-width;\n  min-width: $effeckt-modal-min-width;\n  transform: translate(-50%, -50%);\n  z-index: $effeckt-modal-z-index;\n  visibility: hidden;\n  backface-visibility: hidden;\n}\n\n.effeckt-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  visibility: hidden;\n  opacity: 0;\n  transition-duration: $effeckt-modal-transition-duration;\n}\n\n.effeckt-show.effeckt-modal-wrap {\n  visibility: visible;\n\n  ~ .effeckt-modal-overlay {\n    visibility: visible;\n    opacity: 1;\n  }\n}\n\n\n.effeckt-modal {\n  transition-property: all;\n  transition-duration: $effeckt-modal-transition-duration;\n  transition-timing-function: cubic-bezier(.4, 0, 0, 1.5);\n  animation-duration: $effeckt-modal-animation-duration;\n  animation-fill-mode: forwards;\n  animation-timing-function: cubic-bezier(.4, 0, 0, 1.5);\n}\n\n@import \"../effeckts/modals/scale\";\n@import \"../effeckts/modals/slide\";\n@import \"../effeckts/modals/3ds\";\n@import \"../effeckts/modals/misc\";\n"
  },
  {
    "path": "scss/modules/off-screen-nav.scss",
    "content": "@import \"../_variables\";\n\n// TODO: translateX(-260px) or translateY(-260px) need to be nav size\n// this need to be handle by JS or CSS Variable\n\n// Nav Overlay\n.effeckt-off-screen-nav {\n  ~ [data-effeckt-page].effeckt-page-active:after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    content: \"\";\n    background: rgba(0, 0, 0, 0.2);\n    opacity: 0;\n    visibility: hidden;\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n\n  &.effeckt-show {\n    ~ [data-effeckt-page].effeckt-page-active:after {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n\n// 1 Left Overlay\n.effeckt-off-screen-nav-left-overlay {\n  transform: translateX(-100%);\n  transition: $effeckt-off-screen-navigation-transition-duration cubic-bezier(.09,.68,0,.99);\n\n  &.effeckt-show {\n    transform: translateX(0);\n  }\n}\n\n\n// 2 Left Push\n.effeckt-off-screen-nav-left-push {\n  // Needs to be fixed size so .page-wrap can move same distance\n  transform: translateX(-12rem);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n\n  &.effeckt-show {\n    transform: translateX(0);\n    ~ [data-effeckt-page].effeckt-page-active {\n      transform: translateX(12rem);\n    }\n  }\n\n  ~ [data-effeckt-page].effeckt-page-active {\n    transition: $effeckt-off-screen-navigation-transition-duration;\n    transform: translateX(0);\n  }\n}\n\n\n// 3 Left Reveal\n.effeckt-off-screen-nav-left-reveal {\n  // Needs to be fixed size so .page-wrap can move same distance\n  width: 0px;\n  transform: translate3D(0, 0, 0);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  & h4 {\n    width: 10rem;\n  }\n  &.effeckt-show {\n    width: 12rem;\n    transform: translateX(0);\n    ~ [data-effeckt-page] {\n      transform: translateX(12rem);\n    }\n  }\n  ~ [data-effeckt-page] {\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n}\n\n// 4 Left Squeeze\n.effeckt-off-screen-nav-left-squeeze {\n  // Needs to be percentage so can be equal parts with .page-wrap\n  width: 40%;\n  transform: translateX(-100%);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  &.effeckt-show {\n    transform: translateX(0);\n    ~ [data-effeckt-page] {\n      width: 60%;\n    }\n  }\n  ~ [data-effeckt-page] {\n    float: right;\n    transition: width $effeckt-off-screen-navigation-transition-duration;\n    max-width: none; // reset from demo\n  }\n}\n\n// 5 Right Overlay\n.effeckt-off-screen-nav-right-overlay {\n  right: 0;\n  left: auto;\n  transform: translateX(100%);\n  transition: $effeckt-off-screen-navigation-transition-duration cubic-bezier(.09, .68, 0, .99);\n  &.effeckt-show {\n    transform: translateX(0);\n  }\n}\n\n\n// 6 Right Push\n.effeckt-off-screen-nav-right-push {\n  // Needs to be fixed size so .page-wrap can move same distance\n  left: auto;\n  right: 0;\n  transform: translateX(12rem);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  &.effeckt-show {\n    transform: translateX(0);\n    ~ [data-effeckt-page] {\n      transform: translateX(-12rem);\n    }\n  }\n  ~ [data-effeckt-page] {\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n}\n\n// 7 Right Reveal\n.effeckt-off-screen-nav-right-reveal {\n  // Needs to be fixed size so .page-wrap can move same distance\n  width: 0;\n  overflow: hidden;\n  left: auto;\n  right: 0;\n  transform: translate3D(0, 0, 0);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  & h4 {\n    width: 10rem;\n    position: absolute;\n    top: 0px;\n    right: 0;\n  }\n  & ul {\n    width: 12rem;\n    position: absolute;\n    top: 3.2rem;\n    right: 0;\n  }\n  &.effeckt-show {\n    width: 12rem;\n    ~ [data-effeckt-page] {\n      transform: translateX(-12rem);\n    }\n  }\n  ~ [data-effeckt-page] {\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n}\n\n// 8 Right Squeeze\n.effeckt-off-screen-nav-right-squeeze {\n  // Needs to be percentage so can be equal parts with .page-wrap\n  left: auto;\n  right: 0;\n  width: 40%;\n  transform: translateX(100%);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  &.effeckt-show {\n    transform: translateX(0);\n\n    ~ [data-effeckt-page] {\n      width: 60%;\n    }\n  }\n  ~ [data-effeckt-page] {\n    float: left;\n    transition: width $effeckt-off-screen-navigation-transition-duration;\n    max-width: none; // reset from demo\n  }\n}\n\n// 9 Rotate from Left\n.effeckt-off-screen-nav-left-rotate {\n  transform-origin: 100% 50%;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  transform: translateX(-100%) scale(1.01) rotateY(-30deg);\n\n  ~ [data-effeckt-page].effeckt-page-active {\n    transform-origin: 0 50%;\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n\n  ~ .effeckt-overlay {\n    z-index:900;\n    visibility: visible;\n    opacity: 1;\n  }\n\n  &.effeckt-show {\n    transform: none;\n\n    ~ [data-effeckt-page].effeckt-page-active {\n      transform: translateX(260px) rotateY(15deg);\n\n      // Prevent scrolling\n      overflow: hidden;\n\n      &:after {\n        background: none;\n      }\n    }\n\n    // dont nest > 3 levels deep\n    ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n  }\n}\n\n// 10 Top Overlay\n.effeckt-off-screen-nav-top-overlay {\n  width: 100%;\n  bottom:auto;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  transform: translateY(-100%);\n\n  &.effeckt-show {\n    visibility: visible;\n    transform: translateY(0%);\n  }\n}\n\n// 11 Bottom Overlay\n.effeckt-off-screen-nav-bottom-overlay {\n  width: 100%;\n  top:auto;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  transform: translateY(100%);\n\n  &.effeckt-show {\n    transform: translateY(0%);\n  }\n}\n\n// 12.1 Top Bounce\n.effeckt-off-screen-nav-top-bounce {\n  width: 100%;\n  bottom:auto;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n\n  &.effeckt-show {\n    visibility: visible;\n    animation: navFromTopBounceIn $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n\n  &.effeckt-hide {\n    animation: navFromTopBounceOut $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n}\n\n// 12.2 Top Bounce Out Only\n.effeckt-off-screen-nav-top-bounce-out {\n  width: 100%;\n  bottom:auto;\n  transform: translateY(-100%);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n\n  &.effeckt-show {\n    visibility: visible;\n    transform: translateY(0%);\n  }\n\n  &.effeckt-hide {\n    animation: navFromTopBounceOut $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n}\n\n@keyframes navFromTopBounceIn {\n  0% { transform: translateY(-100%); }\n  20% { padding-top: 0px; transform: translateY(0%); }\n  60% { padding-top: 20px; }\n  100% { padding-top: 0; }\n}\n@keyframes navFromTopBounceOut {\n  0% { transform: translateY(0%); padding-top: 0px; }\n  40%{ transform: translateY(0%); padding-top: 20px; }\n  80%{ padding-top: 0px; }\n  90%, 100%{ transform: translateY(-100%); }\n}\n\n// 13.1 Bottom Bounce\n.effeckt-off-screen-nav-bottom-bounce {\n  width: 100%;\n  top:auto;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n\n  &.effeckt-show {\n    animation: navFromBottomBounceIn $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n  &.effeckt-hide {\n    animation: navFromBottomBounceOut $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n}\n\n// 13.2 Bottom Bounce Out Only\n.effeckt-off-screen-nav-bottom-bounce-out {\n  width: 100%;\n  top:auto;\n  transform: translateY(100%);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n\n  &.effeckt-show {\n    transform: translateY(0%);\n  }\n  &.effeckt-hide {\n    animation: navFromBottomBounceOut $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n}\n\n@keyframes navFromBottomBounceIn {\n  0% { transform: translateY(100%); }\n  20% { padding-bottom: 0px; transform: translateY(0%); }\n  60% { padding-bottom: 20px; }\n  100% { padding-bottom: 0; }\n}\n@keyframes navFromBottomBounceOut {\n  0% { transform: translateY(0%); padding-bottom: 0px; }\n  40%{ transform: translateY(0%); padding-bottom: 20px; }\n  80%{ padding-bottom: 0; }\n  90%, 100%{ transform: translateY(100%); }\n}\n\n// 14 Push Top\n.effeckt-off-screen-nav-push-top {\n  width: 100%;\n  bottom:auto;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  transform: translateY(-100%);\n\n  &.effeckt-show {\n    visibility: visible;\n    transform: translateY(0%);\n\n    ~ [data-effeckt-page] {\n      transform: translateY(12rem);\n    }\n  }\n\n  ~ [data-effeckt-page] {\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n}\n\n\n// 15 Push Bottom\n.effeckt-off-screen-nav-push-bottom {\n  width: 100%;\n  top:auto;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  transform: translateY(100%);\n\n  &.effeckt-show {\n    visibility: visible;\n    transform: translateY(0%);\n\n    ~ [data-effeckt-page] {\n      transform: translateY(-12rem);\n    }\n  }\n\n  ~ [data-effeckt-page] {\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n}\n\n// 16 Rotate from Right\n.effeckt-off-screen-nav-right-rotate {\n  left: auto;\n  right: 0;\n  transform-origin: 100% 50%;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  transform: rotateY(30deg) translateX(100%) scale(1.01);\n\n  ~ [data-effeckt-page] {\n    transform-origin: 100% 50%;\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n\n  ~ .effeckt-overlay {\n    z-index:900;\n    visibility: visible;\n    opacity: 1;\n  }\n\n  &.effeckt-show {\n    transform: none;\n\n    ~ [data-effeckt-page] {\n      transform: translateX(-260px) rotateY(-15deg);\n\n      // Prevent scrolling\n      overflow: hidden;\n\n      &:after {\n        background: none;\n      }\n    }\n\n    // dont nest > 3 levels deep\n    ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n  }\n}\n\n\n// 17 Card Deck From Top\n.effeckt-off-screen-nav-top-card-deck {\n  perspective: 800px;\n  bottom: auto;\n  transform: translateY(-100%);\n  width: 100%;\n  overflow:visible;\n  transition: transform $effeckt-off-screen-navigation-transition-duration/2;\n\n  &.effeckt-show {\n    transform: translateY(0%);\n  }\n\n  h4 {\n    position: relative;\n    z-index: 300;\n    backface-visibility: hidden;\n    transform-style: preserve-3d;\n    transform-origin: 50% 0%;\n    transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;\n    display:block;\n\n    &:active {\n      transform: rotateX(60deg);\n    }\n  }\n\n  ul {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    margin:0;\n\n    li {\n      transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;\n      position: absolute;\n      top: 0;\n      z-index: 0;\n      width:100%;\n      height:100%;\n\n      transform: translateY(0px);\n    }\n  }\n}\n\n// 18 Card Deck From Bottom\n.effeckt-off-screen-nav-bottom-card-deck {\n  perspective: 800px;\n  top: auto;\n  transform: translateY(100%);\n  width: 100%;\n  overflow:visible;\n  transition: transform $effeckt-off-screen-navigation-transition-duration/2;\n\n  &.effeckt-show {\n    transform: translateY(0%);\n  }\n\n  h4 {\n    position: relative;\n    z-index: 300;\n    backface-visibility: hidden;\n    transform-style: preserve-3d;\n    transform-origin: 50% 100%;\n    transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;\n    display:block;\n\n    &:active {\n      transform: rotateX(-60deg);\n    }\n  }\n\n  ul {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    bottom: 0;\n    margin:0;\n\n    li {\n      transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;\n      position: absolute;\n      top: 0;\n      z-index: 0;\n      width:100%;\n      height:100%;\n\n      transform: translateY(300px);\n    }\n  }\n}\n\n// 19.1 Left Bounce\n.effeckt-off-screen-nav-left-bounce {\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  transform: translateX(-100%);\n\n  &.effeckt-show {\n    visibility: visible;\n    transform: translateX(0%);\n    animation: navFromLeftBounceIn $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n\n  &.effeckt-hide {\n    transform: translateX(-100%);\n    animation: navFromLeftBounceOut $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n}\n\n@keyframes navFromLeftBounceIn {\n  0% { transform: translateX(-100%); }\n  20% { padding-left: 0px; transform: translateX(0%); }\n  60% { padding-left: 20px; }\n  100% { padding-left: 0px; }\n}\n@keyframes navFromLeftBounceOut {\n  0% { transform: translateX(0%); padding-left: 0px; }\n  40%{ transform: translateX(0%); padding-left: 20px; }\n  80%{ padding-left: 0px; }\n  90%, 100%{ transform: translateX(-100%); }\n}\n\n// 19.2 Left Bounce Out Only\n.effeckt-off-screen-nav-left-bounce-out {\n  transform: translateX(-100%);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n\n  &.effeckt-show {\n    visibility: visible;\n    transform: translateY(0%);\n  }\n\n  &.effeckt-hide {\n    animation: navFromLeftBounceOut $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n}\n\n// 20.1 Right Bounce\n.effeckt-off-screen-nav-right-bounce {\n  left: auto;\n  right: 0;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n\n  &.effeckt-show {\n    visibility: visible;\n    animation: navFromRightBounceIn $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n\n  &.effeckt-hide {\n    animation: navFromRightBounceOut $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n}\n\n@keyframes navFromRightBounceIn {\n  0% { transform: translateX(100%); }\n  20% { padding-right: 0px; transform: translateX(0%); }\n  60% { padding-right: 20px; }\n  100% { padding-right: 0px; }\n}\n@keyframes navFromRightBounceOut {\n  0% { transform: translateX(0%); padding-right: 0px; }\n  40%{ transform: translateX(0%); padding-right: 20px; }\n  80%{ padding-right: 0px; }\n  90%, 100%{ transform: translateX(100%); }\n}\n\n// 20.2 Left Bounce Out Only\n.effeckt-off-screen-nav-right-bounce-out {\n  left: auto;\n  right: 0;\n  transform: translateX(100%);\n  transition: $effeckt-off-screen-navigation-transition-duration;\n\n  &.effeckt-show {\n    visibility: visible;\n    transform: translateY(0%);\n  }\n\n  &.effeckt-hide {\n    animation: navFromRightBounceOut $effeckt-off-screen-navigation-transition-duration both ease;\n  }\n}\n\n\n// 21 Rotate from Bottom\n.effeckt-off-screen-nav-bottom-rotate {\n  top: auto;\n  width: 100%;\n  transform-origin: 100% 50%;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  transform: translateY(100%) scale(1.01) rotateX(-30deg);\n\n  ~ [data-effeckt-page].effeckt-page-active {\n    transform-origin: 0% 100%;\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n\n  ~ .effeckt-overlay {\n    z-index:900;\n    visibility: visible;\n    opacity: 1;\n  }\n\n  &.effeckt-show {\n    transform: none;\n\n    ~ [data-effeckt-page].effeckt-page-active {\n      transform: translateY(-260px) rotateX(15deg);\n\n      // Prevent scrolling\n      overflow: hidden;\n\n      &:after {\n        background: none;\n      }\n    }\n\n    // dont nest > 3 levels deep\n    ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n  }\n}\n\n// 22 Rotate from Top\n.effeckt-off-screen-nav-top-rotate {\n  bottom: auto;\n  width: 100%;\n  transform-origin: 50% 0%;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  transform: translateY(-100%) scale(1.01) rotateX(30deg);\n\n  ~ [data-effeckt-page].effeckt-page-active {\n    transform-origin: 100% 0%;\n    transition: $effeckt-off-screen-navigation-transition-duration;\n  }\n\n  ~ .effeckt-overlay {\n    z-index:900;\n    visibility: visible;\n    opacity: 1;\n  }\n\n  &.effeckt-show {\n    transform: none;\n\n    ~ [data-effeckt-page].effeckt-page-active {\n      transform: translateY(260px) rotateX(-15deg);\n\n      // Prevent scrolling\n      overflow: hidden;\n\n      &:after {\n        background: none;\n      }\n    }\n\n    // dont nest > 3 levels deep\n    ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n  }\n}\n// 23 Minimize then reveal\n// based on left-reveal (2) and Rotate from Top (22)\n@mixin minimize-reveal-list-items-hidden {\n  li, h4 {\n    transition: $effeckt-off-screen-navigation-transition-duration  cubic-bezier(.16,.86,.33,.97);\n    transform: translateX(5%);\n    opacity: 0;\n  }\n}\n\n@mixin minimize-reveal-list-items-fade {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n@mixin minimize-reveal-list-items-shown {\n  h4 {\n    @include minimize-reveal-list-items-fade();\n    //fade in header first.\n    transition-delay: $effeckt-off-screen-navigation-transition-duration;\n  }\n  @for $i from 1 through $effeckt-off-screen-navigation-list-item-amount {\n    li:nth-child(#{$i}) {\n      @include minimize-reveal-list-items-fade();\n      //wait until the header has finished\n      transition-delay: $effeckt-off-screen-navigation-transition-duration * 2 + $effeckt-off-screen-navigation-transition-duration * $i * 0.25;\n    }\n  }\n}\n\n.effeckt-off-screen-nav-minimize-reaveal {\n  width: 100%;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  // padding-right: 35%;\n\n  ~ [data-effeckt-page].effeckt-page-active {\n    transition: $effeckt-off-screen-navigation-transition-duration;\n    box-shadow: 0px 0px 50px #CACACA;\n    z-index: 1000;\n  }\n\n  @include minimize-reveal-list-items-hidden();\n  &.effeckt-show {\n    @include minimize-reveal-list-items-shown();\n\n    ~ [data-effeckt-page].effeckt-page-active {\n      transition: $effeckt-off-screen-navigation-transition-duration * 1.5  cubic-bezier(.16,.86,.33,.97);\n      transform: translateX(50%) scale3d(0.5,0.5,1);\n      overflow: hidden;\n    }\n\n    // dont nest > 3 levels deep\n    ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n.effeckt-off-screen-nav-minimize-flip {\n  width: 100%;\n  transition: $effeckt-off-screen-navigation-transition-duration;\n  // padding-right: 35%;\n\n  ~ [data-effeckt-page].effeckt-page-active {\n    transition: $effeckt-off-screen-navigation-transition-duration;\n    box-shadow: 0px 0px 50px #CACACA;\n    z-index: 1000;\n  }\n\n  @include minimize-reveal-list-items-hidden();\n  &.effeckt-show {\n    @include minimize-reveal-list-items-shown();\n\n    ~ [data-effeckt-page].effeckt-page-active {\n      transition: $effeckt-off-screen-navigation-transition-duration * 1.5  cubic-bezier(.16,.86,.33,.97);\n      transform: translateX(50%) rotateY(-15deg) scale3d(0.5,0.5,1);\n      overflow: hidden;\n    }\n\n    // dont nest > 3 levels deep\n    ~ [data-effeckt-page] .off-screen-nav-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n  }\n}\n"
  },
  {
    "path": "scss/modules/page-transitions.scss",
    "content": "//------------------------------------------------------------\n// Page Transitions\n// Based on http://tympanus.net/Development/PageTransitions/\n//\n// Rewritten for effeckts project\n//------------------------------------------------------------\n\n@import \"../_variables\";\n\n[data-effeckt-page] {\n  position: relative;\n  top:0;\n  left:0;\n  width: 100%;\n  height: 100%;\n  -webkit-overflow-scrolling: touch;\n  overflow-x: hidden;\n  visibility: hidden;\n  z-index:0;\n  padding: 2rem 4rem 0;\n  backface-visibility: hidden;\n  transform: translate3d(0, 0, 0);\n  transform-style: preserve-3d;\n  display: none;\n\n  &.effeckt-page-active {\n    display: block;\n    visibility: visible;\n    z-index:10;\n  }\n\n  &.effeckt-page-animating {\n    overflow: hidden;\n    z-index: 100;\n    position: absolute;\n  }\n}\n\n//-----------------------------------------------------\n// Slide's Classes\n//-----------------------------------------------------\n\n\n// Slide From/To Left\n[data-effeckt-page].slide-from-left {\n  animation: slideFromLeft $effeckt-page-transition-duration forwards ease-in-out;\n}\n[data-effeckt-page].slide-to-left {\n  animation: slideToLeft $effeckt-page-transition-duration forwards ease-in-out;\n}\n\n// Slide From/To Right\n[data-effeckt-page].slide-from-right {\n  animation: slideFromRight $effeckt-page-transition-duration forwards ease-in-out;\n}\n[data-effeckt-page].slide-to-right {\n  animation: slideToRight $effeckt-page-transition-duration forwards ease-in-out;\n}\n\n// Slide From/To Top\n[data-effeckt-page].slide-from-top {\n  animation: slideFromTop $effeckt-page-transition-duration forwards ease-in-out;\n}\n[data-effeckt-page].slide-to-top {\n  animation: slideToTop $effeckt-page-transition-duration forwards ease-in-out;\n}\n\n// Slide From/To Bottom\n[data-effeckt-page].slide-from-bottom {\n  animation: slideFromBottom $effeckt-page-transition-duration forwards ease-in-out;\n}\n[data-effeckt-page].slide-to-bottom {\n  animation: slideToBottom $effeckt-page-transition-duration forwards ease-in-out;\n}\n\n// Scale Up From Behind\n[data-effeckt-page].scale-up-from-behind {\n  animation: scaleUpFromBehind $effeckt-page-transition-duration forwards ease-in-out;\n  @extend .animation-delay-300;\n}\n\n\n//-----------------------------------------------------\n// Scale's Classes\n//-----------------------------------------------------\n\n\n// Scale Up To Front\n[data-effeckt-page].scale-up-to-front {\n  animation: scaleUpToFront $effeckt-page-transition-duration forwards ease-in-out;\n  \n  &.effeckt-page-animating {\n    @extend .page-on-top;\n  }\n}\n\n// Scale Down To Behind\n[data-effeckt-page].scale-down-to-behind {\n  animation: scaleDownToBehind $effeckt-page-transition-duration forwards ease-in-out;\n}\n\n// Scale Down From Front\n[data-effeckt-page].scale-down-from-front {\n  animation: scaleDownFromFront $effeckt-page-transition-duration forwards ease-in-out;\n  @extend %animation-delay-300;\n  \n  &.effeckt-page-animating {\n    @extend .page-on-top;\n  }\n}\n\n// Scale Down Slide To Left\n[data-effeckt-page].scale-down-slide-to-left {\n  animation: scaleDownSlideToLeft $effeckt-page-transition-duration * 2 forwards ease-in-out;\n}\n\n// Scale Down Slide From Right\n[data-effeckt-page].scale-down-slide-from-right {\n  animation: scaleDownSlideFromRight $effeckt-page-transition-duration * 2 forwards ease-in-out;\n}\n\n// Scale Down Slide From Left\n[data-effeckt-page].scale-down-slide-from-left {\n  animation: scaleDownSlideFromLeft $effeckt-page-transition-duration * 2 forwards ease-in-out;\n}\n\n// Scale Down Slide To Right\n[data-effeckt-page].scale-down-slide-to-right {\n  animation: scaleDownSlideToRight $effeckt-page-transition-duration * 2 forwards ease-in-out;\n}\n\n// Scale Down Slide From Top\n[data-effeckt-page].scale-down-slide-from-top {\n  animation: scaleDownSlideFromTop $effeckt-page-transition-duration * 2 forwards ease-in-out;\n}\n\n// Scale Down Slide To Bottom\n[data-effeckt-page].scale-down-slide-to-bottom {\n  animation: scaleDownSlideToBottom $effeckt-page-transition-duration * 2 forwards ease-in-out;\n}\n\n// Scale Down Slide From Bottom\n[data-effeckt-page].scale-down-slide-from-bottom {\n  animation: scaleDownSlideFromBottom $effeckt-page-transition-duration * 2 forwards ease-in-out;\n}\n\n// Scale Down Slide To Top\n[data-effeckt-page].scale-down-slide-to-top {\n  animation: scaleDownSlideToTop $effeckt-page-transition-duration * 2 forwards ease-in-out;\n}\n\n\n//-----------------------------------------------------\n// Rotate's Classes\n//-----------------------------------------------------\n\n\n// Rotate to Behind\n[data-effeckt-page].rotate-to-behind {\n  transform-origin: -50% 50%;\n  animation: rotateToBehind $effeckt-page-transition-duration/2 both ease-in;\n}\n\n// Rotate to Front\n[data-effeckt-page].rotate-to-front {\n  transform-origin: 150% 50%;\n  animation: rotateToFront $effeckt-page-transition-duration/2 both ease-out;\n}\n\n\n//-----------------------------------------------------\n// Flip's Classes\n//-----------------------------------------------------\n\n\n// Flip to Right\n[data-effeckt-page].flip-to-right-front {\n  backface-visibility: hidden;\n  animation: flipToRightBack $effeckt-page-transition-duration forwards ease;\n}\n\n[data-effeckt-page].flip-to-right-back {\n  backface-visibility: hidden;\n  animation: flipToRight $effeckt-page-transition-duration forwards ease;\n}\n\n// Flip to Left\n[data-effeckt-page].flip-to-left-front {\n  backface-visibility: hidden;\n  animation: flipToLeftBack $effeckt-page-transition-duration forwards ease;\n}\n\n[data-effeckt-page].flip-to-left-back {\n  backface-visibility: hidden;\n  animation: flipToLeft $effeckt-page-transition-duration forwards ease;\n}\n\n// Flip to Top\n[data-effeckt-page].flip-to-top-front {\n  backface-visibility: hidden;\n  animation: flipToTopBack $effeckt-page-transition-duration forwards ease;\n}\n\n[data-effeckt-page].flip-to-top-back {\n  backface-visibility: hidden;\n  animation: flipToTop $effeckt-page-transition-duration forwards ease;\n}\n\n// Flip to Bottom\n[data-effeckt-page].flip-to-bottom-front {\n  backface-visibility: hidden;\n  animation: flipToBottomBack $effeckt-page-transition-duration forwards ease;\n}\n\n[data-effeckt-page].flip-to-bottom-back {\n  backface-visibility: hidden;\n  animation: flipToBottom $effeckt-page-transition-duration forwards ease;\n}\n\n\n\n//-----------------------------------------------------\n// Animations\n//-----------------------------------------------------\n\n\n// Slides Animations\n\n@keyframes slideFromTop {\n  from {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes slideToTop {\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes slideFromRight {\n  from {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideToRight {\n  to {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes slideFromBottom {\n  from {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes slideToBottom {\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes slideFromLeft {\n  from {\n    transform: translateX(-100%);\n  }\n}\n@keyframes slideToLeft {\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n\n// Scale Animations\n\n@keyframes scaleUpFromBehind {\n  from {\n    opacity:0;\n    transform: scale(0.5);\n  }\n}\n@keyframes scaleUpToFront {\n  to {\n    opacity:0;\n    transform: scale(1.3);\n  }\n}\n\n@keyframes scaleDownToBehind {\n  to {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n}\n@keyframes scaleDownFromFront {\n  from {\n    opacity: 0;\n    transform: scale(1.3);\n  }\n  to {\n   opacity:1; \n  }\n}\n\n\n// Scale Down Slide Animations\n\n@keyframes scaleDownSlideToLeft {\n  25% { opacity: .5; transform: translateZ(-500px); }\n  75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }\n  100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }\n}\n@keyframes scaleDownSlideFromRight {\n  0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }\n  75% { opacity: .5; transform: translateZ(-500px); }\n  100% { opacity: 1; transform: translateZ(0) translateX(0); }\n}\n@keyframes scaleDownSlideFromLeft {\n  0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }\n  75% { opacity: .5; transform: translateZ(-500px); }\n  100% { opacity: 1; transform: translateZ(0) translateX(0%); }\n}\n@keyframes scaleDownSlideToRight {\n  25% { opacity: .5; transform: translateZ(-500px); }\n  75% { opacity: .5; transform: translateZ(-500px) translateX(200%); }\n  100% { opacity: .5; transform: translateZ(-500px) translateX(200%); }\n}\n@keyframes scaleDownSlideFromTop {\n  0%, 25% { opacity: .5; transform: translateZ(-500px) translateY(-200%); }\n  75% { opacity: .5; transform: translateZ(-500px); }\n  100% { opacity: 1; transform: translateZ(0) translateY(0%); }\n}\n@keyframes scaleDownSlideToBottom {\n  25% { opacity: .5; transform: translateZ(-500px); }\n  75% { opacity: .5; transform: translateZ(-500px) translateY(200%); }\n  100% { opacity: .5; transform: translateZ(-500px) translateY(200%); }\n}\n@keyframes scaleDownSlideFromBottom {\n  0%, 25% { opacity: .5; transform: translateZ(-500px) translateY(200%); }\n  75% { opacity: .5; transform: translateZ(-500px); }\n  100% { opacity: 1; transform: translateZ(0) translateY(0%); }\n}\n@keyframes scaleDownSlideToTop {\n  25% { opacity: .5; transform: translateZ(-500px); }\n  75% { opacity: .5; transform: translateZ(-500px) translateY(-200%); }\n  100% { opacity: .5; transform: translateZ(-500px) translateY(-200%); }\n}\n\n// Rotate Animations\n\n@keyframes rotateToBehind {\n  to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); }\n}\n\n@keyframes rotateToFront {\n  from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); }\n}\n\n\n// Flip Animations\n\n@keyframes flipToRight {\n  to {\n    transform: rotateY(180deg);\n  }\n}\n@keyframes flipToRightBack {\n  from {\n    transform: rotateY(-180deg);\n  }\n}\n\n@keyframes flipToLeft {\n  to {\n    transform: rotateY(-180deg);\n  }\n}\n@keyframes flipToLeftBack {\n  from {\n    transform: rotateY(180deg);\n  }\n}\n\n@keyframes flipToTop {\n  to {\n    transform: rotateX(180deg);\n  }\n}\n@keyframes flipToTopBack {\n  from {\n    transform: rotateX(-180deg);\n  }\n}\n\n@keyframes flipToBottom {\n  to {\n    transform: rotateX(-180deg);\n  }\n}\n@keyframes flipToBottomBack {\n  from {\n    transform: rotateX(180deg);\n  }\n}\n\n\n\n//-----------------------------------------------------\n// Utils Classes\n// If you want to use it againts normal definition\n//-----------------------------------------------------\n\n\n// Make this page on top\n.page-on-top {\n  z-index:999;\n}\n\n// Animation Delay Classes\n.animation-delay-100 {\n  animation-delay: .100s;\n}\n.animation-delay-200 {\n  animation-delay: .200s;\n}\n.animation-delay-300 {\n  animation-delay: .300s;\n}\n.animation-delay-500 {\n  animation-delay: .500s;\n}\n.animation-delay-700 {\n  animation-delay: .700s;\n}\n.animation-delay-1000 {\n  animation-delay: 1000s;\n}\n"
  },
  {
    "path": "scss/modules/positional-modals.scss",
    "content": "@import \"../_variables\";\n\n// TODO\n// - use more variables\n\n.effeckt-positional-modal-wrap {\n  position: absolute;\n  z-index: 10;\n  display: none;\n\n  &.effeckt-front {\n    z-index: 20;\n  }\n}\n\n.effeckt-positional-modal-wrap {\n\n  &[data-effeckt-position=\"above\"] {\n    margin-top: -15px;\n    .effeckt-modal {\n      &:before {\n        content: \"\";\n        position: absolute;\n        top: 100%;\n        left: 50%;\n        width: 0;\n        height: 0;\n        margin-left: -10px;\n        border-top: 10px solid #ccc;\n        border-right: 10px solid transparent;\n        border-left: 10px solid transparent;\n      }\n    }\n  }\n\n  &[data-effeckt-position=\"below\"] {\n    margin-top: 15px;\n    .effeckt-modal {\n      &:before {\n        content: \"\";\n        position: absolute;\n        bottom: 100%;\n        left: 50%;\n        width: 0;\n        height: 0;\n        margin-left: -10px;\n        border-bottom: 10px solid #ccc;\n        border-right: 10px solid transparent;\n        border-left: 10px solid transparent;\n      }\n    }\n  }\n\n  &[data-effeckt-position=\"right\"] {\n    margin-left: 15px;\n    .effeckt-modal {\n      &:before {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        right: 100%;\n        width: 0;\n        height: 0;\n        margin-top: -10px;\n        border-top: 10px solid transparent;\n        border-bottom: 10px solid transparent;\n        border-right: 10px solid #ccc;\n      }\n    }\n  }\n\n  &[data-effeckt-position=\"left\"] {\n    margin-left: -15px;\n    .effeckt-modal {\n      &:before {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        left: 100%;\n        width: 0;\n        height: 0;\n        margin-top: -10px;\n        border-top: 10px solid transparent;\n        border-bottom: 10px solid transparent;\n        border-left: 10px solid #ccc;\n      }\n    }\n  }\n\n}\n"
  },
  {
    "path": "scss/modules/tabs.scss",
    "content": "@import \"../_variables\";\n\n.effeckt-tabs-wrap {\n\tposition: relative;\n\n\tul.effeckt-tabs {\n\t\toverflow: hidden; // used to be clearfix\n\t}\n\n\t.effeckt-tabs-container {\n\t\tposition: relative;\n\t\ttransition: all $effeckt-tabs-transition-duration ease-in-out;\n\n\t\t.effeckt-tab-content {\n\t\t\tposition: absolute;\n\t\t\ttransition: all $effeckt-tabs-transition-duration/2 ease-in-out;\n\t\t}\n\t}\n\t\n\t\n\t&[data-effeckt-type='scale'] {\n\t\t.effeckt-tab-content {\n\t\t\t&.effeckt-hide {\n\t\t\t\ttransform: scale(0.9);\n\t\t\t\topacity:0;\n\t\t\t}\n\t\t\t&.effeckt-show {\n\t\t\t\ttransform: scale(1);\n\t\t\t\ttransition-delay: 0.3s;\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n\n\t&[data-effeckt-type='scale-up'] {\n\t\t.effeckt-tab-content {\n\t\t\t&.effeckt-hide {\n\t\t\t\ttransform: scale(1.1);\n\t\t\t\topacity:0;\n\t\t\t}\n\t\t\t&.effeckt-show {\n\t\t\t\ttransform: scale(1);\n\t\t\t\ttransition-delay: 0.3s;\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n\n\t&[data-effeckt-type='slide-left'] {\n\t\t.effeckt-tabs-container{\n\t\t\toverflow:hidden;\n\t\t\t.effeckt-tab-content {\n\t\t\t\t&.effeckt-hide {\n\t\t\t\t\ttransform: translateX(-100%);\n\t\t\t\t\topacity:0;\n\t\t\t\t}\n\t\t\t\t&.effeckt-show {\n\t\t\t\t\ttransform: translateX(0%);\n\t\t\t\t\ttransition-delay: 0.3s;\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&[data-effeckt-type='slide-right'] {\n\t\t.effeckt-tabs-container{\n\t\t\toverflow:hidden;\n\t\t\t.effeckt-tab-content {\n\t\t\t\t&.effeckt-hide {\n\t\t\t\t\ttransform: translateX(100%);\n\t\t\t\t\topacity:0;\n\t\t\t\t}\n\t\t\t\t&.effeckt-show {\n\t\t\t\t\ttransform: translateX(0%);\n\t\t\t\t\ttransition-delay: 0.3s;\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&[data-effeckt-type='slide-up'] {\n\t\t.effeckt-tabs-container{\n\t\t\toverflow:hidden;\n\t\t\t.effeckt-tab-content {\n\t\t\t\t&.effeckt-hide {\n\t\t\t\t\ttransform: translateY(-100%);\n\t\t\t\t\topacity:0;\n\t\t\t\t}\n\t\t\t\t&.effeckt-show {\n\t\t\t\t\ttransform: translateY(0%);\n\t\t\t\t\ttransition-delay: 0.3s;\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&[data-effeckt-type='slide-down'] {\n\t\t.effeckt-tabs-container{\n\t\t\toverflow:hidden;\n\t\t\t.effeckt-tab-content {\n\t\t\t\t&.effeckt-hide {\n\t\t\t\t\ttransform: translateY(100%);\n\t\t\t\t\topacity:0;\n\t\t\t\t}\n\t\t\t\t&.effeckt-show {\n\t\t\t\t\ttransform: translateX(0%);\n\t\t\t\t\ttransition-delay: 0.3s;\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&[data-effeckt-type='flip'] {\n\t\t.effeckt-tabs-container{\n\t\t\toverflow:hidden;\n\t\t\t.effeckt-tab-content {\n\t\t\t\t&.effeckt-hide {\n\t\t\t\t\ttransform: rotateY(-90deg) scale(1.1);\n\t\t\t\t\topacity:0;\n\t\t\t\t}\n\t\t\t\t&.effeckt-show {\n\t\t\t\t\ttransform: rotateY(0deg) scale(1);\n\t\t\t\t\ttransition-delay: 0.3s;\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}"
  },
  {
    "path": "scss/modules/tooltips.scss",
    "content": "// TODO\n// Use variables where we can in here\n// Adjust position based on $effeckt-tooltip-arrow-size\n\n@import \"../_variables\";\n\n// Basic .effeck-tooltip\n.effeckt-tooltip[data-effeckt-tooltip-text] {\n  position: relative;\n  // make tooltip text to be always on the same line\n  // this prevent out of position tooltip\n  display: inline-block;\n\n  &::before, &::after {\n    opacity: 0;\n    transition: $effeckt-tooltip-transition-delay; // no delay on hover off\n  }\n\n  &:hover::before, &:hover::after {\n    visibility: visible;\n    opacity: 1;\n    transition: $effeckt-tooltip-transition-delay $effeckt-tooltip-transition-duration; // slight delay on hover on\n  }\n}\n\n// tooltip bubble\n.effeckt-tooltip[data-effeckt-type=\"bubble\"]{\n  &::after { // text of tooltip\n    content: attr(data-effeckt-tooltip-text);\n    position: absolute;\n    border-radius: 10px;\n    background: $effeckt-tooltip-background;\n    color: $effeckt-tooltip-forground;\n    padding: 0.45rem 0.8rem;\n    font-size: 90%;\n    white-space: nowrap;\n    visibility: hidden; // makes un-hoverable when hidden (opacity alone doesn't work)\n\n    z-index: 2; //prevent collapse between another tooltip\n  }\n\n  &::before { // triangle / speech bubble arrow\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n}\n\n// bubble top and bottom\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"],\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"] {\n  &::after {\n    transform: translateX(-50%); // horizontal centering\n    left:50%;\n  }\n  &:before {\n    left: 50%;\n    margin-left: -5px;\n  }\n}\n\n// bubble orientation top\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"top\"] {\n\n  &::after, &::before {\n    bottom: 125%;\n  }\n\n  &::before {\n    border-top: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;\n    border-left: $effeckt-tooltip-arrow-size solid transparent;\n    border-right: $effeckt-tooltip-arrow-size solid transparent;\n    margin-bottom: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap\n  }\n\n  &:hover::before, &:hover::after {\n    bottom: 115%;\n  }\n}\n// bubble orientation bottom\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"bottom\"] {\n  &::after, &::before {\n    top: 125%;\n  }\n\n  &::before {\n    border-bottom: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;\n    border-left: $effeckt-tooltip-arrow-size solid transparent;\n    border-right: $effeckt-tooltip-arrow-size solid transparent;\n    margin-top: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap\n  }\n\n  &:hover::before, &:hover::after {\n    top: 115%;\n  }\n}\n\n// bubble top and bottom\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"],\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"] {\n  &::after, &:before {\n    top:45%;\n    transform: translateY(-45%); // half font-size size\n    margin-top:2px;\n  }\n}\n\n// bubble orientation right\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"right\"] {\n\n  &::after, &::before {\n    left: 115%;\n  }\n\n  &::before {\n    border-right: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;\n    border-top: $effeckt-tooltip-arrow-size solid transparent;\n    border-bottom: $effeckt-tooltip-arrow-size solid transparent;\n    margin-left: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap\n  }\n\n  &:hover::before, &:hover::after {\n    left: 105%;\n  }\n}\n\n// bubble orientation left\n.effeckt-tooltip[data-effeckt-type=\"bubble\"][data-effeckt-position=\"left\"] {\n\n  &::after, &::before {\n    right: 115%;\n  }\n\n  &::before {\n    border-left: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;\n    border-top: $effeckt-tooltip-arrow-size solid transparent;\n    border-bottom: $effeckt-tooltip-arrow-size solid transparent;\n    margin-right: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap\n  }\n\n  &:hover::before, &:hover::after {\n    right: 105%;\n  }\n}"
  },
  {
    "path": "src/templates/layouts/layout.hbs",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n  <meta charset=\"utf-8\">\n\n  <title>Effeckt.css</title>\n\n  <meta name=\"description\" content=\"UI-Less & Performant Transitions & Animations\">\n\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->\n\n  <link rel=\"stylesheet\" href=\"{{assets}}/css/demo/demo.css\">\n\n  <!-- Individual module CSS files here -->\n  <!-- Should we combine or not combine? -->\n  <link rel=\"stylesheet\" href=\"{{assets}}/css/effeckt.css\">\n</head>\n\n<body>\n\n  <div class=\"warning\">Work in Progress! Not quite ready for prime-time</div>\n\n  {{> off-screen-nav}}\n\n  {{> page-transition}}\n\n  {{> modal}}\n\n  <div data-effeckt-page=\"page-1\">\n\n    <div class=\"page-wrap no-transitions\" id=\"page-wrap\">\n\n      <h1>\n        <a href=\"./\">\n          <span>E</span>\n          <span>f</span>\n          <span>f</span>\n          <span>e</span>\n          <span>c</span>\n          <span>k</span>\n          <span>t</span>\n          <br class=\"mobile-break\">\n          <span>.</span>\n          <span>c</span>\n          <span>s</span>\n          <span>s</span>\n        </a>\n      </h1>\n      <subhead>\n        Performant CSS transitions & animations\n        <a href=\"https://github.com/h5bp/Effeckt.css\">on GitHub</a>\n      </subhead>\n\n\n      {{>body}}\n\n\n      <div class=\"effeckt contributors readme\">\n\n        <header>\n          <h2>About</h2>\n        </header>\n\n        <p>Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?\n\n        <p>Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.\n\n        <p>This library has a few <strong>goals</strong>:</p>\n\n        <ol>\n          <li>It provides very little UI of its own. It's only hooks for transitions/animations.</li>\n          <li>Designer-curated set of classy and reasonable effects. (no <a href=\"http://easings.net/#easeInBounce\"><code>easeInBounce</code></a>)</li>\n          <li>Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade)</li>\n          <li>CSS performance regression testing (a la <a href=\"http://bench.topcoat.io\">bench.topcoat.io</a>)</li>\n          <li>Deliver jank-free <em>60fps</em> performance on target browsers/devices</li>\n          <li>If a particular effect cannot deliver target performance (hey <code>blur()</code> CSS filter), it cannot be included.</li>\n          <li>Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)</li>\n          <li>Deliver a builder so users can pull only the CSS they need.</li>\n          <li>There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap equivalent.</li>\n        </ol>\n\n        <div class=\"fluid-video\">\n          <iframe width=\"640\" height=\"480\" src=\"//www.youtube.com/embed/Qc40YDFA4Bg\" frameborder=\"0\" allowfullscreen></iframe>\n        </div>\n\n        <header>\n          <h2>Contributors</h2>\n        </header>\n\n        <ul id=\"contributors-list\" class=\"contributors-list\"></ul>\n\n      </div>\n\n\n      {{> off-screen-nav-cover}}\n\n    </div><!-- div.page-wrap -->\n  </div>\n\n  <div data-effeckt-page=\"page-2\">\n    <div class=\"page-wrap\" id=\"page-2\">\n      <h2>Page Transition From Left</h2>\n\n      <p>This is another page.</p>\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nulla unde doloremque consequuntur illum quo dolor. Tenetur, voluptate temporibus fuga labore atque illum quas vel dignissimos impedit vitae corporis itaque!<p>\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, sunt tempora perspiciatis officia laudantium voluptas dicta! Nesciunt, magnam nostrum velit iste beatae totam voluptatibus sint quas amet modi architecto labore.</p>\n      <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"slide-from-right\"  data-effeckt-transition-out=\"slide-to-left\" data-effeckt-transition-page=\"page-1\">Slide From Right</button>\n    </div>\n  </div>\n\n  <div data-effeckt-page=\"page-3\">\n    <div class=\"page-wrap\" id=\"page-3\">\n      <h2>Page Transition From Right</h2>\n\n      <p>This is another page.</p>\n\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus, aliquam error excepturi asperiores ipsum nobis molestias neque molestiae illum magnam mollitia nulla temporibus aliquid esse rem amet cumque facilis.</p>\n\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, temporibus, ducimus architecto quidem voluptatem sint maiores atque deserunt sed aspernatur eveniet vel perferendis corrupti impedit aut voluptates neque similique enim.</p>\n      <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"slide-from-left\" data-effeckt-transition-out=\"slide-to-right\" data-effeckt-transition-page=\"page-1\">Slide From Left</button>\n    </div>\n  </div>\n\n  <div data-effeckt-page=\"page-4\">\n    <div class=\"page-wrap\" id=\"page-4\">\n      <h2>Page Transition From Bottom</h2>\n\n      <p>This is another page.</p>\n\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus, aliquam error excepturi asperiores ipsum nobis molestias neque molestiae illum magnam mollitia nulla temporibus aliquid esse rem amet cumque facilis.</p>\n\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, temporibus, ducimus architecto quidem voluptatem sint maiores atque deserunt sed aspernatur eveniet vel perferendis corrupti impedit aut voluptates neque similique enim.</p>\n      <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"slide-from-top\" data-effeckt-transition-out=\"slide-to-bottom\" data-effeckt-transition-page=\"page-1\">Slide From Top</button>\n    </div>\n  </div>\n\n  <div data-effeckt-page=\"page-5\">\n    <div class=\"page-wrap\" id=\"page-5\">\n      <h2>Page Transition From Top</h2>\n\n      <p>This is another page.</p>\n\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus, aliquam error excepturi asperiores ipsum nobis molestias neque molestiae illum magnam mollitia nulla temporibus aliquid esse rem amet cumque facilis.</p>\n\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, temporibus, ducimus architecto quidem voluptatem sint maiores atque deserunt sed aspernatur eveniet vel perferendis corrupti impedit aut voluptates neque similique enim.</p>\n      <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"slide-from-bottom\" data-effeckt-transition-out=\"slide-to-top\" data-effeckt-transition-page=\"page-1\">Slide From Bottom</button>\n    </div>\n  </div>\n\n  <!-- Libs -->\n  <script src=\"{{assets}}/js/libs/jquery.min.js\"></script>\n  <script src=\"{{assets}}/js/libs/modernizr.js\"></script>\n\n  <!-- Individual module JS files here -->\n  <!-- Should we combine or not combine? -->\n  <!-- Should we provide minified versions? -->\n  <script src=\"{{assets}}/js/core.js\"></script>\n  <script src=\"{{assets}}/js/modules/modal.js\"></script>\n  <script src=\"{{assets}}/js/modules/buttons.js\"></script>\n  <script src=\"{{assets}}/js/modules/list-items.js\"></script>\n  <script src=\"{{assets}}/js/modules/off-screen-nav.js\"></script>\n  <script src=\"{{assets}}/js/modules/page-transitions.js\"></script>\n  <script src=\"{{assets}}/js/modules/list-scroll.js\"></script>\n  <script src=\"{{assets}}/js/modules/tabs.js\"></script>\n  <script src=\"{{assets}}/js/modules/positional-modals.js\"></script>\n  <script src=\"{{assets}}/js/modules/captions.js\"></script>\n\n  <!-- Demo JS -->\n  <script src=\"{{assets}}/js/demo/demo.js\"></script>\n\n</body>\n\n</html>\n"
  },
  {
    "path": "src/templates/pages/buttons.hbs",
    "content": "<div class=\"effeckt effeckt-demo-buttons group\">\n\n  <header>\n    <h2>\n      Buttons\n      <a href=\"buttons.html\">#</a>\n    </h2>\n    <span class=\"source\">\n      Sources:\n      <a href=\"http://lab.hakim.se/ladda/\">\n        Hakim El Hattab\n      </a>\n      /\n      <a href=\"http://tympanus.net/codrops/2013/06/13/creative-button-styles/\">\n        Codrops\n      </a>\n    </span>\n  </header>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"expand-right\"><span class=\"label\">Expand Right</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"expand-left\"><span class=\"label\">Expand Left</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"expand-up\"><span class=\"label\">Expand Up</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"expand-down\"><span class=\"label\">Expand Down</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"slide-left\"><span class=\"label\">Slide Left</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"slide-right\"><span class=\"label\">Slide Right</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"slide-up\"><span class=\"label\">Slide Up</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"slide-down\"><span class=\"label\">Slide Down</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"zoom-out\"><span class=\"label\">Zoom Out</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"zoom-in\"><span class=\"label\">Zoom in</span> <span class=\"spinner\"></span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"fill-from-left\"><span class=\"effeckt-button-label\">Fill from left</span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"fill-from-right\"><span class=\"effeckt-button-label\">Fill from right</span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"fill-from-top\"><span class=\"effeckt-button-label\">Fill from top</span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"fill-from-bottom\"><span class=\"effeckt-button-label\">Fill from bottom</span></button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"icon-slide from-top\">\n      <span class=\"effeckt-button-label demo-button-icon\">Icon from top</span>\n    </button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"icon-slide from-bottom\">\n      <span class=\"effeckt-button-label demo-button-icon\">Icon from bottom</span>\n    </button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"icon-slide from-left\">\n      <span class=\"effeckt-button-label demo-button-icon\">Icon from left</span>\n    </button>\n  </div>\n\n  <div class=\"button-demo-wrap\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"icon-slide from-right\">\n      <span class=\"effeckt-button-label demo-button-icon\">Icon from right</span>\n    </button>\n  </div>\n\n  <div class=\"button-demo-wrap perspective\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"3d-rotate-success\" data-effeckt-message=\"It Worked!\">\n      <span class=\"effeckt-button-label\">3D Success</span>\n    </button>\n  </div>\n\n  <div class=\"button-demo-wrap perspective\">\n    <button class=\"effeckt-button\" data-effeckt-type=\"3d-rotate-error\" data-effeckt-message=\"Error!\">\n      <span class=\"effeckt-button-label\">3D Fail</span>\n    </button>\n  </div>\n\n</div>\n"
  },
  {
    "path": "src/templates/pages/captions.hbs",
    "content": "<div class=\"effeckt effeckt-captions group\">\n\n  <header>\n    <h2>\n      Captions\n      <a href=\"captions.html\">#</a>\n    </h2>\n  </header>\n\n  <div class=\"all-captions-wrap\">\n\n  <!-- Appear -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"quarter-appear\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Appear</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Quarter Slide Up -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"quarter-slide-up\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Quarter Slide Up</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Quarter Slide Side -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"quarter-slide-side\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Quarter Slide Side</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Quarter Fall in -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"quarter-fall-in\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Quarter Fall in</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- 3Quarter Two Step -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"quarter-two-step\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Quarter Two-step</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Quarter Caption Zoom -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"quarter-zoom\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Quarter Caption Zoom</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Cover Fade -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"cover-fade\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Cover Fade</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Cover Push Right -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"cover-push-right\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Cover Push Right</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Revolving Door Left -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"revolving-door-left\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Revolving Door</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Revolving Door Right -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"revolving-door-right\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Revolving Door Inverse</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Revolving Door Top -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"revolving-door-top\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Revolving Door</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Revolving Door Bottom -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"revolving-door-bottom\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Revolving Door Inverse</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Cover Slide Top -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"cover-slide-top\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Cover Slide Top</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Caption Offset -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"offset\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Caption Offset</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Guillotine Reverse -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"guillotine-reverse\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Guillotine Reverse</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Half Slide -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"half-slide\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Half Slide</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Sqkwoosh -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"sqkwoosh\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Sqkwoosh</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n\n  <!-- Tunnel -->\n  <figure class=\"effeckt-caption\" data-effeckt-type=\"tunnel\">\n    <img src=\"http://placehold.it/300x200\" alt=\"\">\n    <figcaption>\n      <div class=\"effeckt-figcaption-wrap\">\n        <h3>Tunnel</h3>\n        <p>Lorem ipsum dolar.</p>\n      </div>\n    </figcaption>\n  </figure>\n  \n  </div>\n\n</div>\n"
  },
  {
    "path": "src/templates/pages/form-elements.hbs",
    "content": "<div class=\"effeckt effeckt-demo-form-elements\">\n\n  <header>\n    <h2>\n      Form Elements\n      <a href=\"form-elements.html\">#</a>\n    </h2>\n    <!-- <span class=\"source\">\n      ...\n    </span> -->\n  </header>\n\n  <!-- Checkboxes -->\n  <!-- http://codepen.io/uquaisse/pen/Jqhte -->\n  <h3>Checkbox</h3>\n  <input type=\"checkbox\" class=\"effeckt-ckbox-ios7\">\n  <input type=\"checkbox\" class=\"effeckt-ckbox-ios7\" checked>\n\n  <!-- Radios -->\n  <!-- http://codepen.io/uquaisse/pen/Jqhte -->\n  <h3>Radio</h3>\n  <input type=\"radio\" name=\"group\" class=\"effeckt-rdio-ios7\">\n  <input type=\"radio\" name=\"group\" class=\"effeckt-rdio-ios7\" checked>\n  <input type=\"radio\" name=\"group\" class=\"effeckt-rdio-ios7\">\n\n  <!-- Android Checkboxes -->\n\n  <h3>Android Checkbox</h3>\n  <input type=\"checkbox\" class=\"effeckt-ckbox-android\">\n  <input type=\"checkbox\" class=\"effeckt-ckbox-android\" checked>\n\n  <!-- Android Radios -->\n\n  <h3>Android Radio</h3>\n  <input type=\"radio\" name=\"group2\" class=\"effeckt-rdio-android\">\n  <input type=\"radio\" name=\"group2\" class=\"effeckt-rdio-android\" checked>\n  <input type=\"radio\" name=\"group2\" class=\"effeckt-rdio-android\">\n\n</div>"
  },
  {
    "path": "src/templates/pages/index.hbs",
    "content": "<section class=\"effeckt-demo-modals\">\n  {{>modals}}\n</section>\n\n<section class=\"effeckt-demo-positional-modals\">\n  {{>positional-modals}}\n</section>\n\n<section class=\"effeckt-demo-buttons\">\n  {{>buttons}}\n</section>\n\n<section class=\"effeckt-demo-list-items\">\n  {{>list-items}}\n</section>\n\n<section class=\"effeckt-demo-list-scroll\">\n  {{>list-scroll}}\n</section>\n\n<section class=\"effeckt-demo-off-screen-nav\">\n  {{>off-screen-navs}}\n</section>\n\n<section class=\"effeckt-demo-page-transitons\">\n  {{>page-transitions}}\n</section>\n\n<section class=\"effeckt-demo-captions\">\n  {{>captions}}\n</section>\n\n<section class=\"effeckt-demo-tooltips\">\n  {{>tooltips}}\n</section>\n\n<section class=\"effeckt-demo-form-elements\">\n  {{>form-elements}}\n</section>\n\n<section class=\"effeckt-demo-tabs\">\n  {{>tabs}}\n</section>\n"
  },
  {
    "path": "src/templates/pages/lazy-loading.hbs",
    "content": "<div class=\"effeckt effeckt-demo-grid-loading group\">\n\n  <header>\n    <h2>\n      Grid Loading\n      <a href=\"lazy-loading.html\">#</a>\n    </h2>\n    <span class=\"source\">\n      Source:\n      <a href=\"http://tympanus.net/Development/GridLoadingEffects/index.html\">\n        tympanus\n      </a>\n    </span>\n  </header>\n\n  <div class=\"effeckt-lazy-loading-wrapper\">\n    <div class=\"effeckt-lazy-loading-options\">\n        <form>\n            <input type=\"radio\" id=\"fade\" name=\"effeckt-type\" value=\"fade\"><label for=\"fade\">Fade</label>\n            <input type=\"radio\" id=\"slide-up\" name=\"effeckt-type\" value=\"slide-up\"><label for=\"slide-up\">Slide Up</label>\n            <input type=\"radio\" id=\"scale-up\" name=\"effeckt-type\" value=\"scale-up\"><label for=\"scale-up\">Scale Up</label>\n            <input type=\"radio\" id=\"scale-down\" name=\"effeckt-type\" value=\"scale-down\"><label for=\"scale-down\">Scale Down</label>\n            <input type=\"radio\" id=\"fall\" name=\"effeckt-type\" value=\"fall\"><label for=\"fall\">Fall</label>\n            <input type=\"radio\" id=\"fly\" name=\"effeckt-type\" value=\"fly\"><label for=\"fly\">Fly</label>\n            <input type=\"radio\" id=\"sign-3d\" name=\"effeckt-type\" value=\"sign-3D\"><label for=\"sign-3d\">Sign 3D</label>\n            <input type=\"radio\" id=\"helix\" name=\"effeckt-type\" value=\"helix\"><label for=\"helix\">Helix</label>\n            <input type=\"radio\" id=\"popup\" name=\"effeckt-type\" value=\"popup\" checked><label for=\"popup\">Pop up</label>\n        </form>\n    </div>\n    <ul data-effeckt-type=\"popup\" class=\"effeckt-lazy-loading\" data-effeckt-needs-perspective=\"true\">\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n        <li class=\"effeckt-lazy-loading-element\"><a href=\"#\">ELEMENT</a></li>\n      </ul>\n  </div>\n\n</div>"
  },
  {
    "path": "src/templates/pages/list-items.hbs",
    "content": "<div class=\"effeckt effeckt-demo-list-items group\">\n\n  <header>\n    <h2>\n      List Items\n      <a href=\"list-items.html\">#</a>\n    </h2>\n    <span class=\"source\">\n      Source:\n      <a href=\"http://css-tricks.com/transitional-interfaces-coded/\">\n        CSS-Tricks\n      </a>\n    </span>\n  </header>\n\n  <div class=\"effeckt-list-wrap\">\n    <h4>Gap, Slide In/Slide Out</h4>\n    <ul class=\"effeckt-list\" data-effeckt-type=\"pop-in\">\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n    </ul>\n    <button class=\"add\">Add</button>\n    <button class=\"remove\">Remove</button>\n  </div>\n\n  <div class=\"effeckt-list-wrap\">\n    <h4>Expand In/Shrink Out</h4>\n    <ul class=\"effeckt-list\" data-effeckt-type=\"expand-in\">\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n    </ul>\n    <button class=\"add\">Add</button>\n    <button class=\"remove\">Remove</button>\n  </div>\n\n  <div class=\"effeckt-list-wrap\">\n    <h4>Wobble In/Wobble Out</h4>\n    <ul class=\"effeckt-list\" data-effeckt-type=\"wobble-in\">\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n    </ul>\n    <button class=\"add\">Add</button>\n    <button class=\"remove\">Remove</button>\n  </div>\n\n  <div class=\"effeckt-list-wrap\">\n    <h4>Flip In/Flip Out</h4>\n    <ul class=\"effeckt-list\" data-effeckt-type=\"flip-in\">\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n    </ul>\n    <button class=\"add\">Add</button>\n    <button class=\"remove\">Remove</button>\n  </div>\n\n  <div class=\"effeckt-list-wrap\">\n    <h4>Fall In/Fall Off</h4>\n    <ul class=\"effeckt-list\" data-effeckt-type=\"fall-in\">\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n    </ul>\n    <button class=\"add\">Add</button>\n    <button class=\"remove\">Remove</button>\n  </div>\n\n  <div class=\"effeckt-list-wrap\">\n    <h4>From Above/To Above</h4>\n    <ul class=\"effeckt-list\" data-effeckt-type=\"from-above\">\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n    </ul>\n    <button class=\"add\">Add</button>\n    <button class=\"remove\">Remove</button>\n  </div>\n\n  <div class=\"effeckt-list-wrap\">\n    <h4>Fall In/Wobble Out</h4>\n    <ul class=\"effeckt-list\" data-effeckt-type=\"wobble-out\">\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n    </ul>\n    <button class=\"add\">Add</button>\n    <button class=\"remove\">Remove</button>\n  </div>\n\n  <div class=\"effeckt-list-wrap\">\n    <h4>Bouncy Slide In/Slide, Fall Off</h4>\n    <ul class=\"effeckt-list\" data-effeckt-type=\"bouncy-slide-in\">\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n      <li>list item</li>\n    </ul>\n    <button class=\"add\">Add</button>\n    <button class=\"remove\">Remove</button>\n  </div>\n\n</div>\n"
  },
  {
    "path": "src/templates/pages/list-scroll.hbs",
    "content": "<div class=\"effeckt effeckt-demo-list-scroll group\">\n\n  <header>\n    <h2>\n      List Scroll\n      <a href=\"list-scroll.html\">#</a>\n    </h2>\n    <span class=\"source\">\n      Source:\n      <a href=\"http://lab.hakim.se/scroll-effects/\">\n        Hakim El Hattab\n      </a>\n    </span>\n  </header>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='grow'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='curl'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='wave'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='fan'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='fade'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='fly'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='landing'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='swing-front'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='swing-back'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='twist'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='door'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n  <ul class=\"effeckt-list-scroll\" data-effeckt-type='climb'><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Forty</li><li>Fortyone</li><li>Fortytwo</li><li>Fortythree</li><li>Fortyfour</li><li>Fortyfive</li><li>Fortysix</li><li>Fortyseven</li><li>Fortyeight</li><li>Fortynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>\n\n</div>"
  },
  {
    "path": "src/templates/pages/modals.hbs",
    "content": "<div class=\"effeckt effeckt-demo-modals\">\n\n  <header>\n    <h2>\n      Modals\n      <a href=\"modals.html\">#</a>\n    </h2>\n    <span class=\"source\">\n      Source:\n      <a href=\"http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/\">\n        Codrops\n      </a>\n    </span>\n  </header>\n\n  <div class=\"button-group\">\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"from-below\">From Below</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"from-above\">From Above</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slide-in-top\">Slide In (top)</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slide-in-right\">Slide In (right)</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slide-in-bottom\">Slide In (bottom)</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slide-in-left\">Slide In (left)</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"newspaper\">Newspaper</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"side-fall\">Side Fall</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"sticky-up\">Sticky Up</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"flip-horizontal-3D\">3D Flip (horizontal)</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"flip-vertical-3D\">3D Flip (vertical)</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"sign-3D\">3D Sign</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"fade-in\">Fade In</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slit-3D\">3D Slit</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"rotate-from-bottom-3D\">3D Rotate Bottom</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"rotate-from-left-3D\">3D Rotate In Left</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"blur\">Blur</button>\n\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"let-me-in\" data-effeckt-needs-perspective=\"true\">Let Me In</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"make-way\" data-effeckt-needs-perspective=\"true\">Make Way!</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"deep-content\" data-effeckt-needs-perspective=\"true\">Deep Content</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slip-in-from-top\" data-effeckt-needs-perspective=\"true\">Slip From Top</button>\n\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slide-in-top\" data-effeckt-out-type=\"tilt-fall\">From Top, Tilt Fall</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slide-in-top\" data-effeckt-out-type=\"slide-out-bottom\">From Top to Bottom</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slide-in-bottom\" data-effeckt-out-type=\"slide-out-top\">From Bottom to Top</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slide-in-left\" data-effeckt-out-type=\"slide-out-right\">From Left to Right</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"slide-in-right\" data-effeckt-out-type=\"slide-out-left\">From Right to Left</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"from-above\" data-effeckt-out-type=\"to-below\">From Above to Below</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"from-below\" data-effeckt-out-type=\"to-above\">From Below to Above</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"shake\">Shake</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"bounce\">Bounce</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"pulse\">Pulse</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"wobble\">Wobble</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"swing\">Swing</button>\n    <button class=\"effeckt-modal-button\" data-effeckt-type=\"tada\">Tada</button>\n  </div>\n\n</div>\n"
  },
  {
    "path": "src/templates/pages/off-screen-navs.hbs",
    "content": "<div class=\"effeckt effeckt-demo-modals\">\n\n  <header>\n    <h2>\n      Off Screen Nav\n      <a href=\"off-screen-navs.html\">#</a>\n    </h2>\n    <!-- <span class=\"source\">\n      ...\n    </span> -->\n  </header>\n\n  <div class=\"button-group\">\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-left-overlay\">Left Overlay</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-left-reveal\">Left Reveal</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-left-push\">Left Push</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-left-bounce\" data-effeckt-needs-hide-class=\"true\">Left Bounce</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-left-bounce-out\" data-effeckt-needs-hide-class=\"true\">Left Bounce Out</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-left-squeeze\">Left Squeeze</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-left-rotate\" data-threedee=\"true\">Left Rotate</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-right-overlay\">Right Overlay</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-right-reveal\">Right Reveal</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-right-push\">Right Push</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-right-bounce\" data-effeckt-needs-hide-class=\"true\">Right Bounce</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-right-bounce-out\" data-effeckt-needs-hide-class=\"true\">Right Bounce Out</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-right-squeeze\">Right Squeeze</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-right-rotate\" data-threedee=\"true\">Right Rotate</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-top-overlay\">Top Overlay</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-push-top\">Top Push</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-top-bounce\" data-effeckt-needs-hide-class=\"true\">Top Bounce</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-top-bounce-out\" data-effeckt-needs-hide-class=\"true\">Top Bounce Out</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-top-card-deck\">Top Card Deck</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-top-rotate\" data-threedee=\"true\">Top Rotate</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-bottom-overlay\">Bottom Overlay</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-push-bottom\">Bottom Push</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-bottom-bounce\" data-effeckt-needs-hide-class=\"true\">Bottom Bounce</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-bottom-bounce-out\" data-effeckt-needs-hide-class=\"true\">Bottom Bounce Out</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-bottom-card-deck\">Bottom Card Deck</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-bottom-rotate\" data-threedee=\"true\">Bottom Rotate</button>\n  <button class=\"off-screen-nav-button\" data-effeckt-type=\"effeckt-off-screen-nav-minimize-reaveal\" data-threedee=\"true\" data-effeckt-needs-hide-class=\"true\">Minimize then reveal</button>\n  </div>\n\n</div>\n"
  },
  {
    "path": "src/templates/pages/page-transitions.hbs",
    "content": "<div class=\"effeckt effeckt-demo-modals\">\n\n  <header>\n    <h2>\n      Page Transitions\n      <a href=\"page-transitions.html\">#</a>\n    </h2>\n    <!-- <span class=\"source\">\n      ...\n    </span> -->\n  </header>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"slide-from-left\" data-effeckt-transition-out=\"slide-to-right\" data-effeckt-transition-page=\"page-2\">Slide From Left</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"slide-from-right\" data-effeckt-transition-out=\"slide-to-left\" data-effeckt-transition-page=\"page-3\">Slide From Right</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"slide-from-bottom\" data-effeckt-transition-out=\"slide-to-top\" data-effeckt-transition-page=\"page-4\">Slide From Bottom</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"slide-from-top\" data-effeckt-transition-out=\"slide-to-bottom\" data-effeckt-transition-page=\"page-5\">Slide From Top</button>\n\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"scale-up-from-behind\" data-effeckt-transition-out=\"scale-up-to-front\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Scale Up From Behind</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"scale-down-from-front\" data-effeckt-transition-out=\"scale-down-to-behind\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Scale Down From Front</button>\n\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"scale-down-slide-from-right\" data-effeckt-transition-out=\"scale-down-slide-to-left\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Scale Down Slide From Right</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"scale-down-slide-from-left\" data-effeckt-transition-out=\"scale-down-slide-to-right\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Scale Down Slide From Left</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"scale-down-slide-from-top\" data-effeckt-transition-out=\"scale-down-slide-to-bottom\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Scale Down Slide From Top</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"scale-down-slide-from-bottom\" data-effeckt-transition-out=\"scale-down-slide-to-top\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Scale Down Slide From Bottom</button>\n\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"rotate-to-front\" data-effeckt-transition-out=\"rotate-to-behind\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Rotate to Behind</button>\n\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"flip-to-right-front\" data-effeckt-transition-out=\"flip-to-right-back\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Flip to Right</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"flip-to-left-front\" data-effeckt-transition-out=\"flip-to-left-back\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Flip to Left</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"flip-to-top-front\" data-effeckt-transition-out=\"flip-to-top-back\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Flip to Top</button>\n\n  <button class=\"effeckt-page-transition-button\" data-effeckt-transition-in=\"flip-to-bottom-front\" data-effeckt-transition-out=\"flip-to-bottom-back\" data-effeckt-transition-page=\"page-5\" data-effeckt-needs-perspective=\"true\">Flip to Bottom</button>\n\n</div>\n"
  },
  {
    "path": "src/templates/pages/positional-modals.hbs",
    "content": "<div class=\"effeckt effeckt-demo-positional-modals\">\n\n  <header>\n    <h2>\n      Positional Modals\n      <a href=\"positional-modals.html\">#</a>\n    </h2>\n  </header>\n\n  <div class=\"button-group\">\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"above\" data-effeckt-type=\"from-below\">Above / From Below</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"above\" data-effeckt-type=\"from-above\">Above / From Above</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"above\" data-effeckt-type=\"slide-in-right\">Above / Slide In (right)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"above\" data-effeckt-type=\"slide-in-left\">Above / Slide In (left)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"above\" data-effeckt-type=\"slide-in-top\">Above / Slide In (top)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"above\" data-effeckt-type=\"slide-in-bottom\">Above / Slide In (bottom)</button>\n\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"below\" data-effeckt-type=\"from-below\">Below / From Below</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"below\" data-effeckt-type=\"from-above\">Below / From Above</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"below\" data-effeckt-type=\"slide-in-right\">Below / Slide In (right)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"below\" data-effeckt-type=\"slide-in-left\">Below / Slide In (left)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"below\" data-effeckt-type=\"slide-in-top\">Below / Slide In (top)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"below\" data-effeckt-type=\"slide-in-bottom\">Below / Slide In (bottom)</button>\n\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"right\" data-effeckt-type=\"from-below\">Right / From Below</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"right\" data-effeckt-type=\"from-above\">Right / From Above</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"right\" data-effeckt-type=\"slide-in-right\">Right / Slide In (right)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"right\" data-effeckt-type=\"slide-in-left\">Right / Slide In (left)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"right\" data-effeckt-type=\"slide-in-top\">Right / Slide In (top)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"right\" data-effeckt-type=\"slide-in-bottom\">Right / Slide In (bottom)</button>\n\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"left\" data-effeckt-type=\"from-below\">Left / From Below</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"left\" data-effeckt-type=\"from-above\">Left / From Above</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"left\" data-effeckt-type=\"slide-in-right\">Left / Slide In (right)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"left\" data-effeckt-type=\"slide-in-left\">Left / Slide In (left)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"left\" data-effeckt-type=\"slide-in-top\">Left / Slide In (top)</button>\n    <button class=\"effeckt-positional-modal-button\" data-effeckt-position=\"left\" data-effeckt-type=\"slide-in-bottom\">Left / Slide In (bottom)</button>\n  </div>\n\n</div>\n"
  },
  {
    "path": "src/templates/pages/tabs.hbs",
    "content": "<div class=\"effeckt effeckt-demo-tabs\">\n\n  <header>\n    <h2>\n      Tabs\n      <a href=\"tabs.html\">#</a>\n    </h2>\n    <span class=\"source\">\n      Source:\n      <a href=\"http://git.aaronlumsden.com/tabulous.js/\">\n        Tabulous\n      </a>\n    </span>\n  </header>\n\n  <div class=\"effeckt-tabs-wrap\" data-effeckt-type='scale'>\n    <ul class=\"effeckt-tabs\">\n      <li><a href=\"#tab-1\" class=\"effeckt-tab\">Tab 1</a></li>\n      <li><a href=\"#tab-2\" class=\"effeckt-tab\">Tab 2</a></li>\n      <li><a href=\"#tab-3\" class=\"effeckt-tab\">Tab 3</a></li>\n    </ul>\n    <div class=\"effeckt-tabs-container\">\n      <div id=\"tab-1\" class=\"effeckt-tab-content\">\n        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p>\n\n        <p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>\n      </div>\n      <div id=\"tab-2\" class=\"effeckt-tab-content\">\n        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>\n      </div>\n      <div id=\"tab-3\" class=\"effeckt-tab-content\">\n        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>\n\n        <p>Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"effeckt-tabs-wrap\" data-effeckt-type='scale-up'>\n    <ul class=\"effeckt-tabs\">\n      <li><a href=\"#tab-1\" class=\"effeckt-tab\">Tab 1</a></li>\n      <li><a href=\"#tab-2\" class=\"effeckt-tab\">Tab 2</a></li>\n      <li><a href=\"#tab-3\" class=\"effeckt-tab\">Tab 3</a></li>\n    </ul>\n    <div class=\"effeckt-tabs-container\">\n      <div id=\"tab-1\" class=\"effeckt-tab-content\">\n        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p>\n\n        <p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>\n      </div>\n      <div id=\"tab-2\" class=\"effeckt-tab-content\">\n        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>\n      </div>\n      <div id=\"tab-3\" class=\"effeckt-tab-content\">\n        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>\n\n        <p>Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"effeckt-tabs-wrap\" data-effeckt-type='slide-left'>\n    <ul class=\"effeckt-tabs\">\n      <li><a href=\"#tab-1\" class=\"effeckt-tab\">Tab 1</a></li>\n      <li><a href=\"#tab-2\" class=\"effeckt-tab\">Tab 2</a></li>\n      <li><a href=\"#tab-3\" class=\"effeckt-tab\">Tab 3</a></li>\n    </ul>\n    <div class=\"effeckt-tabs-container\">\n      <div id=\"tab-1\" class=\"effeckt-tab-content\">\n        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p>\n\n        <p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>\n      </div>\n      <div id=\"tab-2\" class=\"effeckt-tab-content\">\n        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>\n      </div>\n      <div id=\"tab-3\" class=\"effeckt-tab-content\">\n        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>\n\n        <p>Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"effeckt-tabs-wrap\" data-effeckt-type='slide-right'>\n    <ul class=\"effeckt-tabs\">\n      <li><a href=\"#tab-1\" class=\"effeckt-tab\">Tab 1</a></li>\n      <li><a href=\"#tab-2\" class=\"effeckt-tab\">Tab 2</a></li>\n      <li><a href=\"#tab-3\" class=\"effeckt-tab\">Tab 3</a></li>\n    </ul>\n    <div class=\"effeckt-tabs-container\">\n      <div id=\"tab-1\" class=\"effeckt-tab-content\">\n        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p>\n\n        <p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>\n      </div>\n      <div id=\"tab-2\" class=\"effeckt-tab-content\">\n        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>\n      </div>\n      <div id=\"tab-3\" class=\"effeckt-tab-content\">\n        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>\n\n        <p>Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"effeckt-tabs-wrap\" data-effeckt-type='slide-up'>\n    <ul class=\"effeckt-tabs\">\n      <li><a href=\"#tab-1\" class=\"effeckt-tab\">Tab 1</a></li>\n      <li><a href=\"#tab-2\" class=\"effeckt-tab\">Tab 2</a></li>\n      <li><a href=\"#tab-3\" class=\"effeckt-tab\">Tab 3</a></li>\n    </ul>\n    <div class=\"effeckt-tabs-container\">\n      <div id=\"tab-1\" class=\"effeckt-tab-content\">\n        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p>\n\n        <p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>\n      </div>\n      <div id=\"tab-2\" class=\"effeckt-tab-content\">\n        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>\n      </div>\n      <div id=\"tab-3\" class=\"effeckt-tab-content\">\n        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>\n\n        <p>Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"effeckt-tabs-wrap\" data-effeckt-type='slide-down'>\n    <ul class=\"effeckt-tabs\">\n      <li><a href=\"#tab-1\" class=\"effeckt-tab\">Tab 1</a></li>\n      <li><a href=\"#tab-2\" class=\"effeckt-tab\">Tab 2</a></li>\n      <li><a href=\"#tab-3\" class=\"effeckt-tab\">Tab 3</a></li>\n    </ul>\n    <div class=\"effeckt-tabs-container\">\n      <div id=\"tab-1\" class=\"effeckt-tab-content\">\n        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p>\n\n        <p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>\n      </div>\n      <div id=\"tab-2\" class=\"effeckt-tab-content\">\n        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>\n      </div>\n      <div id=\"tab-3\" class=\"effeckt-tab-content\">\n        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>\n\n        <p>Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"effeckt-tabs-wrap\" data-effeckt-type='flip'>\n    <ul class=\"effeckt-tabs\">\n      <li><a href=\"#tab-1\" class=\"effeckt-tab\">Tab 1</a></li>\n      <li><a href=\"#tab-2\" class=\"effeckt-tab\">Tab 2</a></li>\n      <li><a href=\"#tab-3\" class=\"effeckt-tab\">Tab 3</a></li>\n    </ul>\n    <div class=\"effeckt-tabs-container\">\n      <div id=\"tab-1\" class=\"effeckt-tab-content\">\n        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p>\n\n        <p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>\n      </div>\n      <div id=\"tab-2\" class=\"effeckt-tab-content\">\n        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>\n      </div>\n      <div id=\"tab-3\" class=\"effeckt-tab-content\">\n        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>\n\n        <p>Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>\n      </div>\n    </div>\n  </div>\n\n</div>"
  },
  {
    "path": "src/templates/pages/tooltips.hbs",
    "content": "<div class=\"effeckt effeckt-demo-tooltips\">\n\n  <header>\n    <h2>\n      Tooltips\n      <a href=\"tooltips.html\">#</a>\n    </h2>\n    <!-- <span class=\"source\">\n      ...\n    </span> -->\n  </header>\n\n  <p>Lorem ipsum <a href=\"#0\" data-effeckt-tooltip-text=\"I appear on top.\" class=\"effeckt-tooltip\" data-effeckt-type=\"bubble\" data-effeckt-position=\"top\">example one</a> dolor sit amet, consectetur adipisicing elit. Unde, dolor, <a href=\"#0\" data-effeckt-tooltip-text=\"I appear on bottom.\" class=\"effeckt-tooltip\" data-effeckt-type=\"bubble\" data-effeckt-position=\"bottom\">example two</a> ipsa, dolorem officia expedita error <a href=\"#0\" data-effeckt-tooltip-text=\"I appear on right.\" class=\"effeckt-tooltip\" data-effeckt-type=\"bubble\" data-effeckt-position=\"right\">example three</a> vel blanditiis tempore molestias voluptatem ducimus porro <a href=\"#0\" data-effeckt-tooltip-text=\"I appear on left.\" class=\"effeckt-tooltip\" data-effeckt-type=\"bubble\" data-effeckt-position=\"left\">example four</a> recusandae quo ex quisquam voluptas iure! Amet, dignissimos.</p>\n\n</div>"
  },
  {
    "path": "src/templates/parts/modal.hbs",
    "content": "  <!-- dialogs first is important for ~ selector -->\n  <div class=\"effeckt-wrap effeckt-modal-wrap\" id=\"effeckt-modal-wrap\"> <!-- for centering transform -->\n    <div class=\"effeckt-content effeckt-modal\" id=\"effeckt-modal\">\n      <h3>Modal Dialog</h3>\n      <div class=\"effeckt-modal-content\">\n        <p>This is a modal window.</p>\n        <button class=\"effeckt-modal-close\">Close me!</button>\n      </div>\n    </div>\n  </div>\n  <!-- overlay coming after is important for ~ selector -->\n  <!-- this is going to be used if there is not javascript involved -->\n  <!-- <div class=\"effeckt-overlay effeckt-modal-overlay\" id=\"effeckt-modal-overlay\"></div> -->\n"
  },
  {
    "path": "src/templates/parts/off-screen-nav-cover.hbs",
    "content": "<div class=\"off-screen-nav-cover\"></div>"
  },
  {
    "path": "src/templates/parts/off-screen-nav.hbs",
    "content": "<nav class=\"effeckt-off-screen-nav\" id=\"effeckt-off-screen-nav\">\n\n  <header>\n    <h4>\n      Navigation\n    </h4>\n    <a href=\"#0\" id=\"effeckt-off-screen-nav-close\" class=\"effeckt-off-screen-nav-close\">×</a>\n  </header>\n\n  <ul>\n    <li><a href=\"#0\">This</a></li>\n    <li><a href=\"#0\">Little</a></li>\n    <li><a href=\"#0\">Piggy</a></li>\n    <li><a href=\"#0\">Went</a></li>\n    <li><a href=\"#0\">To</a></li>\n    <li><a href=\"#0\">Market</a></li>\n  </ul>\n\n</nav>\n"
  },
  {
    "path": "src/templates/parts/page-transition.hbs",
    "content": "<div class=\"effeckt-page-transition\" id=\"effeckt-page-transition\">\n\n    <div class=\"effeckt-page-transition-content\">\n\n      <h2>Page Transition</h2>\n\n      <p>This is another page.</p>\n\n      <button class=\"page-transition-reset-button\">Reset Transition</button>\n\n    </div>\n\n</div>\n"
  }
]