[ { "path": ".github/ISSUE_TEMPLATE/custom.md", "content": "---\nname: Custom issue template\nabout: Describe this issue template's purpose here.\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".github/dependabot.yml", "content": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where the package manifests are located.\n# Please see the documentation for all configuration options:\n# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates\n\nversion: 2\nupdates:\n - package-ecosystem: \"\" # Seee documentation for possible values\n directory: \"/\" # Location of package manifests\n schedule:\n interval: \"daily\"\n" }, { "path": ".github/workflows/codescan.yml", "content": "# This workflow uses actions that are not certified by GitHub.\n# They are provided by a third-party and are governed by\n# separate terms of service, privacy policy, and support\n# documentation.\n\n# This workflow requires that you have an existing account with codescan.io\n# For more information about configuring your workflow,\n# read our documentation at https://github.com/codescan-io/codescan-scanner-action\nname: CodeScan\n\non:\n push:\n branches: [ main ]\n pull_request:\n # The branches below must be a subset of the branches above\n branches: [ main ]\n schedule:\n - cron: '34 14 * * 1'\n\njobs:\n CodeScan:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout repository\n uses: actions/checkout@v2\n - name: Cache files\n uses: actions/cache@v2\n with:\n path: |\n ~/.sonar\n key: ${{ runner.os }}-sonar\n restore-keys: ${{ runner.os }}-sonar\n - name: Run Analysis\n uses: codescan-io/codescan-scanner-action@5b2e8c5683ef6a5adc8fa3b7950bb07debccce12\n with:\n login: ${{ secrets.CODESCAN_AUTH_TOKEN }}\n organization: ${{ secrets.CODESCAN_ORGANIZATION_KEY }}\n projectKey: ${{ secrets.CODESCAN_PROJECT_KEY }}\n - name: Upload SARIF file\n uses: github/codeql-action/upload-sarif@v1\n with:\n sarif_file: codescan.sarif\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n* Demonstrating empathy and kindness toward other people\n* Being respectful of differing opinions, viewpoints, and experiences\n* Giving and gracefully accepting constructive feedback\n* Accepting responsibility and apologizing to those affected by our mistakes,\n and learning from the experience\n* Focusing on what is best not just for us as individuals, but for the\n overall community\n\nExamples of unacceptable behavior include:\n\n* The use of sexualized language or imagery, and sexual attention or\n advances of any kind\n* Trolling, insulting or derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or email\n address, without their explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nmian41935@gmail.com.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n" }, { "path": "CONTRIBUTING.md", "content": "#CONTRIBUTING\n" }, { "path": "LEARN.md", "content": "# Gym Fitness Website\n\nFitness website to be linked with a fitness app. Started as a school project.\n\n## Technologies Used:\n\n* HTML5\n* CSS3\n* JavaScript\n\n## `Silent Features`:\n\n* Responsive Design.\n* Portfolio Template.\n* Unique and Dynamic Design.\n* Contains HOME, ABOUT, SERVICES, CLASSES, SCHEDULE ,PRICE and many other sections.\n\n\n[`Click the Demo Button and View Live Project`](https://mian-ali.github.io/GymWebsite/)\n\n\n## `Project Live Url`:\n\n(https://mian-ali.github.io/GymWebsite/)\n" }, { "path": "LICENCE.md", "content": "MIT License\n\nCopyright (c) 2021 Ali Ahmad\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 all\ncopies 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 THE\nSOFTWARE .\n" }, { "path": "README.md", "content": "## Gym Fitness Website\n\nThis repository contains the source code for a gym website, implemented as a single page application (SPA) using HTML, CSS, and JavaScript.\n\n## Technologies Used:\n\n* HTML5\n* CSS3\n* JavaScript\n\n### Silent Features :\n\n* Responsive Design.\n* Portfolio Template.\n* Unique and Dynamic Design.\n* Contains HOME, ABOUT, SERVICES, CLASSES, SCHEDULE ,PRICE and many other sections.\n\n### Installation\nTo run the gym website locally as a single page application, follow these steps:\n- Clone this repository: git clone `https://github.com/mian-ali/GymWebsite.git`\n- Navigate to the project directory: cd GymWebsite\n- Open the index.html file in your web browser.\n\n### Usage\nOnce the website is running, the sections will be prominently displayed at the top of the page. Users can engage with these section by:\n- Reading the compelling headline and understanding the main message or value proposition of the gym.\n- Watching an engaging video or viewing an attractive image that showcases the gym's atmosphere and facilities.\n- Clicking on the call-to-action buttons to perform desired actions, such as exploring classes, signing up for a membership, or contacting the gym.\n- Scrolling down to discover more content on the website.\nThe single page application design ensures a seamless and interactive user experience by dynamically loading content without page refreshes, enhancing navigation and responsiveness.\n\n### Customization\n\nYou can customize the hero section to match your gym's branding and messaging. Here are some key files and components you might want to modify:\n\n- `index.html`: Update the hero heading, video/image, and call-to-action buttons.\n- `style.css`: Modify the styles for the hero section, such as background colors, typography, button styles, and scroll down indicator.\nFeel free to customize the code and design to align with your gym's unique identity and goals.\n\n### Contributing\n\nIf you find any issues with the website or have suggestions for improvement, please feel free to submit a pull request or open an issue in this repository. Your contributions are welcome!\n\n### License\n\nThis gym website is available under the [MIT License](https://github.com/mian-ali/GymWebsite/blob/main/LICENCE.md).\n\n### Project Live URI: [Live Demo](https://mian-ali.github.io/GymWebsite/)\n\n## ScreenShoot\n\n#### Main Hero Section\n\n![1](https://github.com/mian-ali/GymWebsite/assets/69896600/5e2c2841-74be-4a66-8739-c98899af2afd)\n\n#### Training Guideline Section\n\n![2](https://github.com/mian-ali/GymWebsite/assets/69896600/0b3abfe7-2c48-46af-a417-389693856be0)\n\n#### FAQ Section\n\n![3](https://github.com/mian-ali/GymWebsite/assets/69896600/b7f4fc8a-65f3-4b82-ad00-d8820a7aacfc)\n\n#### Our Classess Section\n\n![4](https://github.com/mian-ali/GymWebsite/assets/69896600/9be68bfd-9a43-46f4-9d5c-9d919e786c81)\n\n#### Classes Scdedule Section\n\n![6](https://github.com/mian-ali/GymWebsite/assets/69896600/a52126e1-a797-49c2-b5c2-12b4c4afa92a)\n\n#### Gallery Section\n\n![7](https://github.com/mian-ali/GymWebsite/assets/69896600/c3086038-1719-4b4c-b189-7381e14aaadc)\n\n#### Pricing Section\n\n![8](https://github.com/mian-ali/GymWebsite/assets/69896600/ecd59833-e250-43b8-b7b0-5155fbefc5d4)\n\n#### Footer Section\n\n![9](https://github.com/mian-ali/GymWebsite/assets/69896600/8c6854fe-03fb-4b9a-9987-9d7e95d36647)\n\n" }, { "path": "css/animate.css", "content": "@charset \"UTF-8\";\n\n\n/*!\nAnimate.css - http://daneden.me/animate\nLicensed under the MIT license\n\nCopyright (c) 2013 Daniel Eden\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n*/\n\n.animated {\n -webkit-animation-duration: 1s;\n animation-duration: 1s;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n}\n\n.animated.hinge {\n -webkit-animation-duration: 2s;\n animation-duration: 2s;\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.bounce {\n -webkit-animation-name: bounce;\n animation-name: bounce;\n}\n\n@-webkit-keyframes flash {\n 0%, 50%, 100% {\n opacity: 1;\n }\n\n 25%, 75% {\n opacity: 0;\n }\n}\n\n@keyframes flash {\n 0%, 50%, 100% {\n opacity: 1;\n }\n\n 25%, 75% {\n opacity: 0;\n }\n}\n\n.flash {\n -webkit-animation-name: flash;\n animation-name: flash;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\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.pulse {\n -webkit-animation-name: pulse;\n animation-name: pulse;\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.shake {\n -webkit-animation-name: shake;\n animation-name: shake;\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.swing {\n -webkit-transform-origin: top center;\n -ms-transform-origin: top center;\n transform-origin: top center;\n -webkit-animation-name: swing;\n animation-name: swing;\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}\n\n.tada {\n -webkit-animation-name: tada;\n animation-name: tada;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\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.wobble {\n -webkit-animation-name: wobble;\n animation-name: wobble;\n}\n\n@-webkit-keyframes bounceIn {\n 0% {\n opacity: 0;\n -webkit-transform: scale(.3);\n transform: scale(.3);\n }\n\n 50% {\n opacity: 1;\n -webkit-transform: scale(1.05);\n transform: scale(1.05);\n }\n\n 70% {\n -webkit-transform: scale(.9);\n transform: scale(.9);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes bounceIn {\n 0% {\n opacity: 0;\n -webkit-transform: scale(.3);\n -ms-transform: scale(.3);\n transform: scale(.3);\n }\n\n 50% {\n opacity: 1;\n -webkit-transform: scale(1.05);\n -ms-transform: scale(1.05);\n transform: scale(1.05);\n }\n\n 70% {\n -webkit-transform: scale(.9);\n -ms-transform: scale(.9);\n transform: scale(.9);\n }\n\n 100% {\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n }\n}\n\n.bounceIn {\n -webkit-animation-name: bounceIn;\n animation-name: bounceIn;\n}\n\n@-webkit-keyframes bounceInDown {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translateY(30px);\n transform: translateY(30px);\n }\n\n 80% {\n -webkit-transform: translateY(-10px);\n transform: translateY(-10px);\n }\n\n 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n@keyframes bounceInDown {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n -ms-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translateY(30px);\n -ms-transform: translateY(30px);\n transform: translateY(30px);\n }\n\n 80% {\n -webkit-transform: translateY(-10px);\n -ms-transform: translateY(-10px);\n transform: translateY(-10px);\n }\n\n 100% {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n.bounceInDown {\n -webkit-animation-name: bounceInDown;\n animation-name: bounceInDown;\n}\n\n@-webkit-keyframes bounceInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translateX(30px);\n transform: translateX(30px);\n }\n\n 80% {\n -webkit-transform: translateX(-10px);\n transform: translateX(-10px);\n }\n\n 100% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes bounceInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n -ms-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translateX(30px);\n -ms-transform: translateX(30px);\n transform: translateX(30px);\n }\n\n 80% {\n -webkit-transform: translateX(-10px);\n -ms-transform: translateX(-10px);\n transform: translateX(-10px);\n }\n\n 100% {\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.bounceInLeft {\n -webkit-animation-name: bounceInLeft;\n animation-name: bounceInLeft;\n}\n\n@-webkit-keyframes bounceInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translateX(-30px);\n transform: translateX(-30px);\n }\n\n 80% {\n -webkit-transform: translateX(10px);\n transform: translateX(10px);\n }\n\n 100% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes bounceInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n -ms-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translateX(-30px);\n -ms-transform: translateX(-30px);\n transform: translateX(-30px);\n }\n\n 80% {\n -webkit-transform: translateX(10px);\n -ms-transform: translateX(10px);\n transform: translateX(10px);\n }\n\n 100% {\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.bounceInRight {\n -webkit-animation-name: bounceInRight;\n animation-name: bounceInRight;\n}\n\n@-webkit-keyframes bounceInUp {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(2000px);\n transform: translateY(2000px);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px);\n }\n\n 80% {\n -webkit-transform: translateY(10px);\n transform: translateY(10px);\n }\n\n 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n@keyframes bounceInUp {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(2000px);\n -ms-transform: translateY(2000px);\n transform: translateY(2000px);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translateY(-30px);\n -ms-transform: translateY(-30px);\n transform: translateY(-30px);\n }\n\n 80% {\n -webkit-transform: translateY(10px);\n -ms-transform: translateY(10px);\n transform: translateY(10px);\n }\n\n 100% {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n.bounceInUp {\n -webkit-animation-name: bounceInUp;\n animation-name: bounceInUp;\n}\n\n@-webkit-keyframes bounceOut {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 25% {\n -webkit-transform: scale(.95);\n transform: scale(.95);\n }\n\n 50% {\n opacity: 1;\n -webkit-transform: scale(1.1);\n transform: scale(1.1);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: scale(.3);\n transform: scale(.3);\n }\n}\n\n@keyframes bounceOut {\n 0% {\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n }\n\n 25% {\n -webkit-transform: scale(.95);\n -ms-transform: scale(.95);\n transform: scale(.95);\n }\n\n 50% {\n opacity: 1;\n -webkit-transform: scale(1.1);\n -ms-transform: scale(1.1);\n transform: scale(1.1);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: scale(.3);\n -ms-transform: scale(.3);\n transform: scale(.3);\n }\n}\n\n.bounceOut {\n -webkit-animation-name: bounceOut;\n animation-name: bounceOut;\n}\n\n@-webkit-keyframes bounceOutDown {\n 0% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 20% {\n opacity: 1;\n -webkit-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(2000px);\n transform: translateY(2000px);\n }\n}\n\n@keyframes bounceOutDown {\n 0% {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n\n 20% {\n opacity: 1;\n -webkit-transform: translateY(-20px);\n -ms-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(2000px);\n -ms-transform: translateY(2000px);\n transform: translateY(2000px);\n }\n}\n\n.bounceOutDown {\n -webkit-animation-name: bounceOutDown;\n animation-name: bounceOutDown;\n}\n\n@-webkit-keyframes bounceOutLeft {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 20% {\n opacity: 1;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n}\n\n@keyframes bounceOutLeft {\n 0% {\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n\n 20% {\n opacity: 1;\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n -ms-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n}\n\n.bounceOutLeft {\n -webkit-animation-name: bounceOutLeft;\n animation-name: bounceOutLeft;\n}\n\n@-webkit-keyframes bounceOutRight {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 20% {\n opacity: 1;\n -webkit-transform: translateX(-20px);\n transform: translateX(-20px);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n}\n\n@keyframes bounceOutRight {\n 0% {\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n\n 20% {\n opacity: 1;\n -webkit-transform: translateX(-20px);\n -ms-transform: translateX(-20px);\n transform: translateX(-20px);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n -ms-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n}\n\n.bounceOutRight {\n -webkit-animation-name: bounceOutRight;\n animation-name: bounceOutRight;\n}\n\n@-webkit-keyframes bounceOutUp {\n 0% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 20% {\n opacity: 1;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n}\n\n@keyframes bounceOutUp {\n 0% {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n\n 20% {\n opacity: 1;\n -webkit-transform: translateY(20px);\n -ms-transform: translateY(20px);\n transform: translateY(20px);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n -ms-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n}\n\n.bounceOutUp {\n -webkit-animation-name: bounceOutUp;\n animation-name: bounceOutUp;\n}\n\n@-webkit-keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.fadeIn {\n -webkit-animation-name: fadeIn;\n animation-name: fadeIn;\n}\n\n@-webkit-keyframes fadeInDown {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n@keyframes fadeInDown {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n -ms-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n.fadeInDown {\n -webkit-animation-name: fadeInDown;\n animation-name: fadeInDown;\n}\n\n@-webkit-keyframes fadeInDownBig {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n@keyframes fadeInDownBig {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n -ms-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n.fadeInDownBig {\n -webkit-animation-name: fadeInDownBig;\n animation-name: fadeInDownBig;\n}\n\n@-webkit-keyframes fadeInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-20px);\n transform: translateX(-20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes fadeInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-20px);\n -ms-transform: translateX(-20px);\n transform: translateX(-20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.fadeInLeft {\n -webkit-animation-name: fadeInLeft;\n animation-name: fadeInLeft;\n}\n\n@-webkit-keyframes fadeInLeftBig {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes fadeInLeftBig {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n -ms-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.fadeInLeftBig {\n -webkit-animation-name: fadeInLeftBig;\n animation-name: fadeInLeftBig;\n}\n\n@-webkit-keyframes fadeInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes fadeInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.fadeInRight {\n -webkit-animation-name: fadeInRight;\n animation-name: fadeInRight;\n}\n\n@-webkit-keyframes fadeInRightBig {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes fadeInRightBig {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n -ms-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.fadeInRightBig {\n -webkit-animation-name: fadeInRightBig;\n animation-name: fadeInRightBig;\n}\n\n@-webkit-keyframes fadeInUp {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n@keyframes fadeInUp {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n -ms-transform: translateY(20px);\n transform: translateY(20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n.fadeInUp {\n -webkit-animation-name: fadeInUp;\n animation-name: fadeInUp;\n}\n\n@-webkit-keyframes fadeInUpBig {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(2000px);\n transform: translateY(2000px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n@keyframes fadeInUpBig {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(2000px);\n -ms-transform: translateY(2000px);\n transform: translateY(2000px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n.fadeInUpBig {\n -webkit-animation-name: fadeInUpBig;\n animation-name: fadeInUpBig;\n}\n\n@-webkit-keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n.fadeOut {\n -webkit-animation-name: fadeOut;\n animation-name: fadeOut;\n}\n\n@-webkit-keyframes fadeOutDown {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n }\n}\n\n@keyframes fadeOutDown {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n -ms-transform: translateY(20px);\n transform: translateY(20px);\n }\n}\n\n.fadeOutDown {\n -webkit-animation-name: fadeOutDown;\n animation-name: fadeOutDown;\n}\n\n@-webkit-keyframes fadeOutDownBig {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(2000px);\n transform: translateY(2000px);\n }\n}\n\n@keyframes fadeOutDownBig {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(2000px);\n -ms-transform: translateY(2000px);\n transform: translateY(2000px);\n }\n}\n\n.fadeOutDownBig {\n -webkit-animation-name: fadeOutDownBig;\n animation-name: fadeOutDownBig;\n}\n\n@-webkit-keyframes fadeOutLeft {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-20px);\n transform: translateX(-20px);\n }\n}\n\n@keyframes fadeOutLeft {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-20px);\n -ms-transform: translateX(-20px);\n transform: translateX(-20px);\n }\n}\n\n.fadeOutLeft {\n -webkit-animation-name: fadeOutLeft;\n animation-name: fadeOutLeft;\n}\n\n@-webkit-keyframes fadeOutLeftBig {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n}\n\n@keyframes fadeOutLeftBig {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n -ms-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n}\n\n.fadeOutLeftBig {\n -webkit-animation-name: fadeOutLeftBig;\n animation-name: fadeOutLeftBig;\n}\n\n@-webkit-keyframes fadeOutRight {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n }\n}\n\n@keyframes fadeOutRight {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n}\n\n.fadeOutRight {\n -webkit-animation-name: fadeOutRight;\n animation-name: fadeOutRight;\n}\n\n@-webkit-keyframes fadeOutRightBig {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n}\n\n@keyframes fadeOutRightBig {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n -ms-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n}\n\n.fadeOutRightBig {\n -webkit-animation-name: fadeOutRightBig;\n animation-name: fadeOutRightBig;\n}\n\n@-webkit-keyframes fadeOutUp {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n}\n\n@keyframes fadeOutUp {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n -ms-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n}\n\n.fadeOutUp {\n -webkit-animation-name: fadeOutUp;\n animation-name: fadeOutUp;\n}\n\n@-webkit-keyframes fadeOutUpBig {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n}\n\n@keyframes fadeOutUpBig {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n -ms-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n}\n\n.fadeOutUpBig {\n -webkit-animation-name: fadeOutUpBig;\n animation-name: fadeOutUpBig;\n}\n\n@-webkit-keyframes flip {\n 0% {\n -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);\n transform: perspective(400px) translateZ(0) rotateY(0) scale(1);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 40% {\n -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);\n transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 50% {\n -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);\n transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 80% {\n -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);\n transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 100% {\n -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);\n transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n}\n\n@keyframes flip {\n 0% {\n -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);\n -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);\n transform: perspective(400px) translateZ(0) rotateY(0) scale(1);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 40% {\n -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);\n -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);\n transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 50% {\n -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);\n -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);\n transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 80% {\n -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);\n -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);\n transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 100% {\n -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);\n -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);\n transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n}\n\n.animated.flip {\n -webkit-backface-visibility: visible;\n -ms-backface-visibility: visible;\n backface-visibility: visible;\n -webkit-animation-name: flip;\n animation-name: flip;\n}\n\n@-webkit-keyframes flipInX {\n 0% {\n -webkit-transform: perspective(400px) rotateX(90deg);\n transform: perspective(400px) rotateX(90deg);\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotateX(-10deg);\n transform: perspective(400px) rotateX(-10deg);\n }\n\n 70% {\n -webkit-transform: perspective(400px) rotateX(10deg);\n transform: perspective(400px) rotateX(10deg);\n }\n\n 100% {\n -webkit-transform: perspective(400px) rotateX(0deg);\n transform: perspective(400px) rotateX(0deg);\n opacity: 1;\n }\n}\n\n@keyframes flipInX {\n 0% {\n -webkit-transform: perspective(400px) rotateX(90deg);\n -ms-transform: perspective(400px) rotateX(90deg);\n transform: perspective(400px) rotateX(90deg);\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotateX(-10deg);\n -ms-transform: perspective(400px) rotateX(-10deg);\n transform: perspective(400px) rotateX(-10deg);\n }\n\n 70% {\n -webkit-transform: perspective(400px) rotateX(10deg);\n -ms-transform: perspective(400px) rotateX(10deg);\n transform: perspective(400px) rotateX(10deg);\n }\n\n 100% {\n -webkit-transform: perspective(400px) rotateX(0deg);\n -ms-transform: perspective(400px) rotateX(0deg);\n transform: perspective(400px) rotateX(0deg);\n opacity: 1;\n }\n}\n\n.flipInX {\n -webkit-backface-visibility: visible !important;\n -ms-backface-visibility: visible !important;\n backface-visibility: visible !important;\n -webkit-animation-name: flipInX;\n animation-name: flipInX;\n}\n\n@-webkit-keyframes flipInY {\n 0% {\n -webkit-transform: perspective(400px) rotateY(90deg);\n transform: perspective(400px) rotateY(90deg);\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotateY(-10deg);\n transform: perspective(400px) rotateY(-10deg);\n }\n\n 70% {\n -webkit-transform: perspective(400px) rotateY(10deg);\n transform: perspective(400px) rotateY(10deg);\n }\n\n 100% {\n -webkit-transform: perspective(400px) rotateY(0deg);\n transform: perspective(400px) rotateY(0deg);\n opacity: 1;\n }\n}\n\n@keyframes flipInY {\n 0% {\n -webkit-transform: perspective(400px) rotateY(90deg);\n -ms-transform: perspective(400px) rotateY(90deg);\n transform: perspective(400px) rotateY(90deg);\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotateY(-10deg);\n -ms-transform: perspective(400px) rotateY(-10deg);\n transform: perspective(400px) rotateY(-10deg);\n }\n\n 70% {\n -webkit-transform: perspective(400px) rotateY(10deg);\n -ms-transform: perspective(400px) rotateY(10deg);\n transform: perspective(400px) rotateY(10deg);\n }\n\n 100% {\n -webkit-transform: perspective(400px) rotateY(0deg);\n -ms-transform: perspective(400px) rotateY(0deg);\n transform: perspective(400px) rotateY(0deg);\n opacity: 1;\n }\n}\n\n.flipInY {\n -webkit-backface-visibility: visible !important;\n -ms-backface-visibility: visible !important;\n backface-visibility: visible !important;\n -webkit-animation-name: flipInY;\n animation-name: flipInY;\n}\n\n@-webkit-keyframes flipOutX {\n 0% {\n -webkit-transform: perspective(400px) rotateX(0deg);\n transform: perspective(400px) rotateX(0deg);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: perspective(400px) rotateX(90deg);\n transform: perspective(400px) rotateX(90deg);\n opacity: 0;\n }\n}\n\n@keyframes flipOutX {\n 0% {\n -webkit-transform: perspective(400px) rotateX(0deg);\n -ms-transform: perspective(400px) rotateX(0deg);\n transform: perspective(400px) rotateX(0deg);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: perspective(400px) rotateX(90deg);\n -ms-transform: perspective(400px) rotateX(90deg);\n transform: perspective(400px) rotateX(90deg);\n opacity: 0;\n }\n}\n\n.flipOutX {\n -webkit-animation-name: flipOutX;\n animation-name: flipOutX;\n -webkit-backface-visibility: visible !important;\n -ms-backface-visibility: visible !important;\n backface-visibility: visible !important;\n}\n\n@-webkit-keyframes flipOutY {\n 0% {\n -webkit-transform: perspective(400px) rotateY(0deg);\n transform: perspective(400px) rotateY(0deg);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: perspective(400px) rotateY(90deg);\n transform: perspective(400px) rotateY(90deg);\n opacity: 0;\n }\n}\n\n@keyframes flipOutY {\n 0% {\n -webkit-transform: perspective(400px) rotateY(0deg);\n -ms-transform: perspective(400px) rotateY(0deg);\n transform: perspective(400px) rotateY(0deg);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: perspective(400px) rotateY(90deg);\n -ms-transform: perspective(400px) rotateY(90deg);\n transform: perspective(400px) rotateY(90deg);\n opacity: 0;\n }\n}\n\n.flipOutY {\n -webkit-backface-visibility: visible !important;\n -ms-backface-visibility: visible !important;\n backface-visibility: visible !important;\n -webkit-animation-name: flipOutY;\n animation-name: flipOutY;\n}\n\n@-webkit-keyframes lightSpeedIn {\n 0% {\n -webkit-transform: translateX(100%) skewX(-30deg);\n transform: translateX(100%) skewX(-30deg);\n opacity: 0;\n }\n\n 60% {\n -webkit-transform: translateX(-20%) skewX(30deg);\n transform: translateX(-20%) skewX(30deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: translateX(0%) skewX(-15deg);\n transform: translateX(0%) skewX(-15deg);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: translateX(0%) skewX(0deg);\n transform: translateX(0%) skewX(0deg);\n opacity: 1;\n }\n}\n\n@keyframes lightSpeedIn {\n 0% {\n -webkit-transform: translateX(100%) skewX(-30deg);\n -ms-transform: translateX(100%) skewX(-30deg);\n transform: translateX(100%) skewX(-30deg);\n opacity: 0;\n }\n\n 60% {\n -webkit-transform: translateX(-20%) skewX(30deg);\n -ms-transform: translateX(-20%) skewX(30deg);\n transform: translateX(-20%) skewX(30deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: translateX(0%) skewX(-15deg);\n -ms-transform: translateX(0%) skewX(-15deg);\n transform: translateX(0%) skewX(-15deg);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: translateX(0%) skewX(0deg);\n -ms-transform: translateX(0%) skewX(0deg);\n transform: translateX(0%) skewX(0deg);\n opacity: 1;\n }\n}\n\n.lightSpeedIn {\n -webkit-animation-name: lightSpeedIn;\n animation-name: lightSpeedIn;\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n}\n\n@-webkit-keyframes lightSpeedOut {\n 0% {\n -webkit-transform: translateX(0%) skewX(0deg);\n transform: translateX(0%) skewX(0deg);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: translateX(100%) skewX(-30deg);\n transform: translateX(100%) skewX(-30deg);\n opacity: 0;\n }\n}\n\n@keyframes lightSpeedOut {\n 0% {\n -webkit-transform: translateX(0%) skewX(0deg);\n -ms-transform: translateX(0%) skewX(0deg);\n transform: translateX(0%) skewX(0deg);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: translateX(100%) skewX(-30deg);\n -ms-transform: translateX(100%) skewX(-30deg);\n transform: translateX(100%) skewX(-30deg);\n opacity: 0;\n }\n}\n\n.lightSpeedOut {\n -webkit-animation-name: lightSpeedOut;\n animation-name: lightSpeedOut;\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n}\n\n@-webkit-keyframes rotateIn {\n 0% {\n -webkit-transform-origin: center center;\n transform-origin: center center;\n -webkit-transform: rotate(-200deg);\n transform: rotate(-200deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: center center;\n transform-origin: center center;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n@keyframes rotateIn {\n 0% {\n -webkit-transform-origin: center center;\n -ms-transform-origin: center center;\n transform-origin: center center;\n -webkit-transform: rotate(-200deg);\n -ms-transform: rotate(-200deg);\n transform: rotate(-200deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: center center;\n -ms-transform-origin: center center;\n transform-origin: center center;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n.rotateIn {\n -webkit-animation-name: rotateIn;\n animation-name: rotateIn;\n}\n\n@-webkit-keyframes rotateInDownLeft {\n 0% {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(-90deg);\n transform: rotate(-90deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n@keyframes rotateInDownLeft {\n 0% {\n -webkit-transform-origin: left bottom;\n -ms-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(-90deg);\n -ms-transform: rotate(-90deg);\n transform: rotate(-90deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: left bottom;\n -ms-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n.rotateInDownLeft {\n -webkit-animation-name: rotateInDownLeft;\n animation-name: rotateInDownLeft;\n}\n\n@-webkit-keyframes rotateInDownRight {\n 0% {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n@keyframes rotateInDownRight {\n 0% {\n -webkit-transform-origin: right bottom;\n -ms-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: right bottom;\n -ms-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n.rotateInDownRight {\n -webkit-animation-name: rotateInDownRight;\n animation-name: rotateInDownRight;\n}\n\n@-webkit-keyframes rotateInUpLeft {\n 0% {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n@keyframes rotateInUpLeft {\n 0% {\n -webkit-transform-origin: left bottom;\n -ms-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: left bottom;\n -ms-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n.rotateInUpLeft {\n -webkit-animation-name: rotateInUpLeft;\n animation-name: rotateInUpLeft;\n}\n\n@-webkit-keyframes rotateInUpRight {\n 0% {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(-90deg);\n transform: rotate(-90deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n@keyframes rotateInUpRight {\n 0% {\n -webkit-transform-origin: right bottom;\n -ms-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(-90deg);\n -ms-transform: rotate(-90deg);\n transform: rotate(-90deg);\n opacity: 0;\n }\n\n 100% {\n -webkit-transform-origin: right bottom;\n -ms-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n}\n\n.rotateInUpRight {\n -webkit-animation-name: rotateInUpRight;\n animation-name: rotateInUpRight;\n}\n\n@-webkit-keyframes rotateOut {\n 0% {\n -webkit-transform-origin: center center;\n transform-origin: center center;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: center center;\n transform-origin: center center;\n -webkit-transform: rotate(200deg);\n transform: rotate(200deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOut {\n 0% {\n -webkit-transform-origin: center center;\n -ms-transform-origin: center center;\n transform-origin: center center;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: center center;\n -ms-transform-origin: center center;\n transform-origin: center center;\n -webkit-transform: rotate(200deg);\n -ms-transform: rotate(200deg);\n transform: rotate(200deg);\n opacity: 0;\n }\n}\n\n.rotateOut {\n -webkit-animation-name: rotateOut;\n animation-name: rotateOut;\n}\n\n@-webkit-keyframes rotateOutDownLeft {\n 0% {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutDownLeft {\n 0% {\n -webkit-transform-origin: left bottom;\n -ms-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: left bottom;\n -ms-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n opacity: 0;\n }\n}\n\n.rotateOutDownLeft {\n -webkit-animation-name: rotateOutDownLeft;\n animation-name: rotateOutDownLeft;\n}\n\n@-webkit-keyframes rotateOutDownRight {\n 0% {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(-90deg);\n transform: rotate(-90deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutDownRight {\n 0% {\n -webkit-transform-origin: right bottom;\n -ms-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: right bottom;\n -ms-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(-90deg);\n -ms-transform: rotate(-90deg);\n transform: rotate(-90deg);\n opacity: 0;\n }\n}\n\n.rotateOutDownRight {\n -webkit-animation-name: rotateOutDownRight;\n animation-name: rotateOutDownRight;\n}\n\n@-webkit-keyframes rotateOutUpLeft {\n 0% {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(-90deg);\n transform: rotate(-90deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutUpLeft {\n 0% {\n -webkit-transform-origin: left bottom;\n -ms-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: left bottom;\n -ms-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate(-90deg);\n -ms-transform: rotate(-90deg);\n transform: rotate(-90deg);\n opacity: 0;\n }\n}\n\n.rotateOutUpLeft {\n -webkit-animation-name: rotateOutUpLeft;\n animation-name: rotateOutUpLeft;\n}\n\n@-webkit-keyframes rotateOutUpRight {\n 0% {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutUpRight {\n 0% {\n -webkit-transform-origin: right bottom;\n -ms-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform-origin: right bottom;\n -ms-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n opacity: 0;\n }\n}\n\n.rotateOutUpRight {\n -webkit-animation-name: rotateOutUpRight;\n animation-name: rotateOutUpRight;\n}\n\n@-webkit-keyframes slideInDown {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n\n 100% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n@keyframes slideInDown {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n -ms-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n\n 100% {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n.slideInDown {\n -webkit-animation-name: slideInDown;\n animation-name: slideInDown;\n}\n\n@-webkit-keyframes slideInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n\n 100% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes slideInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n -ms-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n\n 100% {\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.slideInLeft {\n -webkit-animation-name: slideInLeft;\n animation-name: slideInLeft;\n}\n\n@-webkit-keyframes slideInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n\n 100% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes slideInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n -ms-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n\n 100% {\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.slideInRight {\n -webkit-animation-name: slideInRight;\n animation-name: slideInRight;\n}\n\n@-webkit-keyframes slideOutLeft {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n}\n\n@keyframes slideOutLeft {\n 0% {\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-2000px);\n -ms-transform: translateX(-2000px);\n transform: translateX(-2000px);\n }\n}\n\n.slideOutLeft {\n -webkit-animation-name: slideOutLeft;\n animation-name: slideOutLeft;\n}\n\n@-webkit-keyframes slideOutRight {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n}\n\n@keyframes slideOutRight {\n 0% {\n -webkit-transform: translateX(0);\n -ms-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(2000px);\n -ms-transform: translateX(2000px);\n transform: translateX(2000px);\n }\n}\n\n.slideOutRight {\n -webkit-animation-name: slideOutRight;\n animation-name: slideOutRight;\n}\n\n@-webkit-keyframes slideOutUp {\n 0% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n}\n\n@keyframes slideOutUp {\n 0% {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-2000px);\n -ms-transform: translateY(-2000px);\n transform: translateY(-2000px);\n }\n}\n\n.slideOutUp {\n -webkit-animation-name: slideOutUp;\n animation-name: slideOutUp;\n}\n\n@-webkit-keyframes hinge {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 20%, 60% {\n -webkit-transform: rotate(80deg);\n transform: rotate(80deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 40% {\n -webkit-transform: rotate(60deg);\n transform: rotate(60deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 80% {\n -webkit-transform: rotate(60deg) translateY(0);\n transform: rotate(60deg) translateY(0);\n opacity: 1;\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 100% {\n -webkit-transform: translateY(700px);\n transform: translateY(700px);\n opacity: 0;\n }\n}\n\n@keyframes hinge {\n 0% {\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n -webkit-transform-origin: top left;\n -ms-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 20%, 60% {\n -webkit-transform: rotate(80deg);\n -ms-transform: rotate(80deg);\n transform: rotate(80deg);\n -webkit-transform-origin: top left;\n -ms-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 40% {\n -webkit-transform: rotate(60deg);\n -ms-transform: rotate(60deg);\n transform: rotate(60deg);\n -webkit-transform-origin: top left;\n -ms-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 80% {\n -webkit-transform: rotate(60deg) translateY(0);\n -ms-transform: rotate(60deg) translateY(0);\n transform: rotate(60deg) translateY(0);\n opacity: 1;\n -webkit-transform-origin: top left;\n -ms-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 100% {\n -webkit-transform: translateY(700px);\n -ms-transform: translateY(700px);\n transform: translateY(700px);\n opacity: 0;\n }\n}\n\n.hinge {\n -webkit-animation-name: hinge;\n animation-name: hinge;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes rollIn {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-100%) rotate(-120deg);\n transform: translateX(-100%) rotate(-120deg);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0px) rotate(0deg);\n transform: translateX(0px) rotate(0deg);\n }\n}\n\n@keyframes rollIn {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-100%) rotate(-120deg);\n -ms-transform: translateX(-100%) rotate(-120deg);\n transform: translateX(-100%) rotate(-120deg);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0px) rotate(0deg);\n -ms-transform: translateX(0px) rotate(0deg);\n transform: translateX(0px) rotate(0deg);\n }\n}\n\n.rollIn {\n -webkit-animation-name: rollIn;\n animation-name: rollIn;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes rollOut {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0px) rotate(0deg);\n transform: translateX(0px) rotate(0deg);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(100%) rotate(120deg);\n transform: translateX(100%) rotate(120deg);\n }\n}\n\n@keyframes rollOut {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0px) rotate(0deg);\n -ms-transform: translateX(0px) rotate(0deg);\n transform: translateX(0px) rotate(0deg);\n }\n\n 100% {\n opacity: 0;\n -webkit-transform: translateX(100%) rotate(120deg);\n -ms-transform: translateX(100%) rotate(120deg);\n transform: translateX(100%) rotate(120deg);\n }\n}\n\n.rollOut {\n -webkit-animation-name: rollOut;\n animation-name: rollOut;\n}\n" }, { "path": "css/style.css", "content": "@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');\r\n@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');\r\n@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');\r\n\r\nbody{\r\n\tmargin:0;\r\n\tpadding:0;\r\n\toverflow-x: hidden;\r\n}\r\n\r\n*{\r\n\tbox-sizing: border-box;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\tfont-family: 'Oswald', sans-serif;\r\n}\r\n\r\n/*Header*/\r\n\r\nheader{\r\n\tposition:fixed;\r\n\tleft: 0px;\r\n\ttop:0px;\r\n\twidth: 100%;\r\n\tz-index: 10;\r\n\tbackground-color: #000000;\r\n\tpadding:15px 15px;\r\n}\r\nheader .container{\r\n\t-webkit-display: flex;\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n}\r\n\r\nheader .logo a{\r\n\tfont-size: 30px;\r\n\ttext-decoration: none;\r\n\tcolor:#ffffff;\r\n\tfont-weight: 700;\r\n}\r\nheader .logo a span{\r\n\tcolor:#c11325;\r\n}\r\nheader .nav{\r\n\tposition: fixed;\r\n\tbackground-color: #c11325;\r\n\twidth: 280px;\r\n\ttop:0;\r\n\tright:0;\r\n\theight: 100%;\r\n\tz-index: 99;\r\n\tpadding:100px 0px 15px; \r\n\t-webkit-transform: translateX(100%);\r\n\ttransform: translateX(100%);\r\n\t-webkit-transition: transform .5s ease;\r\n transition: transform .5s ease;\r\n}\r\nheader .nav.open{\r\n\t-webkit-transform: translateX(0);\r\n\ttransform: translateX(0);\r\n}\r\nheader .nav ul{\r\n\tlist-style: none;\r\n\tmargin:0;\r\n\tpadding:0px;\r\n}\r\nheader .nav ul li{\r\ndisplay: block;\r\n}\r\nheader .nav ul li a{\r\n\ttext-decoration: none;\r\n\tfont-size: 30px;\r\n\tfont-weight: 400;\r\n color:#ffffff;\r\n display: block;\r\n position: relative;\r\n padding:10px 30px;\r\n}\r\nheader .nav ul li a.active::before{\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\tleft:0px;\r\n\ttop:0px;\r\n\theight: 100%;\r\n\twidth:100%;\r\n\tbackground-color:#000000;\r\n\topacity:.2;\r\n\t-webkit-transition: width .5s ease;\r\n\ttransition: width .5s ease;\r\n\tz-index: -1;\r\n}\r\nheader .nav ul li a::before{\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\tleft:0px;\r\n\ttop:0px;\r\n\theight: 100%;\r\n\twidth:0px;\r\n\tbackground-color:#000000;\r\n\topacity:.2;\r\n\t-webkit-transition: width .5s ease;\r\n\ttransition: width .5s ease;\r\n\tz-index: -1;\r\n}\r\nheader .nav ul li a:hover::before{\r\n\twidth: 100%;\r\n}\r\nheader .ham-burger{\r\n\tdisplay: inline-block;\r\n\tposition: relative;\r\n\tz-index: 100;\r\n}\r\nheader .ham-burger span{\r\n\theight: 3px;\r\n\tmargin-bottom:8px;\r\n\tdisplay: block;\r\n\tbackground-color:#ffffff;\r\n\twidth:30px;\r\n\t-webkit-transition: transform .5s ease;\r\n\ttransition: transform .5s ease;\r\n}\r\nheader .ham-burger span:nth-child(1){\r\n\ttransform-origin: left top;\r\n}\r\nheader .ham-burger span:nth-child(2){\r\n\ttransform-origin: left bottom;\r\n}\r\n\r\nheader .ham-burger.active span:nth-child(1){\r\n\t-webkit-transform: rotate(45deg) translateY(-6px);\r\n\ttransform: rotate(45deg) translateY(-6px);\r\n}\r\nheader .ham-burger.active span:nth-child(2){\r\n\t-webkit-transform: rotate(-45deg) translateY(6px);\r\n\ttransform: rotate(-45deg) translateY(6px)\r\n}\r\n\r\n.container{\r\n\tmax-width: 1170px;\r\n\tmargin: auto;\r\n}\r\n\r\n/*Home section*/\r\n.home{\r\n\theight: 100vh;\r\n\tbackground-image: url('../images/home.jpg');\r\n\tbackground-size: cover;\r\n\tpadding:15px;\r\n\t-webkit-display: flex;\r\n\tdisplay: flex;\r\n\tposition: relative;\r\n}\r\n.home .go-down{\r\n position: absolute;\r\n bottom: 50px;\r\n width: 26px;\r\n height:40px;\r\n border:1px solid #ffffff;\r\n display: block;\r\n border-radius:4px;\r\n text-align: center;\r\n left:50%;\r\n margin-left: -13px;\r\n}\r\n.home .go-down .fa{\r\n\tcolor:#ffffff;\r\n\t-webkit-animation: goDown 1s ease infinite;\r\n\tanimation: goDown 1s ease infinite;\r\n}\r\n@-webkit-keyframes goDown{\r\n\t0%{transform: translateY(0);opacity:.5}\r\n\t100%{transform: translateY(10px);}\r\n}\r\n@keyframes goDown{\r\n\t0%{transform: translateY(0);opacity:.5}\r\n\t100%{transform: translateY(10px);}\r\n}\r\n.home .container{\r\n -webkit-display: flex;\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n}\r\n\r\n.home h1{\r\n\tcolor:#ffffff;\r\n\tfont-size: 60px;\r\n\tfont-weight: 700;\r\n\ttext-transform: uppercase;\r\n\tmargin:0;\r\n}\r\n\r\n.home h1 span{\r\n\tcolor:#c11325;;\r\n}\r\n\r\n\r\n/*About section*/\r\n\r\n.about{\r\n\tpadding:80px 0px;\r\n\tbackground-color:#ffffff;\r\n}\r\n\r\n.about .content{ \r\n -webkit-display: flex;\r\n display: flex;\r\n}\r\n.about .content .box{\r\n\tflex:0 0 33.33%;\r\n\tmax-width: 33.33%;\r\n\tpadding:15px;\r\n}\r\n.about .content .box .inner{\r\n\tbackground-color:#222222;\r\n}\r\n.about .content .box:nth-child(2) .inner{\r\n\tbackground-color: #c11325;\r\n}\r\n.about .content .box .inner .img img{\r\n\twidth: 100%;\r\n}\r\n.about .content .box .inner .text{\r\n\tpadding:30px;\r\n}\r\n\r\n.about .content .box .inner .text h4{\r\n font-size: 20px;\r\n margin:0;\r\n padding: 0px 0px 15px;\r\n font-weight: 500;\r\n color:#ffffff;\r\n text-transform: capitalize;\r\n text-align: center;\r\n}\r\n.about .content .box .inner .text p{\r\n\tfont-size: 15px;\r\n\tline-height:20px;\r\n\tcolor:#ffffff;\r\n\ttext-align: center;\r\n\tmargin:0;\r\n\tfont-family: 'Open Sans', sans-serif;\r\n}\r\n\r\n\r\n/*Service Section*/\r\n.service{\r\n\tpadding:80px 0px;\r\n\tbackground-color: #c11325;\r\n}\r\n\r\n.service .content{\r\n\t-webkit-display:flex;\r\n\tdisplay:flex;\r\n}\r\n\r\n.service .content .box{\r\n\tflex:0 0 50%;\r\n\tmax-width: 50%;\r\n\tpadding:15px;\r\n}\r\n\r\n.service .content .text h2{\r\n\tfont-size: 30px;\r\n\tfont-weight: 500;\r\n\tcolor:#ffffff;\r\n\tpadding:0px 0px 20px;\r\n}\r\n\r\n.service .content .text p{\r\n font-size: 15px;\r\n\tline-height:20px;\r\n\tcolor:#ffffff;\r\n\tmargin:0;\r\n\tpadding:0px 0px 20px;\r\n\tfont-family: 'Open Sans', sans-serif;\r\n}\r\n\r\n.service .content .text .btn{\r\n\tpadding:8px 30px;\r\n\tbackground-color: #222222;\r\n\tcolor:#ffffff;\r\n\ttext-decoration: none;\r\n\tdisplay: inline-block;\r\n\tborder:1px solid transparent;\r\n\tcursor: pointer;\r\n\t-webkit-transition: all .5s ease;\r\n\ttransition: all .5s ease;\r\n}\r\n\r\n.service .content .text .btn:hover{\r\n\tborder:1px solid #ffffff;\r\n\tcolor:#ffffff;\r\n\tbackground-color: transparent;\r\n}\r\n.service .content .accordian-container{\r\n\tmargin-bottom: 5px;\r\n}\r\n.service .content .accordian-container .head{\r\n\tbackground-color:rgba(0,0,0,0.2);\r\n\tposition: relative;\r\n\tpadding:12px 15px;\r\n\tcursor: pointer;\r\n}\r\n.service .content .accordian-container .head .fa{\r\n\tposition: absolute;\r\n\tright: 10px;\r\n\ttop:13px;\r\n\tcolor:#ffffff;\r\n\theight:30px;\r\n\twidth: 30px;\r\n\ttext-align: center;\r\n\tline-height: 30px;\r\n\tcolor:#ffffff;\r\n\tborder-radius: 50%;\r\n}\r\n.service .content .accordian-container .head h4{\r\n font-size: 20px;\r\n margin:0;\r\n padding:0;\r\n font-weight: 500;\r\n color: #ffffff;\r\n text-transform: capitalize;\r\n}\r\n.service .content .accordian-container.active .head{\r\n background-color: #222222;\t\r\n}\r\n.service .content .accordian-container .body{\r\n\tdisplay: none;\r\n\tpadding:15px;\r\n\tbackground-color: #222222;\r\n\tborder-top:1px solid #333333;\r\n}\r\n\r\n.service .content .accordian-container:nth-child(1) .body{\r\n\tdisplay: block;\r\n}\r\n.service .content .accordian-container .body p{\r\n font-size: 15px;\r\n\tline-height:20px;\r\n\tcolor:#ffffff;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\tfont-family: 'Open Sans', sans-serif;\t\r\n}\r\n\r\n\r\n/*Classes Section*/\r\n\r\n.classes{\r\n\tpadding:80px 0px 50px;\r\n\tbackground-color: #ffffff;\r\n}\r\n\r\n.classes .content{\r\n\t-webkit-display: flex;\r\n\tdisplay: flex;\r\n}\r\n\r\n.classes .content .box{\r\n\tpadding:15px;\r\n\tflex:0 0 50%;\r\n\tmax-width: 50%;\r\n}\r\n\r\n.classes .content .img img{\r\n\twidth: 100%;\r\n\t-webkit-transform: rotateY(180deg);\r\n\ttransform: rotateY(180deg);\r\n}\r\n\r\n.classes .content .text h2{\r\n font-size: 30px;\r\n font-weight: 500;\r\n color: #000000;\r\n padding: 0px 0px 20px;\r\n}\r\n\r\n.classes .content .text p{\r\n\tfont-size: 15px;\r\n line-height: 20px;\r\n color: #000000;\r\n margin: 0;\r\n padding: 0px 0px 30px;\r\n font-family: 'Open Sans', sans-serif;\r\n}\r\n\r\n\r\n.classes .content .class-items .item{\r\n\tmargin-bottom: 30px;\r\n\tdisplay: flex;\r\n}\r\n.classes .content .class-items .item:nth-child(1){\r\n background-color: #222222;\r\n}\r\n.classes .content .class-items .item:nth-child(2){\r\n background-color: #c11325;\r\n}\r\n.classes .content .class-items .item .item-text{\r\n\tpadding: 15px;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: center;\r\n}\r\n.classes .content .class-items .item .item-text,\r\n.classes .content .class-items .item .item-img{\r\n\tflex:0 0 50%;\r\n\tmax-width: 50%;\r\n\tposition: relative;\r\n}\r\n\r\n.classes .content .class-items .item .item-img img{\r\n width: 100%;\r\n display: block;\r\n}\r\n.classes .content .class-items .item .item-img .price{\r\n\tposition: absolute;\r\n\theight: 50px;\r\n\twidth: 60px;\r\n\tfont-size:20px;\r\n\tfont-weight: 500; \r\n\tcolor:#ffffff;\r\n\ttext-align: center;\r\n\tline-height: 50px;\r\n}\r\n.classes .content .class-items .item:nth-child(1) .item-img .price{\r\n background-color: #c11325;\r\n left:0;\r\n top:0;\r\n}\r\n.classes .content .class-items .item:nth-child(2) .item-img .price{\r\n background-color: #222222;\r\n right:0;\r\n top:0;\r\n}\r\n.classes .content .class-items .item .item-text h4{\r\n\tfont-size: 20px;\r\n margin: 0;\r\n padding: 0px 0px 15px;\r\n font-weight: 500;\r\n color: #ffffff;\r\n text-transform: capitalize;\r\n text-align: left;\r\n}\r\n\r\n.classes .content .class-items .item .item-text p{\r\n\tfont-size: 15px;\r\n line-height: 20px;\r\n color: #ffffff;\r\n text-align:left;\r\n margin: 0;\r\n padding:0 0 20px;\r\n font-family: 'Open Sans', sans-serif;\r\n}\r\n.classes .content .class-items .item .item-text a{\r\n font-size: 16px;\r\n text-decoration: none;\r\n display: inline-block;\r\n}\r\n\r\n.classes .content .class-items .item .item-text a{\r\n\tcolor:#ffffff;\r\n}\r\n\r\n\r\n\r\n\r\n/*Start Today Section*/\r\n.start-today{\r\n\tbackground-color: #222222;\r\n}\r\n\r\n.start-today .content{\r\n\t-webkit-display: flex;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.start-today .content .box{\r\n\tflex:0 0 50%;\r\n\tmax-width: 50%;\r\n\tpadding:0px 15px;\r\n}\r\n\r\n.start-today .content .img img{\r\n\twidth: 100%;\r\n\tdisplay: block;\r\n}\r\n\r\n.start-today .content .text h2{\r\n\tfont-size: 30px;\r\n font-weight: 500;\r\n color: #ffffff;\r\n padding: 0px 0px 20px;\r\n}\r\n\r\n.start-today .content .text p{\r\n\tfont-size: 15px;\r\n line-height: 20px;\r\n color: #ffffff;\r\n margin: 0;\r\n padding: 0px 0px 20px;\r\n font-family: 'Open Sans', sans-serif;\r\n}\r\n\r\n.start-today .content .text .btn{\r\n\tpadding: 8px 30px;\r\n background-color: #c11325;\r\n color: #ffffff;\r\n text-decoration: none;\r\n display: inline-block;\r\n border: 1px solid transparent;\r\n cursor: pointer;\r\n -webkit-transition: all .5s ease;\r\n transition: all .5s ease;\r\n}\r\n\r\n.start-today .content .text .btn:hover{\r\n\tcolor:#ffffff;\r\n\tborder-color: #ffffff;\r\n\tbackground-color: transparent;\r\n}\r\n\r\n\r\n\r\n\r\n/*Class Schedule Section*/\r\n.schedule{\r\n\tpadding:80px 0px;\r\n}\r\n\r\n.schedule .content{\r\n\t-webkit-display: flex;\r\n\tdisplay: flex;\r\n}\r\n\r\n.schedule .content .box{\r\n\tflex:0 0 50%;\r\n\tmax-width: 100%;\r\n\tpadding:15px;\r\n}\r\n\r\n.schedule .content .text h2{\r\n font-size: 30px;\r\n font-weight: 500;\r\n color: #000000;\r\n padding: 0px 0px 20px;\r\n}\r\n\r\n.schedule .content .text p{\r\n\tfont-size: 15px;\r\n line-height: 20px;\r\n color: #222222;\r\n margin: 0;\r\n padding: 0px 0px 20px;\r\n font-family: 'Open Sans', sans-serif;\r\n}\r\n.schedule .content .text img{\r\n\twidth: 100%;\r\n\ttransform: rotateY(180deg);\r\n}\r\n\r\n.schedule .content .timing .table{\r\n\twidth: 100%;\r\n\tborder-collapse: collapse;\r\n}\r\n\r\n.schedule .content .timing .table td{\r\n\tborder:1px solid #dfdfdf;\r\n\tpadding: 8px;\r\n\tfont-size: 15px;\r\n\ttext-align: center;\r\n\tcolor:#222222;\r\n}\r\n\r\n.schedule .content .timing .table tr:nth-child(even) td.day{\r\n\tbackground-color: #222222;\r\n}\r\n.schedule .content .timing .table tr:nth-child(odd) td.day{\r\n\tbackground-color: #444444;\r\n}\r\n.schedule .content .timing .table tr:nth-child(1) td.day{\r\n\tbackground-color: #c11325;\r\n}\r\n.schedule .content .timing .table tr td.day{\r\n\tcolor:#ffffff;\r\n\tborder-color:transparent;\r\n}\r\n\r\n\r\n/*Gallery Section*/\r\n\r\n.gallery .content{\r\n\t-webkit-display: flex;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n}\r\n\r\n.gallery .content .box{\r\n\tflex:0 0 50%;\r\n\tmax-width: 50%;\t\r\n}\r\n.gallery .content .box img{\r\n\tdisplay: block;\r\n\twidth: 100%;\r\n\t-webkit-filter: grayscale(100%);\r\n\tfilter: grayscale(100%);\r\n\t-webkit-transition: all .5s ease;\r\n\ttransition: all .5s ease;\r\n}\r\n.gallery .content .box img:hover{\r\n\t-webkit-filter: grayscale(0%);\r\n\tfilter: grayscale(0%);\r\n}\r\n\r\n.gallery h2{\r\n\tfont-size: 30px;\r\n font-weight: 500;\r\n color: #000000;\r\n padding: 0px 0px 20px;\r\n text-align: center;\r\n}\r\n\r\n\r\n/*Price Section*/\r\n\r\n.price-package{\r\n\tpadding: 80px 0px;\r\n\tbackground-color: #ffffff;\r\n}\r\n.price-package h2{\r\n\tfont-size: 30px;\r\n\tfont-weight: 500;\r\n\tcolor:#000000;\r\n\tpadding: 0px 0px 20px;\r\n\ttext-align: center;\r\n}\r\n\r\n.price-package .title-p{\r\n font-size: 15px;\r\n line-height: 20px;\r\n color:#222222;\r\n margin:0;\r\n text-align: center;\r\n padding:0 20% 50px;\r\n font-family: 'Open-sans', sans-serif;\r\n}\r\n\r\n.price-package .content{\r\n\t-webkit-display: flex;\r\n\tdisplay: flex;\r\n}\r\n.price-package .content .box{\r\n\tflex:0 0 33.33%;\r\n\tmax-width: 33.33%;\r\n\tpadding: 15px;\r\n}\r\n.price-package .content .box .inner{\r\n\tbackground-color: #f0f0f0;\r\n}\r\n.price-package .content .box .inner .price-tag{\r\n\tpadding: 15px;\r\n\tfont-size: 20px;\r\n\tbackground-color: #c11325;\r\n\tcolor:#ffffff;\r\n\ttext-align: center;\r\n\tfont-weight: 700;\r\n}\r\n.price-package .content .box .inner .text{\r\n\tpadding:30px 15px;\r\n\ttext-align: center;\r\n}\r\n.price-package .content .box .inner .text h3{\r\n\tfont-size: 24px;\r\n\tcolor:#222222;\r\n\tmargin:0;\r\n\tpadding:0px 0px 20px;\r\n\tfont-weight: 700;\r\n}\r\n.price-package .content .box .inner .text p{\r\n font-size: 15px;\r\n line-height: 20px;\r\n color:#222222;\r\n margin:0;\r\n text-align: center;\r\n padding:0 0 5px;\r\n font-family: 'Open-sans', sans-serif;\t\r\n}\r\n.price-package .content .box .inner .text .btn{\r\n padding: 8px 30px;\r\n background-color: #c11325;\r\n color: #ffffff;\r\n text-decoration: none;\r\n display: inline-block;\r\n border: 1px solid transparent;\r\n cursor: pointer;\r\n -webkit-transition: all .5s ease;\r\n transition: all .5s ease;\r\n margin-top: 10px;\r\n}\r\n.price-package .content .box .inner .text .btn:hover{\r\n\tborder-color:#222222;\r\n\tcolor:#222222;\r\n\tbackground-color: transparent;\r\n}\r\n.price-package .content .box .inner .img img{\r\n\twidth: 100%;\r\n}\r\n\r\n\r\n\r\n/*Contact Section*/\r\n\r\n.contact{\r\n\tpadding:80px 0px;\r\n\tbackground-color: #222222;\r\n}\r\n\r\n.contact .content{\r\n\t-webkit-display: flex;\r\n\tdisplay: flex;\r\n}\r\n\r\n.contact .content .box{\r\n\tflex:0 0 50%;\r\n\tmax-width: 50%;\r\n\tpadding: 15px;\r\n}\r\n\r\n.contact .content .form input,\r\n.contact .content .form textarea{\r\n height: 45px;\r\n width: 100%;\r\n padding:6px 12px;\r\n margin-bottom: 25px;\r\n background-color: transparent;\r\n border:1px solid #ffffff;\r\n font-family: 'Open-sans',sans-serif;\r\n color:#ffffff;\r\n}\r\n.contact .content .form input:focus,\r\n.contact .content .form textarea:focus{\r\n outline: none;\r\n}\r\n.contact .content .form input::placeholder,\r\n.contact .content .form textarea::placeholder{\r\n\tcolor:#ffffff;\r\n}\r\n.contact .content .form textarea{\r\n\theight: 100px;\r\n}\r\n\r\n.contact .content .form button{\r\n\tborder:none;\r\n\toutline: none;\r\n\tbox-shadow: none;\r\n\theight: 45px;\r\n\tpadding:0px 50px;\r\n\tborder:1px solid transparent;\r\n\tbackground-color: #c11325;\r\n\tcolor:#ffffff;\r\n\tfont-size: 15px;\r\n\ttransition: all .5s ease;\r\n\tcursor: pointer;\r\n}\r\n.contact .content .form button:hover{\r\n\tbackground-color:transparent;\r\n\tcolor:#ffffff; \r\n border-color:#ffffff;\r\n}\r\n\r\n.contact .content .text h2{\r\n\tfont-size: 30px;\r\n font-weight: 500;\r\n color: #c11325;\r\n padding: 0px 0px 20px;\r\n}\r\n.contact .content .text p{\r\n font-size: 15px;\r\n line-height: 20px;\r\n color: #ffffff;\r\n margin: 0;\r\n padding: 0px 0px 30px;\r\n font-family: 'Open-sans', sans-serif;\r\n}\r\n\r\n.contact .content .text .info ul{\r\n\tlist-style: none;\r\n\tpadding:0;\r\n\tmargin:0;\r\n}\r\n\r\n.contact .content .text .info li{\r\n\tdisplay: block;\r\n\tmargin-bottom: 15px;\r\n\tcolor:#ffffff;\r\n\tfont-size: 15px;\r\n\tletter-spacing: 1px;\r\n\tposition: relative;\r\n\tpadding-left: 40px;\r\n\tfont-family: 'Open-Sans',sans-serif;\r\n}\r\n.contact .content .text .info li span{\r\n\tdisplay: inline-block;\r\n\tposition: absolute;\r\n\tleft:0px;\r\n\ttop:0px;\r\n\tfont-size: 20px;\r\n\tcolor:#c11325;\r\n}\r\n.contact .content .text .social {\r\n\tpadding-top: 30px;\r\n}\r\n.contact .content .text .social a{\r\n\theight: 40px;\r\n\twidth: 40px;\r\n\tline-height: 40px;\r\n\ttext-align: center;\r\n\tbackground-color: #c11325;\r\n text-decoration: none;\t\r\n display: inline-block;\r\n margin-right: 10px;\r\n transition: all .5s ease;\r\n border:1px solid transparent;\r\n} \r\n\r\n.contact .content .text .social a:hover{\r\n\tbackground-color: transparent;\r\n border-color: #ffffff;\r\n}\r\n\r\n.contact .content .text .social a span{\r\n\tcolor:#ffffff;\r\n\tfont-size: 20px;\r\n}\r\n\r\n.contact .content .text .copy{\r\n\tborder-top:1px solid #333333;\r\n\tmargin-top: 30px;\r\n\tpadding-top: 20px;\r\n\tcolor:#c5c5c5;\r\n\tfont-size: 15px;\r\n}\r\n\r\n\r\n\r\n\r\n/*Responsive*/\r\n\r\n/*if screen width is less than or equal to 991px then*/\r\n@media(max-width: 991px){\r\n .home{\r\n \tbackground-position: center;\r\n }\r\n .classes .content{\r\n \tflex-wrap: wrap;\r\n }\r\n .classes .content .box {\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n}\r\n.classes .content .img{\r\n\tdisplay: none;\r\n}\r\n.start-today .content .box{\r\n\tpadding:15px;\r\n}\r\n}\r\n\r\n/*if screen width is less than or equal to 767px then*/\r\n@media(max-width: 767px){\r\n .home h1{\r\n font-size: 40px;\r\n }\r\n .about .content{\r\n \t flex-wrap: wrap;\r\n }\r\n .about .content .box {\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n}\r\n.service .content{\r\n\tflex-wrap: wrap;\r\n}\r\n.service .content .box {\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n}\r\n.classes .content .class-items .item{\r\n\tflex-wrap: wrap;\r\n}\r\n.classes .content .class-items .item .item-text, \r\n.classes .content .class-items .item .item-img {\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n}\r\n.schedule .content{\r\n\tflex-wrap: wrap;\r\n}\r\n.schedule .content .box{\r\nflex: 0 0 100%;\r\n max-width: 100%;\t\r\n}\r\n.start-today .content{\r\n\tflex-wrap: wrap;\r\n}\r\n.start-today .content .box {\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n }\r\n .gallery .content{\r\n flex-wrap: wrap;\r\n }\r\n.gallery .content .box {\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n}\r\n.price-package .content{\r\n\tflex-wrap: wrap;\r\n}\r\n.price-package .content .box {\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n}\r\n.contact .content{\r\n\tflex-wrap: wrap;\r\n}\r\n.contact .content .box {\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n}\r\n}\r\n\r\n/*if screen width is less than or equal to 550px then*/\r\n@media(max-width: 550px){\r\n .home h1{\r\n font-size: 30px;\r\n }\r\n}\r\n\r\n\r\n" }, { "path": "index.html", "content": "\r\n\r\n\r\n\tGym Website Template\r\n\t\r\n \r\n\t\r\n \r\n \r\n\r\n\r\n \r\n \r\n
\r\n \t
\r\n \t \t
\r\n \t \t\t Fitness Club\r\n \t \t
\r\n \t \t\r\n \t \t\r\n \t \r\n \t \t\r\n \t \t
\r\n \t \t\t\r\n \t \t
\r\n \t
\r\n
\r\n \r\n\r\n \r\n
\r\n \t
\r\n \t \t

It's gym time. Let's go

\r\n \t \t

We are ready to fit you

\r\n \t
\r\n \t \r\n \t \r\n \t \t \r\n \t \r\n \t \r\n\r\n
\r\n \r\n\r\n\r\n \r\n
\r\n \t
\r\n \t \t
\r\n \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t \"about\"\r\n \t \t \t \t \t
\r\n
\r\n \t

Free Consultation

\r\n \t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

\r\n
\r\n \t \t \t \t
\r\n \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t \"about\"\r\n \t \t \t \t \t
\r\n
\r\n \t

Best Training

\r\n \t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

\r\n
\r\n \t \t \t \t
\r\n \t \t \t
\r\n \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t \"about\"\r\n \t \t \t \t \t
\r\n
\r\n \t

Build Perfect Body

\r\n \t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

\r\n
\r\n \t \t \t \t
\r\n \t \t \t
\r\n \t \t
\r\n \t
\r\n
\r\n \r\n\r\n\r\n \r\n
\r\n \t
\r\n \t\t
\r\n \t\t \t
\r\n

Services

\r\n

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

\r\n

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

\r\n Start Now\r\n \t\t \t
\r\n \t\t \t
\r\n \t\t \t \t
\r\n \t\t \t \t \t
\r\n \t\t \t \t \t\t

Cardiovascular Equipment

\r\n \t\t \t \t \t\t\r\n \t\t \t \t \t
\r\n \t\t \t \t \t
\r\n \t\t \t \t \t\t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

\r\n \t\t \t \t \t
\r\n \t\t \t \t
\r\n \t\t \t \t
\r\n \t\t \t \t \t
\r\n \t\t \t \t \t\t

Strength Training Equipment

\r\n \t\t \t \t \t\t\r\n \t\t \t \t \t
\r\n \t\t \t \t \t
\r\n \t\t \t \t \t\t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

\r\n \t\t \t \t \t
\r\n \t\t \t \t
\r\n \t\t \t \t
\r\n \t\t \t \t \t
\r\n \t\t \t \t \t\t

Group Fitness Class

\r\n \t\t \t \t \t\t\r\n \t\t \t \t \t
\r\n \t\t \t \t \t
\r\n \t\t \t \t \t\t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

\r\n \t\t \t \t \t
\r\n \t\t \t \t
\r\n \t\t \t \t
\r\n \t\t \t \t \t
\r\n \t\t \t \t \t\t

Other Services

\r\n \t\t \t \t \t\t\r\n \t\t \t \t \t
\r\n \t\t \t \t \t
\r\n \t\t \t \t \t\t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

\r\n \t\t \t \t \t
\r\n \t\t \t \t
\r\n \t\t \t
\r\n \t\t
\r\n \t
\r\n
\r\n \r\n\r\n\r\n
\r\n\t
\r\n\t\t
\r\n\t\t \t
\r\n\t\t \t \t \"classes\"\r\n\t\t \t
\r\n\t\t \t
\r\n\t\t \t \t

Our Classes

\r\n\t\t \t \t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,

\r\n\t\t \t \t
\r\n\t\t \t \t
\r\n
\r\n \t \"classes\"\r\n \t
\r\n \t \t $99\r\n \t
\r\n
\r\n
\r\n \t

Stretching Training

\r\n \t

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

\r\n \t Get Details\r\n
\r\n\t\t \t \t
\r\n\t\t \t \t
\r\n
\r\n \t

Stretching Training

\r\n \t

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

\r\n \t Get Details\r\n
\r\n
\r\n \t \"classes\"\r\n \t
\r\n \t \t $99\r\n \t
\r\n
\r\n\t\t \t \t
\r\n\t\t \t \t
\r\n\t\t \t
\r\n\t\t
\r\n\t
\r\n
\r\n\r\n\r\n\r\n
\r\n \t
\r\n \t\t
\r\n \t\t \t
\r\n \t\t \t \t

Start Your Training Today

\r\n \t\t \t \t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,

\r\n \t\t \t \t Start Now\r\n \t\t \t
\r\n \t\t \t
\r\n \t\t \t \t \"start\r\n \t\t \t
\r\n\r\n \t\t
\r\n \t
\r\n
\r\n\r\n\r\n\r\n
\r\n \t
\r\n \t \t
\r\n \t \t \t
\r\n \t \t \t \t

Classes Schedule

\r\n \t \t \t \t

\r\n \t \t \t \t \tLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,\r\n \t \t \t \t

\r\n \t \t \t \t \"schedule\"\r\n \t \t \t
\r\n \t \t \t
\r\n \r\n \t \r\n \t \t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\r\n \t \t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\r\n \t \t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\r\n \t \t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\r\n \t \t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\r\n \t \t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\t\r\n \t \t\r\n \t \r\n
Monday9:00 AMBody Building
9:00 to 10:00 AM		Room No:210
Tuesday9:00 AMBody Building
9:00 to 10:00 AM		Room No:210
Wednesday9:00 AMBody Building
9:00 to 10:00 AM		Room No:210
Thursday9:00 AMBody Building
9:00 to 10:00 AM		Room No:210
Friday9:00 AMBody Building
9:00 to 10:00 AM		Room No:210
Saturday9:00 AMBody Building
9:00 to 10:00 AM		Room No:210
\r\n \t \t \t
\r\n \t \t
\r\n \t
\r\n
\r\n\r\n\r\n\r\n
\r\n \t

Workout Gallery

\r\n \t
\r\n \t\t
\r\n \t\t \t \"gallery\"\r\n \t\t
\r\n \t\t
\r\n \t\t \t \"gallery\"\r\n \t\t
\r\n \t\t
\r\n \t\t \t \"gallery\"\r\n \t\t
\r\n \t\t
\r\n \t\t \t \"gallery\"\r\n \t\t
\r\n \t
\r\n
\r\n\r\n\r\n \r\n
\r\n \t
\r\n \t \t

Choose Your Package

\r\n \t \t

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

\r\n \t \t
\r\n \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t $59/Month\r\n \t \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t \"price\"\r\n \t \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t

Body Building Training

\r\n \t \t \t \t \t \t

Get Free WiFi

\r\n \t \t \t \t \t \t

Month to Month

\r\n \t \t \t \t \t \t

No Time Restrictions

\r\n \t \t \t \t \t \t

Gym and Cardio

\r\n \t \t \t \t \t \t

Service Locker Rooms

\r\n \t \t \t \t \t \t Join Now\r\n \t \t \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t
\r\n \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t $69/Month\r\n \t \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t \"price\"\r\n \t \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t

Body Building Training

\r\n \t \t \t \t \t \t

Get Free WiFi

\r\n \t \t \t \t \t \t

Month to Month

\r\n \t \t \t \t \t \t

No Time Restrictions

\r\n \t \t \t \t \t \t

Gym and Cardio

\r\n \t \t \t \t \t \t

Service Locker Rooms

\r\n \t \t \t \t \t \t Join Now\r\n \t \t \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t
\r\n \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t $99/Month\r\n \t \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t \"price\"\r\n \t \t \t \t \t
\r\n \t \t \t \t \t
\r\n \t \t \t \t \t \t

Body Building Training

\r\n \t \t \t \t \t \t

Get Free WiFi

\r\n \t \t \t \t \t \t

Month to Month

\r\n \t \t \t \t \t \t

No Time Restrictions

\r\n \t \t \t \t \t \t

Gym and Cardio

\r\n \t \t \t \t \t \t

Service Locker Rooms

\r\n \t \t \t \t \t \t Join Now\r\n \t \t \t \t \t
\r\n \t \t \t \t
\r\n \t \t \t
\r\n \t \t
\r\n \t
\r\n
\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n

Get Connected with Gym

\r\n

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

\r\n
\r\n
    \r\n
  • Gali no 11, House no 11, Lahore
    • \r\n
  • 92 9999999999
    • \r\n
  • info@gym.com
    • \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n
\r\n PowerBy © Ali Ahmad\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n" } ]