|
|
| Line 1: |
Line 1: |
| − | <html> | + | {{Team:NUS_Singapore/new_template}} |
| − | <style> | + | {{Team:NUS_Singapore/CSS}} |
| − | @charset "UTF-8";
| + | <!DOCTYPE html> |
| − | /* | + | <html lang="en" class="no-js"> |
| − | Animate.css - http://daneden.me/animate
| + | <head> |
| − | Licensed under the ☺ license (http://licence.visualidiot.com/)
| + | <meta charset="UTF-8" /> |
| | + | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| | + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| | + | <title>Interactive Points | Codrops</title> |
| | + | <meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" /> |
| | + | <meta name="author" content="Codrops" /> |
| | + | <link rel="shortcut icon" href="favicon.ico"> |
| | + | <link rel="stylesheet" type="text/css" href="css/collapse.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/googleleapis1.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/googleleapis2.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/normalize.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/demo.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/component.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/sidebar_transitions_normalize.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/sidebar_transitions_demo.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/sidebar_transitions_icons.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/sidebar_transitions_component.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/buttons.css" /> |
| | + | <link rel="stylesheet" type="text/css" href="css/header_component.css" /> |
| | | | |
| − | Copyright (c) 2012 Dan Eden
| |
| | | | |
| − | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
| + | <!-- <script src="js/modernizr.custom.js"></script> --> |
| | | | |
| − | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
| + | <!--[if IE]> |
| | + | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
| | + | <![endif]--> |
| | + | </head> |
| | + | <body> |
| | + | <main> |
| | + | <div id="st-container" class="st-container"> |
| | + | <div class="st-pusher"> |
| | | | |
| − | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
| + | <!--Sidebar button--> |
| − | */
| + | <div id="st-trigger-effects"> |
| − | body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
| + | <button data-effect="st-effect-1" class="button button--rayen button--border button--round-m" data-text="More" style="z-index: 100"> |
| − | -webkit-backface-visibility: hidden;
| + | <span><img src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png"></span> |
| − | }
| + | </button> |
| − | .animated {
| + | </div> |
| − | -webkit-animation-duration: 1s;
| + | <!--End of Sidebar button--> |
| − | -moz-animation-duration: 1s;
| + | |
| − | -o-animation-duration: 1s;
| + | |
| − | animation-duration: 1s;
| + | |
| − | -webkit-animation-fill-mode: both;
| + | |
| − | -moz-animation-fill-mode: both;
| + | |
| − | -o-animation-fill-mode: both;
| + | |
| − | animation-fill-mode: both;
| + | |
| − | }
| + | |
| | | | |
| − | .animated.hinge { | + | <!--Header--> |
| − | -webkit-animation-duration: 2s;
| + | <header id="ha-header" class="ha-header ha-header-large"> |
| − | -moz-animation-duration: 2s;
| + | <div class="ha-header-perspective"> |
| − | -o-animation-duration: 2s;
| + | <div id="header1" class="ha-header-front" style="height: 120px"> |
| − | animation-duration: 2s;
| + | <img id="nus_logo" src="https://static.igem.org/mediawiki/2016/1/1d/T--NUS_Singapore--header_left.png" style="height: 90%; margin-top: -10px; left: 0px; position: absolute;"/> |
| − | }
| + | <img id="sci_logo" src="https://static.igem.org/mediawiki/2016/2/21/T--NUS_Singapore--NUS_Science_logo_grey.png" style="height: 50%; margin-top: 0px; right: 0px; position: absolute;"/> |
| | + | <img id="sps_logo" src="https://static.igem.org/mediawiki/2016/e/ec/T--NUS_Singapore--SPS_Logo_High_Res_grey.png" style="height: 30%; margin-top: 54px; right: 66px; position: absolute;"/> |
| | + | <img id="igem_logo" src="https://static.igem.org/mediawiki/2016/9/9a/T--NUS_Singapore--header_igem.png" style="height: 80%; margin-top: 0px; right: 170px; position: absolute;"/> |
| | + | <div style="height: 20%; background-color: rgb(217, 215, 215); width: 100%; bottom: 0px; left: 0px; position: absolute;"></div> |
| | + | </div> |
| | + | <div class="ha-header-bottom"> |
| | + | <h1 style="margin-left: 40%;">IGem Team NUS</h1> |
| | + | </div> |
| | + | </div> |
| | + | </header> |
| | + | <!--End of Header--> |
| | | | |
| − | @-webkit-keyframes flash {
| + | <!--Side Bar--> |
| − | 0%, 50%, 100% {opacity: 1;}
| + | <nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto;"> |
| − | 25%, 75% {opacity: 0;}
| + | <h2 class="icon icon-lab">Sidebar</h2> |
| − | }
| + | <ul> |
| | + | <li><a class="icon icon-home" id="menu-item-1" href="/">Home</a></li> |
| | + | <li><a class="icon icon-project" onclick="growDiv('2')" id="menu-item-2" href="#">Project</a> |
| | + | <div class="grow" id="grow-2"> |
| | + | <div class='measuringWrapper'> |
| | + | <a href="#" class="list-group-item">Wet Lab</a> |
| | + | <a href="#" class="list-group-item">Modelling</a> |
| | + | </div> |
| | + | </div> |
| | + | </li> |
| | + | <li><a class="icon icon-practice" onclick="growDiv('3')" id="menu-item-3" href="#">Human Practices</a> |
| | + | <div class="grow" id="grow-3"> |
| | + | <div class='measuringWrapper'> |
| | + | <a href="#" class="list-group-item">Business Plan</a> |
| | + | </div> |
| | + | </div> |
| | + | </li> |
| | + | <li><a class="icon icon-collaboration" onclick="growDiv('4')" id="menu-item-4" href="#">Collaborations</a> |
| | + | <div class="grow" id="grow-4"> |
| | + | <div class='measuringWrapper'> |
| | + | <a href="#" class="list-group-item">Melbourne</a> |
| | + | <a href="#" class="list-group-item">Hong_Kong_HKUST</a> |
| | + | <a href="#" class="list-group-item">ETH_Zurich</a> |
| | + | </div> |
| | + | </div> |
| | + | </li> |
| | + | <li><a class="icon icon-safety" id="menu-item-5" href="#">Safety</a></li> |
| | + | <li><a class="icon icon-team" id="menu-item-6" href="#">Team</a></li> |
| | + | <li><a class="icon icon-notebook" id="menu-item-7" onclick="growDiv('7')" href="#">Notbook</a> |
| | + | <div class="grow" id="grow-7"> |
| | + | <div class='measuringWrapper'> |
| | + | <a href="#" class="list-group-item">I. Lactate Sensor</a> |
| | + | <a href="#" class="list-group-item">II. Surface Antigen Recognition</a> |
| | + | <a href="#" class="list-group-item">III. Invasion</a> |
| | + | </div> |
| | + | </div> |
| | + | </li> |
| | + | <li><a class="icon icon-acknowledgement" id="menu-item-8" href="#">Acknowledgement</a></li> |
| | + | </ul> |
| | + | </nav> |
| | + | <!--End of Side Bar--> |
| | | | |
| − | @-moz-keyframes flash {
| + | <!--Sub header--> |
| − | 0%, 50%, 100% {opacity: 1;}
| + | <p class="message">Please view this wiki site on a larger screen.</p> |
| − | 25%, 75% {opacity: 0;}
| + | |
| − | }
| + | |
| | | | |
| − | @-o-keyframes flash {
| + | <section class="content"> |
| − | 0%, 50%, 100% {opacity: 1;}
| + | <div class="content__inner"> |
| − | 25%, 75% {opacity: 0;}
| + | <h2 class="content__title">Project Intro</h2> |
| − | }
| + | <h3 class="content__subtitle">Sub-title</h3> |
| | + | <p class="margin-paragraph"><strong>margin-paragraph</strong></p> |
| | + | <p class="margin-paragraph"><strong>margin-paragraph</strong></p> |
| | + | </div> |
| | + | </section> |
| | + | <!--End of Sub header--> |
| | | | |
| − | @keyframes flash {
| |
| − | 0%, 50%, 100% {opacity: 1;}
| |
| − | 25%, 75% {opacity: 0;}
| |
| − | }
| |
| | | | |
| − | .flash {
| + | <!-- Start of Map --> |
| − | -webkit-animation-name: flash;
| + | <section id="canvas" class="interactive-points interactive-points--alter ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack" id="interactive-2" tabindex="0" style="background: rgb(22,55,72);"> |
| − | -moz-animation-name: flash;
| + | <img class="static" src="https://static.igem.org/mediawiki/2016/7/72/T--NUS_Singapore--Background2.png" alt="Background" style="opacity: 1; z-index: 0; width: 100%; height: 100%;" /> |
| − | -o-animation-name: flash;
| + | |
| − | animation-name: flash;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes shake {
| + | |
| − | 0%, 100% {-webkit-transform: translateX(0);}
| + | |
| − | 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
| + | |
| − | 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
| + | |
| − | }
| + | |
| | | | |
| − | @-moz-keyframes shake {
| + | <div class="CD44v6" > |
| − | 0%, 100% {-moz-transform: translateX(0);}
| + | <img id="CD44v6" class="static" src="https://static.igem.org/mediawiki/2016/5/5a/T--NUS_Singapore--CD44v6.png" style="position: absolute; width: auto; height: 100%; top: 0; left: 0; z-index: 1; opacity: 1;" /> |
| − | 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
| + | <p id="CD44v6_text" class="CD44v6_text" style="position: absolute; width: 400px; height: auto; top: 20px; right: 10px; text-align: left; font-size: 20px; font-weight: bold; z-index: 1; display: none;"> |
| − | 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
| + | CD44 is a cell surface integral membrane protein involved in normal cell function (cell-cell and cell-matrix adhesion) and is also commonly implicated in cancer progression. The oncogenic potential of this protein is commonly associated with the various isoforms (CD44v). One notable isoform, CD44v6, seems to play a major role in cancer progression, facilitating cell migration and invasion and is commonly upregulated on the surface of cancer cells. The RIOT system uses CD44v6 as a spatial marker, and recognition of this protein through the use of a CD44v6 specific antibody allows anchoring of the engineered bacteria on the surface. This triggers the expression of invasin and LLO for subsequent invasion. |
| − | }
| + | <p> |
| | + | </div> |
| | | | |
| − | @-o-keyframes shake {
| + | <div class="Cancer_cell_body"> |
| − | 0%, 100% {-o-transform: translateX(0);}
| + | <img id="Cancer_cell_body" class="static" src="https://static.igem.org/mediawiki/2016/7/73/T--NUS_Singapore--Cancer_cell_body.png" style="position: absolute; width: auto; height: 100%; top: 0; left: 0; z-index: 2; opacity: 1;" /> |
| − | 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
| + | <p id="Cancer_cell_body_text" class="Cancer_cell_body_text" style="position: absolute; width: 400px; height: auto; top: 60px; right: 60px; text-align: left; font-size: 20px; font-weight: bold; z-index: 2; display: none;"> |
| − | 20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
| + | <u>Hallmarks of cancer and Warburg effect</u><br> |
| − | }
| + | The effects of cancer arise from parallel steps - many complex biological processes lead to all forms of cancer. The significant hallmarks of any type of cancer include an ability to combat cell death, prolonged signalling, the origination of angiogenesis and metastasis. Another observable trait of cancer is described by the Warburg effect, affirming that most cancer cells perform lactic acid fermentation in the cytosol, preceded by a higher rate of glycolysis.<br> |
| | + | <u>Lactate Concentration</u><br> |
| | + | In proliferative cell types such as cancer, the bulk of the pyruvate from glycolysis is directed away from the mitochondria to create lactate via lactate dehydrogenase (LDH/LDHA) - a process usually initiated only when oxygen supply is decreased. This production of lactate in the presence of oxygen is a direct consequence of the Warburg effect, illustrating that the microenvironment of a cancer tumour has an increased lactate concentration when compared to a normal cell environment. |
| | + | <p> |
| | + | </div> |
| | | | |
| − | @keyframes shake {
| + | <div class="Invasin_and_LLO"> |
| − | 0%, 100% {transform: translateX(0);}
| + | <img id="Invasin_and_LLO" class="static" src="https://static.igem.org/mediawiki/2016/0/06/T--NUS_Singapore--Invasin_and_LLO.png" style="position: absolute; width: auto; height: 100%; top: 0; right: 45.12%; z-index: 3; opacity: 1;" /> |
| − | 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
| + | <p id="Invasin_and_LLO_text" class="Quorum_Sensing_text" style="position: absolute; width: 400px; height: auto; top: 50px; right: 50px; text-align: left; font-size: 20px; font-weight: bold; z-index: 3; display: none;"> |
| − | 20%, 40%, 60%, 80% {transform: translateX(10px);}
| + | Invasin is derived from the bacteria <i>Yersinia pestis</i> which allows selective invasion of cells that express β1-integrins. Listeriolysin O (LLO) on the other hand, is expressed in <i>Listeria monocytogenes</i> and allows the bacteria to break out of the endosome after entry into mammalian cells. Combining the traits of these two genes, our engineered bacteria is capable of entering the cytosol of cancer cells to potentially release a cytotoxic drug. |
| − | }
| + | <p> |
| | + | </div> |
| | | | |
| − | .shake {
| + | <div class="Quorum_Sensing"> |
| − | -webkit-animation-name: shake;
| + | <img id="Quorum_Sensing" class="static" src="https://static.igem.org/mediawiki/2016/4/42/T--NUS_Singapore--Quorum_Sensing.png" style="position: absolute; width: auto; height: 100%; top: 0; right: 0; z-index: 4; opacity: 1;" /> |
| − | -moz-animation-name: shake;
| + | <p id="Quorum_Sensing_text" class="Quorum_Sensing_text" style="position: absolute; width: 400px; height: auto; top: 50px; left: 350px; text-align: left; font-size: 20px; font-weight: bold; z-index: 4; display: none;"> |
| − | -o-animation-name: shake;
| + | Initially, small amounts of N-Acyl homoserine lactones (AHLs) are produced by our engineered bacteria and they freely diffuse in and out of the cell. In the tumor region where the cell density is expected to be high, the concentration of AHL also increases, and past a threshold level, LuxR binds to AHL. When this happens, the LuxR-AHL complex goes on to further activate expression of LuxI, which then produces more AHL. This results in a positive feedback loop that increases both the concentration of LuxI as well as our desired proteins, invasin and LLO. |
| − | animation-name: shake;
| + | <p> |
| − | }
| + | </div> |
| − | @-webkit-keyframes bounce {
| + | |
| − | 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
| + | <div class="backgrounds"> |
| − | 40% {-webkit-transform: translateY(-30px);}
| + | <div class="background__element" style="background-image: url(img/pic/Cancer_Cell.png)"></div> |
| − | 60% {-webkit-transform: translateY(-15px);}
| + | </div> |
| − | }
| + | <!-- <svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%"> |
| | + | <path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/> |
| | + | <path class="point" d="M1069.3,589.7L1069.3,589.7c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1076.4,608.2,1075.7,596.1,1069.3,589.7z"/> |
| | + | <path class="point" d="M1533.8,114.2L1533.8,114.2c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1541,132.6,1540.2,120.6,1533.8,114.2z"/> |
| | + | <path class="point" d="M878.9,247.4L878.9,247.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C886,265.8,885.3,253.8,878.9,247.4z"/> |
| | + | <path class="point" d="M615.2,658.3L615.2,658.3c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C622.3,676.8,621.6,664.7,615.2,658.3z"/> |
| | + | <path class="point" d="M183.5,524L183.5,524c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C190.6,542.5,189.9,530.4,183.5,524z"/> |
| | + | </svg> --> |
| | + | <!-- <div class="points-tooltips"> |
| | + | <div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div> |
| | + | <div class="point-tooltip"><h2 class="point-tooltip__title">Swiss Court</h2><br><p class="point-tooltip__description">The crazy story of a rebel</p></div> |
| | + | <div class="point-tooltip"><h2 class="point-tooltip__title">Bear Street</h2><br><p class="point-tooltip__description">Hidden gems and stories</p></div> |
| | + | <div class="point-tooltip"><h2 class="point-tooltip__title">Leicester Square</h2><br><p class="point-tooltip__description">A never ending love story</p></div> |
| | + | <div class="point-tooltip"><h2 class="point-tooltip__title">Oxendon Street</h2><br><p class="point-tooltip__description">No need to panik, rescue is close</p></div> |
| | + | <div class="point-tooltip"><h2 class="point-tooltip__title">Haymarket</h2><br><p class="point-tooltip__description">Adventures to be discovered</p></div> |
| | + | </div> |
| | + | <div class="points-content"> |
| | + | <div class="point-content"> |
| | + | <h3 class="point-content__title">The Rupert Connection</h3> |
| | + | <p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p> |
| | + | <p class="point-content__text">Descended from astronomers encyclopaedia galactica from which we spring worldlets intelligent beings gathered by gravity billions.</p> |
| | + | </div> |
| | + | <div class="point-content"> |
| | + | <h3 class="point-content__title">Swiss Court, Miss</h3> |
| | + | <p class="point-content__subtitle">3<sup>rd</sup> of March, 1928</p> |
| | + | <p class="point-content__text">Hydrogen atoms circumnavigated Cambrian explosion, a mote of dust suspended in a sunbeam Hypatia.</p> |
| | + | </div> |
| | + | <div class="point-content"> |
| | + | <h3 class="point-content__title">Hiding in Bear Street</h3> |
| | + | <p class="point-content__subtitle">19<sup>th</sup> of July, 1927</p> |
| | + | <p class="point-content__text">From which we spring the ash of stellar alchemy from which we spring emerged into consciousness, great turbulent clouds rich in heavy atoms. </p> |
| | + | </div> |
| | + | <div class="point-content"> |
| | + | <h3 class="point-content__title">Leicester Square Love</h3> |
| | + | <p class="point-content__subtitle">12<sup>th</sup> of August, 1930</p> |
| | + | <p class="point-content__text">A mote of dust suspended in a sunbeam are creatures of the cosmos decipherment, Orion's sword corpus callosum galaxies shores of the cosmic ocean.</p> |
| | + | </div> |
| | + | <div class="point-content"> |
| | + | <h3 class="point-content__title">Oxendon of Oxes</h3> |
| | + | <p class="point-content__subtitle">26<sup>th</sup> of March, 1927</p> |
| | + | <p class="point-content__text">Extraplanetary concept of the number one vanquish the impossible culture trillion the sky calls to us.</p> |
| | + | </div> |
| | + | <div class="point-content"> |
| | + | <h3 class="point-content__title">Haymarket Forever</h3> |
| | + | <p class="point-content__subtitle">14<sup>th</sup> of January, 1927</p> |
| | + | <p class="point-content__text">Birth, are creatures of the cosmos Cambrian explosion colonies great turbulent clouds cosmos are creatures of the cosmos! Great turbulent clouds.</p> |
| | + | </div> |
| | + | </div> --> |
| | + | </section> |
| | + | <!-- End of Map --> |
| | | | |
| − | @-moz-keyframes bounce {
| |
| − | 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
| |
| − | 40% {-moz-transform: translateY(-30px);}
| |
| − | 60% {-moz-transform: translateY(-15px);}
| |
| − | }
| |
| | | | |
| − | @-o-keyframes bounce {
| + | <section> |
| − | 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
| + | <h2> Welcome to NUS_Singapore iGEM 2016 Page! </h2> |
| − | 40% {-o-transform: translateY(-30px);}
| + | <p>Conventional drug delivery systems are plagued by problems such as non-specific targeting and low bioavailability. Bacterial-based drug delivery systems have gained much interest due to their ability to overcome the issue of non-specific delivery of drugs. This is achieved by engineering bacteria to sense and respond to specific stimuli present in the microenvironment of these pathogenic cells.</p> |
| − | 60% {-o-transform: translateY(-15px);}
| + | |
| − | }
| + | |
| − | @keyframes bounce {
| + | |
| − | 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
| + | |
| − | 40% {transform: translateY(-30px);}
| + | |
| − | 60% {transform: translateY(-15px);}
| + | |
| − | }
| + | |
| | | | |
| − | .bounce {
| + | <p>In this project, we propose the development of a dual-sensor bacteria which can only survive, and release therapeutics, within the targeted part of the human body (i.e., spatially specific). As our proof of concept, we will be engineering the <i>Escherichia coli</i> bacterium to target cancer tumors with high environmental lactate — see <a style="color: white;" href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC2849637/pdf/nihms165713.pdf">Warburg effect</a>.</p> |
| − | -webkit-animation-name: bounce;
| + | |
| − | -moz-animation-name: bounce;
| + | |
| − | -o-animation-name: bounce;
| + | |
| − | animation-name: bounce;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes tada {
| + | |
| − | 0% {-webkit-transform: scale(1);}
| + | |
| − | 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
| + | |
| − | 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
| + | |
| − | 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
| + | |
| − | 100% {-webkit-transform: scale(1) rotate(0);}
| + | |
| − | }
| + | |
| | | | |
| − | @-moz-keyframes tada {
| + | <p>To ensure that the bacterium will only affect cancer cells, the bacterium is engineered to detect, and adhere to a cancer specific surface marker. Upon detection, a quorum sensing system and the production of invasin and listeriolysin O is triggered. The invasin and listeriolysin O then allows the bacteria to deliver its payload directly into the cytoplasm of the cancer cell. Since the production of invasin and listeriolysin O cannot occur in the absence of the said marker, this delivery system will only target cancer cells, concentrating drug payload at the intended site.</p> |
| − | 0% {-moz-transform: scale(1);}
| + | |
| − | 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
| + | |
| − | 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
| + | |
| − | 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
| + | |
| − | 100% {-moz-transform: scale(1) rotate(0);}
| + | |
| − | }
| + | |
| | | | |
| − | @-o-keyframes tada {
| + | <p>Our team has been working on cloning our desired biobrick parts and modelling our gene circuit. We hope to be able to characterise and optimise our parts, and demonstrate a functional spatially-specific drug delivery system, as well as complement our wet lab efforts with our model.</p> |
| − | 0% {-o-transform: scale(1);}
| + | </section> |
| − | 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
| + | |
| − | 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
| + | |
| − | 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
| + | |
| − | 100% {-o-transform: scale(1) rotate(0);}
| + | |
| − | }
| + | |
| | | | |
| − | @keyframes tada {
| |
| − | 0% {transform: scale(1);}
| |
| − | 10%, 20% {transform: scale(0.9) rotate(-3deg);}
| |
| − | 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
| |
| − | 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
| |
| − | 100% {transform: scale(1) rotate(0);}
| |
| − | }
| |
| | | | |
| − | .tada {
| + | <section class="content content--related"> |
| − | -webkit-animation-name: tada;
| + | <p><strong>Content Section here</strong></p> |
| − | -moz-animation-name: tada;
| + | </section> |
| − | -o-animation-name: tada;
| + | </div><!-- /st-pusher --> |
| − | animation-name: tada;
| + | </div><!-- /st-container --> |
| − | }
| + | </main> |
| − | @-webkit-keyframes swing {
| + | <script src="js/lunar.js"></script> |
| − | 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
| + | <script src="js/imagesloaded.pkgd.min.js"></script> |
| − | 20% { -webkit-transform: rotate(15deg); }
| + | <script src="js/main.js"></script> |
| − | 40% { -webkit-transform: rotate(-10deg); }
| + | <script> |
| − | 60% { -webkit-transform: rotate(5deg); }
| + | (function() { |
| − | 80% { -webkit-transform: rotate(-5deg); }
| + | new PointsMap(document.querySelector('#interactive-2'), { |
| − | 100% { -webkit-transform: rotate(0deg); }
| + | // Maximum opacity that the background element of a Point can have when the point is active (mouse gets closer to it). |
| − | }
| + | maxOpacityOnActive : 1, |
| | + | // When the mouse is [activeOn]px away from one point, its image gets opacity = point.options.maxOpacity. |
| | + | activeOn : 90 |
| | + | }); |
| | + | })(); |
| | + | </script> |
| | + | <script src="js/classie.js"></script> |
| | + | <script src="js/sidebarEffects.js"></script> |
| | + | <script src="js/jquery.min.js"></script> |
| | + | <script src="js/waypoints.min.js"></script> |
| | + | <script> |
| | + | function growDiv(param) { |
| | + | var id = param; |
| | + | var growDiv = document.getElementById('grow-'+id); |
| | | | |
| − | @-moz-keyframes swing {
| + | if (growDiv.clientHeight) { |
| − | 20% { -moz-transform: rotate(15deg); }
| + | growDiv.style.height = 0; |
| − | 40% { -moz-transform: rotate(-10deg); }
| + | } else { |
| − | 60% { -moz-transform: rotate(5deg); }
| + | var items = document.querySelectorAll('#grow-' + id + ' .list-group-item'); |
| − | 80% { -moz-transform: rotate(-5deg); }
| + | if (items.length > 0) |
| − | 100% { -moz-transform: rotate(0deg); }
| + | growDiv.style.height = (items.length * items[0].clientHeight) + "px"; |
| − | } | + | } |
| | | | |
| − | @-o-keyframes swing {
| + | if(document.getElementById("menu-item-"+id).className.indexOf("focus") >= 0){ |
| − | 20% { -o-transform: rotate(15deg); }
| + | document.getElementById("menu-item-"+id).className = document.getElementById("menu-item-"+id).className.replace("focus", ""); |
| − | 40% { -o-transform: rotate(-10deg); }
| + | } else{ |
| − | 60% { -o-transform: rotate(5deg); }
| + | document.getElementById("menu-item-"+id).className += " focus"; |
| − | 80% { -o-transform: rotate(-5deg); }
| + | } |
| − | 100% { -o-transform: rotate(0deg); }
| + | |
| − | } | + | |
| | | | |
| − | @keyframes swing {
| + | event.preventDefault(); |
| − | 20% { transform: rotate(15deg); }
| + | } |
| − | 40% { transform: rotate(-10deg); }
| + | |
| − | 60% { transform: rotate(5deg); }
| + | |
| − | 80% { transform: rotate(-5deg); }
| + | |
| − | 100% { transform: rotate(0deg); }
| + | |
| − | } | + | |
| | | | |
| − | .swing {
| + | var $head = $( '#ha-header' ); |
| − | -webkit-transform-origin: top center;
| + | $( '.ha-waypoint' ).each( function(i) { |
| − | -moz-transform-origin: top center;
| + | var $el = $( this ), |
| − | -o-transform-origin: top center;
| + | animClassDown = $el.data( 'animateDown' ), |
| − | transform-origin: top center;
| + | animClassUp = $el.data( 'animateUp' ); |
| − | -webkit-animation-name: swing;
| + | |
| − | -moz-animation-name: swing;
| + | |
| − | -o-animation-name: swing;
| + | |
| − | animation-name: swing;
| + | |
| − | }
| + | |
| − | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
| + | |
| | | | |
| − | @-webkit-keyframes wobble {
| + | $el.waypoint( function( direction ) { |
| − | 0% { -webkit-transform: translateX(0%); }
| + | if( !(direction !== 'down' || !animClassDown) ) { |
| − | 15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
| + | $head.attr('class', 'ha-header ' + animClassDown); |
| − | 30% { -webkit-transform: translateX(20%) rotate(3deg); }
| + | } |
| − | 45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
| + | else if( !(direction !== 'up' || !animClassUp) ){ |
| − | 60% { -webkit-transform: translateX(10%) rotate(2deg); }
| + | $head.attr('class', 'ha-header ' + animClassUp); |
| − | 75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
| + | } |
| − | 100% { -webkit-transform: translateX(0%); }
| + | }, { offset: '100%' } ); |
| − | } | + | } ); |
| | | | |
| − | @-moz-keyframes wobble {
| + | (function($) { |
| − | 0% { -moz-transform: translateX(0%); }
| + | |
| − | 15% { -moz-transform: translateX(-25%) rotate(-5deg); }
| + | |
| − | 30% { -moz-transform: translateX(20%) rotate(3deg); }
| + | |
| − | 45% { -moz-transform: translateX(-15%) rotate(-3deg); }
| + | |
| − | 60% { -moz-transform: translateX(10%) rotate(2deg); }
| + | |
| − | 75% { -moz-transform: translateX(-5%) rotate(-1deg); }
| + | |
| − | 100% { -moz-transform: translateX(0%); }
| + | |
| − | }
| + | |
| | | | |
| − | @-o-keyframes wobble {
| + | var setCss = function() { |
| − | 0% { -o-transform: translateX(0%); }
| + | if($(window).width() <= 550) { |
| − | 15% { -o-transform: translateX(-25%) rotate(-5deg); }
| + | $('#nus_logo').css('left', "15%"); |
| − | 30% { -o-transform: translateX(20%) rotate(3deg); }
| + | $('#sci_logo').css('display', "none"); |
| − | 45% { -o-transform: translateX(-15%) rotate(-3deg); }
| + | $('#sps_logo').css('display', "none"); |
| − | 60% { -o-transform: translateX(10%) rotate(2deg); }
| + | $('#igem_logo').css('display', "none"); |
| − | 75% { -o-transform: translateX(-5%) rotate(-1deg); }
| + | }else{ |
| − | 100% { -o-transform: translateX(0%); }
| + | $('#nus_logo').css('left', "0%"); |
| − | } | + | $('#sci_logo').css('display', "block"); |
| | + | $('#sps_logo').css('display', "block"); |
| | + | $('#igem_logo').css('display', "block"); |
| | + | } |
| | + | }; |
| | | | |
| − | @keyframes wobble {
| + | $(document).ready(function() { |
| − | 0% { transform: translateX(0%); }
| + | setCss(); |
| − | 15% { transform: translateX(-25%) rotate(-5deg); }
| + | $(window).resize(setCss); |
| − | 30% { transform: translateX(20%) rotate(3deg); }
| + | }); |
| − | 45% { transform: translateX(-15%) rotate(-3deg); }
| + | |
| − | 60% { transform: translateX(10%) rotate(2deg); }
| + | |
| − | 75% { transform: translateX(-5%) rotate(-1deg); }
| + | |
| − | 100% { transform: translateX(0%); }
| + | |
| − | }
| + | |
| | | | |
| − | .wobble {
| + | })(jQuery); |
| − | -webkit-animation-name: wobble;
| + | </script> |
| − | -moz-animation-name: wobble;
| + | |
| − | -o-animation-name: wobble;
| + | |
| − | animation-name: wobble;
| + | |
| − | }
| + | |
| − | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
| + | |
| | | | |
| − | @-webkit-keyframes pulse {
| + | <script> |
| − | 0% { -webkit-transform: scale(1); }
| + | |
| − | 50% { -webkit-transform: scale(1.1); }
| + | |
| − | 100% { -webkit-transform: scale(1); }
| + | |
| − | }
| + | |
| − | @-moz-keyframes pulse {
| + | |
| − | 0% { -moz-transform: scale(1); }
| + | |
| − | 50% { -moz-transform: scale(1.1); }
| + | |
| − | 100% { -moz-transform: scale(1); }
| + | |
| − | }
| + | |
| − | @-o-keyframes pulse {
| + | |
| − | 0% { -o-transform: scale(1); }
| + | |
| − | 50% { -o-transform: scale(1.1); }
| + | |
| − | 100% { -o-transform: scale(1); }
| + | |
| − | }
| + | |
| − | @keyframes pulse {
| + | |
| − | 0% { transform: scale(1); }
| + | |
| − | 50% { transform: scale(1.1); }
| + | |
| − | 100% { transform: scale(1); }
| + | |
| − | }
| + | |
| | | | |
| − | .pulse {
| + | $( "#canvas" ) |
| − | -webkit-animation-name: pulse;
| + | .mouseleave(function() { |
| − | -moz-animation-name: pulse;
| + | $('#Cancer_cell_body_text').css('display', 'none'); |
| − | -o-animation-name: pulse;
| + | $('#Cancer_cell_body').css('opacity', '1'); |
| − | animation-name: pulse;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes flip {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform: perspective(400px) rotateY(0);
| + | |
| − | -webkit-animation-timing-function: ease-out;
| + | |
| − | }
| + | |
| − | 40% {
| + | |
| − | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
| + | |
| − | -webkit-animation-timing-function: ease-out;
| + | |
| − | }
| + | |
| − | 50% {
| + | |
| − | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
| + | |
| − | -webkit-animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | 80% {
| + | |
| − | -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
| + | |
| − | -webkit-animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: perspective(400px) scale(1);
| + | |
| − | -webkit-animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-moz-keyframes flip {
| + | |
| − | 0% {
| + | |
| − | -moz-transform: perspective(400px) rotateY(0);
| + | |
| − | -moz-animation-timing-function: ease-out;
| + | |
| − | }
| + | |
| − | 40% {
| + | |
| − | -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
| + | |
| − | -moz-animation-timing-function: ease-out;
| + | |
| − | }
| + | |
| − | 50% {
| + | |
| − | -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
| + | |
| − | -moz-animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | 80% {
| + | |
| − | -moz-transform: perspective(400px) rotateY(360deg) scale(.95);
| + | |
| − | -moz-animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | -moz-transform: perspective(400px) scale(1);
| + | |
| − | -moz-animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-o-keyframes flip {
| + | |
| − | 0% {
| + | |
| − | -o-transform: perspective(400px) rotateY(0);
| + | |
| − | -o-animation-timing-function: ease-out;
| + | |
| − | }
| + | |
| − | 40% {
| + | |
| − | -o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
| + | |
| − | -o-animation-timing-function: ease-out;
| + | |
| − | }
| + | |
| − | 50% {
| + | |
| − | -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
| + | |
| − | -o-animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | 80% {
| + | |
| − | -o-transform: perspective(400px) rotateY(360deg) scale(.95);
| + | |
| − | -o-animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | -o-transform: perspective(400px) scale(1);
| + | |
| − | -o-animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes flip {
| + | |
| − | 0% {
| + | |
| − | transform: perspective(400px) rotateY(0);
| + | |
| − | animation-timing-function: ease-out;
| + | |
| − | }
| + | |
| − | 40% {
| + | |
| − | transform: perspective(400px) translateZ(150px) rotateY(170deg);
| + | |
| − | animation-timing-function: ease-out;
| + | |
| − | }
| + | |
| − | 50% {
| + | |
| − | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
| + | |
| − | animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | 80% {
| + | |
| − | transform: perspective(400px) rotateY(360deg) scale(.95);
| + | |
| − | animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | transform: perspective(400px) scale(1);
| + | |
| − | animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | .flip {
| + | $('#CD44v6_text').css('display', 'none'); |
| − | -webkit-backface-visibility: visible !important;
| + | $('#CD44v6').css('opacity', '1'); |
| − | -webkit-animation-name: flip;
| + | |
| − | -moz-backface-visibility: visible !important;
| + | |
| − | -moz-animation-name: flip;
| + | |
| − | -o-backface-visibility: visible !important;
| + | |
| − | -o-animation-name: flip;
| + | |
| − | backface-visibility: visible !important;
| + | |
| − | animation-name: flip;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes flipInX {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform: perspective(400px) rotateX(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 40% {
| + | |
| − | -webkit-transform: perspective(400px) rotateX(-10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | -webkit-transform: perspective(400px) rotateX(10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: perspective(400px) rotateX(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-moz-keyframes flipInX {
| + | |
| − | 0% {
| + | |
| − | -moz-transform: perspective(400px) rotateX(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 40% {
| + | |
| − | -moz-transform: perspective(400px) rotateX(-10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | -moz-transform: perspective(400px) rotateX(10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform: perspective(400px) rotateX(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-o-keyframes flipInX {
| + | |
| − | 0% {
| + | |
| − | -o-transform: perspective(400px) rotateX(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 40% {
| + | |
| − | -o-transform: perspective(400px) rotateX(-10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | -o-transform: perspective(400px) rotateX(10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform: perspective(400px) rotateX(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes flipInX {
| + | |
| − | 0% {
| + | |
| − | transform: perspective(400px) rotateX(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 40% {
| + | |
| − | transform: perspective(400px) rotateX(-10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | transform: perspective(400px) rotateX(10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform: perspective(400px) rotateX(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | .flipInX {
| + | $('#Invasin_and_LLO_text').css('display', 'none'); |
| − | -webkit-backface-visibility: visible !important;
| + | $('#Invasin_and_LLO').css('opacity', '1'); |
| − | -webkit-animation-name: flipInX;
| + | |
| − | -moz-backface-visibility: visible !important;
| + | |
| − | -moz-animation-name: flipInX;
| + | |
| − | -o-backface-visibility: visible !important;
| + | |
| − | -o-animation-name: flipInX;
| + | |
| − | backface-visibility: visible !important;
| + | |
| − | animation-name: flipInX;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes flipOutX {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform: perspective(400px) rotateX(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: perspective(400px) rotateX(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | @-moz-keyframes flipOutX {
| + | $('#Quorum_Sensing_text').css('display', 'none'); |
| − | 0% {
| + | $('#Quorum_Sensing').css('opacity', '1'); |
| − | -moz-transform: perspective(400px) rotateX(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | -moz-transform: perspective(400px) rotateX(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | @-o-keyframes flipOutX {
| + | }); |
| − | 0% {
| + | |
| − | -o-transform: perspective(400px) rotateX(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | -o-transform: perspective(400px) rotateX(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | @keyframes flipOutX {
| |
| − | 0% {
| |
| − | transform: perspective(400px) rotateX(0deg);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | 100% {
| |
| − | transform: perspective(400px) rotateX(90deg);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | }
| |
| | | | |
| − | .flipOutX { | + | $( "div.CD44v6" ) |
| − | -webkit-animation-name: flipOutX;
| + | .mouseenter(function() { |
| − | -webkit-backface-visibility: visible !important;
| + | $('#Cancer_cell_body').css('opacity', '0.2'); |
| − | -moz-animation-name: flipOutX;
| + | $('#Cancer_cell_body_text').css('display', 'none'); |
| − | -moz-backface-visibility: visible !important;
| + | $('#Quorum_Sensing').css('opacity', '0.2'); |
| − | -o-animation-name: flipOutX;
| + | $('#Quorum_Sensing_text').css('display', 'none'); |
| − | -o-backface-visibility: visible !important;
| + | $('#Invasin_and_LLO').css('opacity', '0.2'); |
| − | animation-name: flipOutX;
| + | $('#Invasin_and_LLO_text').css('display', 'none'); |
| − | backface-visibility: visible !important;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes flipInY {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform: perspective(400px) rotateY(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 40% {
| + | |
| − | -webkit-transform: perspective(400px) rotateY(-10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | -webkit-transform: perspective(400px) rotateY(10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: perspective(400px) rotateY(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-moz-keyframes flipInY {
| + | |
| − | 0% {
| + | |
| − | -moz-transform: perspective(400px) rotateY(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 40% {
| + | |
| − | -moz-transform: perspective(400px) rotateY(-10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | -moz-transform: perspective(400px) rotateY(10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform: perspective(400px) rotateY(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-o-keyframes flipInY {
| + | |
| − | 0% {
| + | |
| − | -o-transform: perspective(400px) rotateY(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 40% {
| + | |
| − | -o-transform: perspective(400px) rotateY(-10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | -o-transform: perspective(400px) rotateY(10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform: perspective(400px) rotateY(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes flipInY {
| + | |
| − | 0% {
| + | |
| − | transform: perspective(400px) rotateY(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 40% {
| + | |
| − | transform: perspective(400px) rotateY(-10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | transform: perspective(400px) rotateY(10deg);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform: perspective(400px) rotateY(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | .flipInY {
| + | $('#CD44v6').css('opacity', '1'); |
| − | -webkit-backface-visibility: visible !important;
| + | $('#CD44v6_text').css('display', 'block'); |
| − | -webkit-animation-name: flipInY;
| + | $('#CD44v6_text').textillate({ in: { |
| − | -moz-backface-visibility: visible !important;
| + | effect: 'fadeInUpBig', |
| − | -moz-animation-name: flipInY;
| + | sync: true |
| − | -o-backface-visibility: visible !important;
| + | } }); |
| − | -o-animation-name: flipInY;
| + | }) |
| − | backface-visibility: visible !important;
| + | .mouseleave(function() { |
| − | animation-name: flipInY;
| + | $('#CD44v6_text').css('display', 'none'); |
| − | }
| + | $('.CD44v6_text').textillate('start'); |
| − | @-webkit-keyframes flipOutY {
| + | }); |
| − | 0% {
| + | |
| − | -webkit-transform: perspective(400px) rotateY(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: perspective(400px) rotateY(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-moz-keyframes flipOutY {
| + | |
| − | 0% {
| + | |
| − | -moz-transform: perspective(400px) rotateY(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | -moz-transform: perspective(400px) rotateY(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | } | + | |
| − | @-o-keyframes flipOutY {
| + | |
| − | 0% {
| + | |
| − | -o-transform: perspective(400px) rotateY(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | -o-transform: perspective(400px) rotateY(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes flipOutY {
| + | |
| − | 0% {
| + | |
| − | transform: perspective(400px) rotateY(0deg);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | transform: perspective(400px) rotateY(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | .flipOutY {
| |
| − | -webkit-backface-visibility: visible !important;
| |
| − | -webkit-animation-name: flipOutY;
| |
| − | -moz-backface-visibility: visible !important;
| |
| − | -moz-animation-name: flipOutY;
| |
| − | -o-backface-visibility: visible !important;
| |
| − | -o-animation-name: flipOutY;
| |
| − | backface-visibility: visible !important;
| |
| − | animation-name: flipOutY;
| |
| − | }
| |
| − | @-webkit-keyframes fadeIn {
| |
| − | 0% {opacity: 0;}
| |
| − | 100% {opacity: 1;}
| |
| − | }
| |
| | | | |
| − | @-moz-keyframes fadeIn {
| + | $( "div.Cancer_cell_body" ) |
| − | 0% {opacity: 0;}
| + | .mouseenter(function() { |
| − | 100% {opacity: 1;}
| + | $('#CD44v6_text').css('display', 'none'); |
| − | }
| + | $('#CD44v6').css('opacity', '0.2'); |
| | + | $('#Quorum_Sensing').css('opacity', '0.2'); |
| | + | $('#Quorum_Sensing_text').css('display', 'none'); |
| | + | $('#Invasin_and_LLO').css('opacity', '0.2'); |
| | + | $('#Invasin_and_LLO_text').css('display', 'none'); |
| | | | |
| − | @-o-keyframes fadeIn {
| |
| − | 0% {opacity: 0;}
| |
| − | 100% {opacity: 1;}
| |
| − | }
| |
| | | | |
| − | @keyframes fadeIn {
| + | $('#Cancer_cell_body_text').css('display', 'block'); |
| − | 0% {opacity: 0;}
| + | $('#Cancer_cell_body').css('opacity', '1'); |
| − | 100% {opacity: 1;}
| + | $('#Cancer_cell_body_text').textillate({ in: { |
| − | } | + | effect: 'fadeInRightBig', |
| | + | sync: true |
| | + | } }); |
| | + | }) |
| | + | .mouseleave(function() { |
| | + | $('#Cancer_cell_body_text').css('display', 'none'); |
| | + | $('#Cancer_cell_body_text').textillate('start'); |
| | + | }); |
| | | | |
| − | .fadeIn {
| |
| − | -webkit-animation-name: fadeIn;
| |
| − | -moz-animation-name: fadeIn;
| |
| − | -o-animation-name: fadeIn;
| |
| − | animation-name: fadeIn;
| |
| − | }
| |
| − | @-webkit-keyframes fadeInUp {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateY(20px);
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| | | | |
| − | @-moz-keyframes fadeInUp {
| + | $( "div.Invasin_and_LLO" ) |
| − | 0% {
| + | .mouseenter(function() { |
| − | opacity: 0;
| + | $('#CD44v6_text').css('display', 'none'); |
| − | -moz-transform: translateY(20px);
| + | $('#CD44v6').css('opacity', '0.2'); |
| − | }
| + | $('#Cancer_cell_body').css('opacity', '0.2'); |
| − |
| + | $('#Cancer_cell_body_text').css('display', 'none'); |
| − | 100% {
| + | $('#Quorum_Sensing').css('opacity', '0.2'); |
| − | opacity: 1;
| + | $('#Quorum_Sensing_text').css('display', 'none'); |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | @-o-keyframes fadeInUp {
| + | $('#Invasin_and_LLO_text').css('display', 'block'); |
| − | 0% {
| + | $('#Invasin_and_LLO').css('opacity', '1'); |
| − | opacity: 0;
| + | $('#Invasin_and_LLO_text').textillate({ in: { |
| − | -o-transform: translateY(20px);
| + | effect: 'fadeInDownBig', |
| − | }
| + | sync: true |
| − |
| + | } }); |
| − | 100% {
| + | }) |
| − | opacity: 1;
| + | .mouseleave(function() { |
| − | -o-transform: translateY(0);
| + | $('#Invasin_and_LLO_text').css('display', 'none'); |
| − | }
| + | $('#Invasin_and_LLO_text').textillate('start'); |
| − | } | + | }); |
| | | | |
| − | @keyframes fadeInUp {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | transform: translateY(20px);
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| | | | |
| − | .fadeInUp { | + | $( "div.Quorum_Sensing" ) |
| − | -webkit-animation-name: fadeInUp;
| + | .mouseenter(function() { |
| − | -moz-animation-name: fadeInUp;
| + | $('#CD44v6_text').css('display', 'none'); |
| − | -o-animation-name: fadeInUp;
| + | $('#CD44v6').css('opacity', '0.2'); |
| − | animation-name: fadeInUp;
| + | $('#Cancer_cell_body').css('opacity', '0.2'); |
| − | }
| + | $('#Cancer_cell_body_text').css('display', 'none'); |
| − | @-webkit-keyframes fadeInDown {
| + | $('#Invasin_and_LLO').css('opacity', '0.2'); |
| − | 0% {
| + | $('#Invasin_and_LLO_text').css('display', 'none'); |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | @-moz-keyframes fadeInDown {
| + | $('#Quorum_Sensing_text').css('display', 'block'); |
| − | 0% {
| + | $('#Quorum_Sensing').css('opacity', '1'); |
| − | opacity: 0;
| + | $('#Quorum_Sensing_text').textillate({ in: { |
| − | -moz-transform: translateY(-20px);
| + | effect: 'fadeInLeftBig', |
| − | }
| + | sync: true |
| − |
| + | } }); |
| − | 100% {
| + | }) |
| − | opacity: 1;
| + | .mouseleave(function() { |
| − | -moz-transform: translateY(0);
| + | $('#Quorum_Sensing_text').css('display', 'none'); |
| − | }
| + | $('#Quorum_Sensing_text').textillate('start'); |
| − | } | + | }); |
| | | | |
| − | @-o-keyframes fadeInDown {
| + | // $('#CD44v6').mouseenter(function() { |
| − | 0% {
| + | // $('#CD44v6').css('display', 'none'); |
| − | opacity: 0;
| + | // }); |
| − | -o-transform: translateY(-20px);
| + | // $( "#CD44v6" ).mouseleave(function() { |
| − | }
| + | // $('#CD44v6').css('display', 'block'); |
| − |
| + | // }); |
| − | 100% {
| + | </script> |
| − | opacity: 1;
| + | <!-- text animation--> |
| − | -o-transform: translateY(0);
| + | <link rel="stylesheet" type="text/css" href="css/animate.css" /> |
| − | }
| + | <script src="js/jquery.textillate.js"></script> |
| − | }
| + | <script src="js/jquery.lettering.js"></script> |
| − | | + | <!-- end of text animation--> |
| − | @keyframes fadeInDown {
| + | |
| − | 0% {
| + | <!-- and operator --> |
| − | opacity: 0;
| + | <script> |
| − | transform: translateY(-20px);
| + | var andop = function (a, b) { |
| − | }
| + | if (a) { |
| − |
| + | if (b) { |
| − | 100% {
| + | return true; |
| − | opacity: 1;
| + | } else { |
| − | transform: translateY(0);
| + | return false; |
| − | }
| + | } |
| − | }
| + | } else { |
| − | | + | return false; |
| − | .fadeInDown {
| + | } |
| − | -webkit-animation-name: fadeInDown;
| + | }; |
| − | -moz-animation-name: fadeInDown;
| + | </script> |
| − | -o-animation-name: fadeInDown;
| + | </body> |
| − | animation-name: fadeInDown;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeInLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeInLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeInLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeInLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeInLeft {
| + | |
| − | -webkit-animation-name: fadeInLeft;
| + | |
| − | -moz-animation-name: fadeInLeft;
| + | |
| − | -o-animation-name: fadeInLeft;
| + | |
| − | animation-name: fadeInLeft;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeInRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeInRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeInRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeInRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeInRight {
| + | |
| − | -webkit-animation-name: fadeInRight;
| + | |
| − | -moz-animation-name: fadeInRight;
| + | |
| − | -o-animation-name: fadeInRight;
| + | |
| − | animation-name: fadeInRight;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeInUpBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeInUpBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeInUpBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeInUpBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeInUpBig {
| + | |
| − | -webkit-animation-name: fadeInUpBig;
| + | |
| − | -moz-animation-name: fadeInUpBig;
| + | |
| − | -o-animation-name: fadeInUpBig;
| + | |
| − | animation-name: fadeInUpBig;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeInDownBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeInDownBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeInDownBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeInDownBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeInDownBig {
| + | |
| − | -webkit-animation-name: fadeInDownBig;
| + | |
| − | -moz-animation-name: fadeInDownBig;
| + | |
| − | -o-animation-name: fadeInDownBig;
| + | |
| − | animation-name: fadeInDownBig;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeInLeftBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-moz-keyframes fadeInLeftBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-o-keyframes fadeInLeftBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes fadeInLeftBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeInLeftBig {
| + | |
| − | -webkit-animation-name: fadeInLeftBig;
| + | |
| − | -moz-animation-name: fadeInLeftBig;
| + | |
| − | -o-animation-name: fadeInLeftBig;
| + | |
| − | animation-name: fadeInLeftBig;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeInRightBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeInRightBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeInRightBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeInRightBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeInRightBig {
| + | |
| − | -webkit-animation-name: fadeInRightBig;
| + | |
| − | -moz-animation-name: fadeInRightBig;
| + | |
| − | -o-animation-name: fadeInRightBig;
| + | |
| − | animation-name: fadeInRightBig;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeOut {
| + | |
| − | 0% {opacity: 1;}
| + | |
| − | 100% {opacity: 0;}
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeOut {
| + | |
| − | 0% {opacity: 1;}
| + | |
| − | 100% {opacity: 0;}
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeOut {
| + | |
| − | 0% {opacity: 1;}
| + | |
| − | 100% {opacity: 0;}
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeOut {
| + | |
| − | 0% {opacity: 1;}
| + | |
| − | 100% {opacity: 0;}
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeOut {
| + | |
| − | -webkit-animation-name: fadeOut;
| + | |
| − | -moz-animation-name: fadeOut;
| + | |
| − | -o-animation-name: fadeOut;
| + | |
| − | animation-name: fadeOut;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeOutUp {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(-20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-moz-keyframes fadeOutUp {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(-20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-o-keyframes fadeOutUp {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(-20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes fadeOutUp {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(-20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeOutUp {
| + | |
| − | -webkit-animation-name: fadeOutUp;
| + | |
| − | -moz-animation-name: fadeOutUp;
| + | |
| − | -o-animation-name: fadeOutUp;
| + | |
| − | animation-name: fadeOutUp;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeOutDown {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeOutDown {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeOutDown {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeOutDown {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeOutDown {
| + | |
| − | -webkit-animation-name: fadeOutDown;
| + | |
| − | -moz-animation-name: fadeOutDown;
| + | |
| − | -o-animation-name: fadeOutDown;
| + | |
| − | animation-name: fadeOutDown;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeOutLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(-20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeOutLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(-20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeOutLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(-20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeOutLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(-20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeOutLeft {
| + | |
| − | -webkit-animation-name: fadeOutLeft;
| + | |
| − | -moz-animation-name: fadeOutLeft;
| + | |
| − | -o-animation-name: fadeOutLeft;
| + | |
| − | animation-name: fadeOutLeft;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeOutRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeOutRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeOutRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeOutRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(20px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeOutRight {
| + | |
| − | -webkit-animation-name: fadeOutRight;
| + | |
| − | -moz-animation-name: fadeOutRight;
| + | |
| − | -o-animation-name: fadeOutRight;
| + | |
| − | animation-name: fadeOutRight;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeOutUpBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeOutUpBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeOutUpBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeOutUpBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeOutUpBig {
| + | |
| − | -webkit-animation-name: fadeOutUpBig;
| + | |
| − | -moz-animation-name: fadeOutUpBig;
| + | |
| − | -o-animation-name: fadeOutUpBig;
| + | |
| − | animation-name: fadeOutUpBig;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeOutDownBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeOutDownBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeOutDownBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeOutDownBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeOutDownBig {
| + | |
| − | -webkit-animation-name: fadeOutDownBig;
| + | |
| − | -moz-animation-name: fadeOutDownBig;
| + | |
| − | -o-animation-name: fadeOutDownBig;
| + | |
| − | animation-name: fadeOutDownBig;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeOutLeftBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes fadeOutLeftBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes fadeOutLeftBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeOutLeftBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeOutLeftBig {
| + | |
| − | -webkit-animation-name: fadeOutLeftBig;
| + | |
| − | -moz-animation-name: fadeOutLeftBig;
| + | |
| − | -o-animation-name: fadeOutLeftBig;
| + | |
| − | animation-name: fadeOutLeftBig;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes fadeOutRightBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-moz-keyframes fadeOutRightBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-o-keyframes fadeOutRightBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes fadeOutRightBig {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .fadeOutRightBig {
| + | |
| − | -webkit-animation-name: fadeOutRightBig;
| + | |
| − | -moz-animation-name: fadeOutRightBig;
| + | |
| − | -o-animation-name: fadeOutRightBig;
| + | |
| − | animation-name: fadeOutRightBig;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceIn {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: scale(.3);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 50% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: scale(1.05);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | -webkit-transform: scale(.9);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: scale(1);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes bounceIn {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: scale(.3);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 50% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: scale(1.05);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | -moz-transform: scale(.9);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform: scale(1);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceIn {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: scale(.3);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 50% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: scale(1.05);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | -o-transform: scale(.9);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform: scale(1);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceIn {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: scale(.3);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 50% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: scale(1.05);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 70% {
| + | |
| − | transform: scale(.9);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform: scale(1);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceIn {
| + | |
| − | -webkit-animation-name: bounceIn;
| + | |
| − | -moz-animation-name: bounceIn;
| + | |
| − | -o-animation-name: bounceIn;
| + | |
| − | animation-name: bounceIn;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceInUp {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(-30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -webkit-transform: translateY(10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-moz-keyframes bounceInUp {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(-30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -moz-transform: translateY(10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceInUp {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(-30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -o-transform: translateY(10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceInUp {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(-30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | transform: translateY(10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceInUp {
| + | |
| − | -webkit-animation-name: bounceInUp;
| + | |
| − | -moz-animation-name: bounceInUp;
| + | |
| − | -o-animation-name: bounceInUp;
| + | |
| − | animation-name: bounceInUp;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceInDown {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -webkit-transform: translateY(-10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes bounceInDown {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -moz-transform: translateY(-10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceInDown {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -o-transform: translateY(-10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceInDown {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | transform: translateY(-10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceInDown {
| + | |
| − | -webkit-animation-name: bounceInDown;
| + | |
| − | -moz-animation-name: bounceInDown;
| + | |
| − | -o-animation-name: bounceInDown;
| + | |
| − | animation-name: bounceInDown;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceInLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -webkit-transform: translateX(-10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes bounceInLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -moz-transform: translateX(-10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceInLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -o-transform: translateX(-10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceInLeft {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | transform: translateX(-10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceInLeft {
| + | |
| − | -webkit-animation-name: bounceInLeft;
| + | |
| − | -moz-animation-name: bounceInLeft;
| + | |
| − | -o-animation-name: bounceInLeft;
| + | |
| − | animation-name: bounceInLeft;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceInRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(-30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -webkit-transform: translateX(10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes bounceInRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(-30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -moz-transform: translateX(10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceInRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(-30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | -o-transform: translateX(10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceInRight {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(2000px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 60% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(-30px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 80% {
| + | |
| − | transform: translateX(10px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceInRight {
| + | |
| − | -webkit-animation-name: bounceInRight;
| + | |
| − | -moz-animation-name: bounceInRight;
| + | |
| − | -o-animation-name: bounceInRight;
| + | |
| − | animation-name: bounceInRight;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceOut {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform: scale(1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 25% {
| + | |
| − | -webkit-transform: scale(.95);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 50% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: scale(1.1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: scale(.3);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes bounceOut {
| + | |
| − | 0% {
| + | |
| − | -moz-transform: scale(1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 25% {
| + | |
| − | -moz-transform: scale(.95);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 50% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: scale(1.1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: scale(.3);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceOut {
| + | |
| − | 0% {
| + | |
| − | -o-transform: scale(1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 25% {
| + | |
| − | -o-transform: scale(.95);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 50% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: scale(1.1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: scale(.3);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceOut {
| + | |
| − | 0% {
| + | |
| − | transform: scale(1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 25% {
| + | |
| − | transform: scale(.95);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 50% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: scale(1.1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: scale(.3);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceOut {
| + | |
| − | -webkit-animation-name: bounceOut;
| + | |
| − | -moz-animation-name: bounceOut;
| + | |
| − | -o-animation-name: bounceOut;
| + | |
| − | animation-name: bounceOut;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceOutUp {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes bounceOutUp {
| + | |
| − | 0% {
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceOutUp {
| + | |
| − | 0% {
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceOutUp {
| + | |
| − | 0% {
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceOutUp {
| + | |
| − | -webkit-animation-name: bounceOutUp;
| + | |
| − | -moz-animation-name: bounceOutUp;
| + | |
| − | -o-animation-name: bounceOutUp;
| + | |
| − | animation-name: bounceOutUp;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceOutDown {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes bounceOutDown {
| + | |
| − | 0% {
| + | |
| − | -moz-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateY(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceOutDown {
| + | |
| − | 0% {
| + | |
| − | -o-transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateY(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateY(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceOutDown {
| + | |
| − | 0% {
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceOutDown {
| + | |
| − | -webkit-animation-name: bounceOutDown;
| + | |
| − | -moz-animation-name: bounceOutDown;
| + | |
| − | -o-animation-name: bounceOutDown;
| + | |
| − | animation-name: bounceOutDown;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceOutLeft {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes bounceOutLeft {
| + | |
| − | 0% {
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceOutLeft {
| + | |
| − | 0% {
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceOutLeft {
| + | |
| − | 0% {
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(-2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceOutLeft {
| + | |
| − | -webkit-animation-name: bounceOutLeft;
| + | |
| − | -moz-animation-name: bounceOutLeft;
| + | |
| − | -o-animation-name: bounceOutLeft;
| + | |
| − | animation-name: bounceOutLeft;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounceOutRight {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes bounceOutRight {
| + | |
| − | 0% {
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes bounceOutRight {
| + | |
| − | 0% {
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounceOutRight {
| + | |
| − | 0% {
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 20% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(-20px);
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(2000px);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .bounceOutRight {
| + | |
| − | -webkit-animation-name: bounceOutRight;
| + | |
| − | -moz-animation-name: bounceOutRight;
| + | |
| − | -o-animation-name: bounceOutRight;
| + | |
| − | animation-name: bounceOutRight;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateIn {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: center center;
| + | |
| − | -webkit-transform: rotate(-200deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: center center;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-moz-keyframes rotateIn {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: center center;
| + | |
| − | -moz-transform: rotate(-200deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: center center;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @-o-keyframes rotateIn {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: center center;
| + | |
| − | -o-transform: rotate(-200deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: center center;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes rotateIn {
| + | |
| − | 0% {
| + | |
| − | transform-origin: center center;
| + | |
| − | transform: rotate(-200deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: center center;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateIn {
| + | |
| − | -webkit-animation-name: rotateIn;
| + | |
| − | -moz-animation-name: rotateIn;
| + | |
| − | -o-animation-name: rotateIn;
| + | |
| − | animation-name: rotateIn;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateInUpLeft {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: left bottom;
| + | |
| − | -webkit-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: left bottom;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rotateInUpLeft {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: left bottom;
| + | |
| − | -moz-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: left bottom;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rotateInUpLeft {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: left bottom;
| + | |
| − | -o-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: left bottom;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rotateInUpLeft {
| + | |
| − | 0% {
| + | |
| − | transform-origin: left bottom;
| + | |
| − | transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: left bottom;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateInUpLeft {
| + | |
| − | -webkit-animation-name: rotateInUpLeft;
| + | |
| − | -moz-animation-name: rotateInUpLeft;
| + | |
| − | -o-animation-name: rotateInUpLeft;
| + | |
| − | animation-name: rotateInUpLeft;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateInDownLeft {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: left bottom;
| + | |
| − | -webkit-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: left bottom;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rotateInDownLeft {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: left bottom;
| + | |
| − | -moz-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: left bottom;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rotateInDownLeft {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: left bottom;
| + | |
| − | -o-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: left bottom;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rotateInDownLeft {
| + | |
| − | 0% {
| + | |
| − | transform-origin: left bottom;
| + | |
| − | transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: left bottom;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateInDownLeft {
| + | |
| − | -webkit-animation-name: rotateInDownLeft;
| + | |
| − | -moz-animation-name: rotateInDownLeft;
| + | |
| − | -o-animation-name: rotateInDownLeft;
| + | |
| − | animation-name: rotateInDownLeft;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateInUpRight {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: right bottom;
| + | |
| − | -webkit-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: right bottom;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rotateInUpRight {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: right bottom;
| + | |
| − | -moz-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: right bottom;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rotateInUpRight {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | -o-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rotateInUpRight {
| + | |
| − | 0% {
| + | |
| − | transform-origin: right bottom;
| + | |
| − | transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: right bottom;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateInUpRight {
| + | |
| − | -webkit-animation-name: rotateInUpRight;
| + | |
| − | -moz-animation-name: rotateInUpRight;
| + | |
| − | -o-animation-name: rotateInUpRight;
| + | |
| − | animation-name: rotateInUpRight;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateInDownRight {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: right bottom;
| + | |
| − | -webkit-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: right bottom;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rotateInDownRight {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: right bottom;
| + | |
| − | -moz-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: right bottom;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rotateInDownRight {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | -o-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rotateInDownRight {
| + | |
| − | 0% {
| + | |
| − | transform-origin: right bottom;
| + | |
| − | transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: right bottom;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateInDownRight {
| + | |
| − | -webkit-animation-name: rotateInDownRight;
| + | |
| − | -moz-animation-name: rotateInDownRight;
| + | |
| − | -o-animation-name: rotateInDownRight;
| + | |
| − | animation-name: rotateInDownRight;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateOut {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: center center;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: center center;
| + | |
| − | -webkit-transform: rotate(200deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rotateOut {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: center center;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: center center;
| + | |
| − | -moz-transform: rotate(200deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rotateOut {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: center center;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: center center;
| + | |
| − | -o-transform: rotate(200deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rotateOut {
| + | |
| − | 0% {
| + | |
| − | transform-origin: center center;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: center center;
| + | |
| − | transform: rotate(200deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateOut {
| + | |
| − | -webkit-animation-name: rotateOut;
| + | |
| − | -moz-animation-name: rotateOut;
| + | |
| − | -o-animation-name: rotateOut;
| + | |
| − | animation-name: rotateOut;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateOutUpLeft {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: left bottom;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: left bottom;
| + | |
| − | -webkit-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rotateOutUpLeft {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: left bottom;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: left bottom;
| + | |
| − | -moz-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rotateOutUpLeft {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: left bottom;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: left bottom;
| + | |
| − | -o-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rotateOutUpLeft {
| + | |
| − | 0% {
| + | |
| − | transform-origin: left bottom;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: left bottom;
| + | |
| − | transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateOutUpLeft {
| + | |
| − | -webkit-animation-name: rotateOutUpLeft;
| + | |
| − | -moz-animation-name: rotateOutUpLeft;
| + | |
| − | -o-animation-name: rotateOutUpLeft;
| + | |
| − | animation-name: rotateOutUpLeft;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateOutDownLeft {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: left bottom;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: left bottom;
| + | |
| − | -webkit-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rotateOutDownLeft {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: left bottom;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: left bottom;
| + | |
| − | -moz-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rotateOutDownLeft {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: left bottom;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: left bottom;
| + | |
| − | -o-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rotateOutDownLeft {
| + | |
| − | 0% {
| + | |
| − | transform-origin: left bottom;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: left bottom;
| + | |
| − | transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateOutDownLeft {
| + | |
| − | -webkit-animation-name: rotateOutDownLeft;
| + | |
| − | -moz-animation-name: rotateOutDownLeft;
| + | |
| − | -o-animation-name: rotateOutDownLeft;
| + | |
| − | animation-name: rotateOutDownLeft;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateOutUpRight {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: right bottom;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: right bottom;
| + | |
| − | -webkit-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rotateOutUpRight {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: right bottom;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: right bottom;
| + | |
| − | -moz-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rotateOutUpRight {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | -o-transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rotateOutUpRight {
| + | |
| − | 0% {
| + | |
| − | transform-origin: right bottom;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: right bottom;
| + | |
| − | transform: rotate(90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateOutUpRight {
| + | |
| − | -webkit-animation-name: rotateOutUpRight;
| + | |
| − | -moz-animation-name: rotateOutUpRight;
| + | |
| − | -o-animation-name: rotateOutUpRight;
| + | |
| − | animation-name: rotateOutUpRight;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes rotateOutDownRight {
| + | |
| − | 0% {
| + | |
| − | -webkit-transform-origin: right bottom;
| + | |
| − | -webkit-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -webkit-transform-origin: right bottom;
| + | |
| − | -webkit-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rotateOutDownRight {
| + | |
| − | 0% {
| + | |
| − | -moz-transform-origin: right bottom;
| + | |
| − | -moz-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -moz-transform-origin: right bottom;
| + | |
| − | -moz-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rotateOutDownRight {
| + | |
| − | 0% {
| + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | -o-transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | -o-transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rotateOutDownRight {
| + | |
| − | 0% {
| + | |
| − | transform-origin: right bottom;
| + | |
| − | transform: rotate(0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | 100% {
| + | |
| − | transform-origin: right bottom;
| + | |
| − | transform: rotate(-90deg);
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rotateOutDownRight {
| + | |
| − | -webkit-animation-name: rotateOutDownRight;
| + | |
| − | -moz-animation-name: rotateOutDownRight;
| + | |
| − | -o-animation-name: rotateOutDownRight;
| + | |
| − | animation-name: rotateOutDownRight;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes hinge {
| + | |
| − | 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
| + | |
| − | 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
| + | |
| − | 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
| + | |
| − | 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
| + | |
| − | 100% { -webkit-transform: translateY(700px); opacity: 0; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes hinge {
| + | |
| − | 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
| + | |
| − | 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
| + | |
| − | 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
| + | |
| − | 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
| + | |
| − | 100% { -moz-transform: translateY(700px); opacity: 0; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes hinge {
| + | |
| − | 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
| + | |
| − | 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
| + | |
| − | 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
| + | |
| − | 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
| + | |
| − | 100% { -o-transform: translateY(700px); opacity: 0; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes hinge {
| + | |
| − | 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
| + | |
| − | 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
| + | |
| − | 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
| + | |
| − | 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
| + | |
| − | 100% { transform: translateY(700px); opacity: 0; }
| + | |
| − | }
| + | |
| − | | + | |
| − | .hinge {
| + | |
| − | -webkit-animation-name: hinge;
| + | |
| − | -moz-animation-name: hinge;
| + | |
| − | -o-animation-name: hinge;
| + | |
| − | animation-name: hinge;
| + | |
| − | }
| + | |
| − | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | + | |
| − | | + | |
| − | @-webkit-keyframes rollIn {
| + | |
| − | 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
| + | |
| − | 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rollIn {
| + | |
| − | 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
| + | |
| − | 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rollIn {
| + | |
| − | 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
| + | |
| − | 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rollIn {
| + | |
| − | 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
| + | |
| − | 100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rollIn {
| + | |
| − | -webkit-animation-name: rollIn;
| + | |
| − | -moz-animation-name: rollIn;
| + | |
| − | -o-animation-name: rollIn;
| + | |
| − | animation-name: rollIn;
| + | |
| − | }
| + | |
| − | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
| + | |
| − | | + | |
| − | @-webkit-keyframes rollOut {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateX(0px) rotate(0deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateX(100%) rotate(120deg);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes rollOut {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -moz-transform: translateX(0px) rotate(0deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -moz-transform: translateX(100%) rotate(120deg);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes rollOut {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | -o-transform: translateX(0px) rotate(0deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | -o-transform: translateX(100%) rotate(120deg);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes rollOut {
| + | |
| − | 0% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0px) rotate(0deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | 100% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(100%) rotate(120deg);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .rollOut {
| + | |
| − | -webkit-animation-name: rollOut;
| + | |
| − | -moz-animation-name: rollOut;
| + | |
| − | -o-animation-name: rollOut;
| + | |
| − | animation-name: rollOut;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* originally authored by Angelo Rohit - https://github.com/angelorohit */
| + | |
| − | | + | |
| − | @-webkit-keyframes lightSpeedIn {
| + | |
| − | 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
| + | |
| − | 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
| + | |
| − | 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
| + | |
| − | 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes lightSpeedIn {
| + | |
| − | 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
| + | |
| − | 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
| + | |
| − | 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
| + | |
| − | 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes lightSpeedIn {
| + | |
| − | 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
| + | |
| − | 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
| + | |
| − | 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
| + | |
| − | 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes lightSpeedIn {
| + | |
| − | 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
| + | |
| − | 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
| + | |
| − | 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
| + | |
| − | 100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
| + | |
| − | }
| + | |
| − | | + | |
| − | .lightSpeedIn {
| + | |
| − | -webkit-animation-name: lightSpeedIn;
| + | |
| − | -moz-animation-name: lightSpeedIn;
| + | |
| − | -o-animation-name: lightSpeedIn;
| + | |
| − | animation-name: lightSpeedIn;
| + | |
| − | | + | |
| − | -webkit-animation-timing-function: ease-out;
| + | |
| − | -moz-animation-timing-function: ease-out;
| + | |
| − | -o-animation-timing-function: ease-out;
| + | |
| − | animation-timing-function: ease-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | .animated.lightSpeedIn {
| + | |
| − | -webkit-animation-duration: 0.5s;
| + | |
| − | -moz-animation-duration: 0.5s;
| + | |
| − | -o-animation-duration: 0.5s;
| + | |
| − | animation-duration: 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* originally authored by Angelo Rohit - https://github.com/angelorohit */
| + | |
| − | | + | |
| − | @-webkit-keyframes lightSpeedOut {
| + | |
| − | 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
| + | |
| − | 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes lightSpeedOut {
| + | |
| − | 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
| + | |
| − | 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes lightSpeedOut {
| + | |
| − | 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
| + | |
| − | 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes lightSpeedOut {
| + | |
| − | 0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
| + | |
| − | 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
| + | |
| − | }
| + | |
| − | | + | |
| − | .lightSpeedOut {
| + | |
| − | -webkit-animation-name: lightSpeedOut;
| + | |
| − | -moz-animation-name: lightSpeedOut;
| + | |
| − | -o-animation-name: lightSpeedOut;
| + | |
| − | animation-name: lightSpeedOut;
| + | |
| − | | + | |
| − | -webkit-animation-timing-function: ease-in;
| + | |
| − | -moz-animation-timing-function: ease-in;
| + | |
| − | -o-animation-timing-function: ease-in;
| + | |
| − | animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | | + | |
| − | .animated.lightSpeedOut {
| + | |
| − | -webkit-animation-duration: 0.25s;
| + | |
| − | -moz-animation-duration: 0.25s;
| + | |
| − | -o-animation-duration: 0.25s;
| + | |
| − | animation-duration: 0.25s;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* originally authored by Angelo Rohit - https://github.com/angelorohit */
| + | |
| − | | + | |
| − | @-webkit-keyframes wiggle {
| + | |
| − | 0% { -webkit-transform: skewX(9deg); }
| + | |
| − | 10% { -webkit-transform: skewX(-8deg); }
| + | |
| − | 20% { -webkit-transform: skewX(7deg); }
| + | |
| − | 30% { -webkit-transform: skewX(-6deg); }
| + | |
| − | 40% { -webkit-transform: skewX(5deg); }
| + | |
| − | 50% { -webkit-transform: skewX(-4deg); }
| + | |
| − | 60% { -webkit-transform: skewX(3deg); }
| + | |
| − | 70% { -webkit-transform: skewX(-2deg); }
| + | |
| − | 80% { -webkit-transform: skewX(1deg); }
| + | |
| − | 90% { -webkit-transform: skewX(0deg); }
| + | |
| − | 100% { -webkit-transform: skewX(0deg); }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-moz-keyframes wiggle {
| + | |
| − | 0% { -moz-transform: skewX(9deg); }
| + | |
| − | 10% { -moz-transform: skewX(-8deg); }
| + | |
| − | 20% { -moz-transform: skewX(7deg); }
| + | |
| − | 30% { -moz-transform: skewX(-6deg); }
| + | |
| − | 40% { -moz-transform: skewX(5deg); }
| + | |
| − | 50% { -moz-transform: skewX(-4deg); }
| + | |
| − | 60% { -moz-transform: skewX(3deg); }
| + | |
| − | 70% { -moz-transform: skewX(-2deg); }
| + | |
| − | 80% { -moz-transform: skewX(1deg); }
| + | |
| − | 90% { -moz-transform: skewX(0deg); }
| + | |
| − | 100% { -moz-transform: skewX(0deg); }
| + | |
| − | }
| + | |
| − | | + | |
| − | @-o-keyframes wiggle {
| + | |
| − | 0% { -o-transform: skewX(9deg); }
| + | |
| − | 10% { -o-transform: skewX(-8deg); }
| + | |
| − | 20% { -o-transform: skewX(7deg); }
| + | |
| − | 30% { -o-transform: skewX(-6deg); }
| + | |
| − | 40% { -o-transform: skewX(5deg); }
| + | |
| − | 50% { -o-transform: skewX(-4deg); }
| + | |
| − | 60% { -o-transform: skewX(3deg); }
| + | |
| − | 70% { -o-transform: skewX(-2deg); }
| + | |
| − | 80% { -o-transform: skewX(1deg); }
| + | |
| − | 90% { -o-transform: skewX(0deg); }
| + | |
| − | 100% { -o-transform: skewX(0deg); }
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes wiggle {
| + | |
| − | 0% { transform: skewX(9deg); }
| + | |
| − | 10% { transform: skewX(-8deg); }
| + | |
| − | 20% { transform: skewX(7deg); }
| + | |
| − | 30% { transform: skewX(-6deg); }
| + | |
| − | 40% { transform: skewX(5deg); }
| + | |
| − | 50% { transform: skewX(-4deg); }
| + | |
| − | 60% { transform: skewX(3deg); }
| + | |
| − | 70% { transform: skewX(-2deg); }
| + | |
| − | 80% { transform: skewX(1deg); }
| + | |
| − | 90% { transform: skewX(0deg); }
| + | |
| − | 100% { transform: skewX(0deg); }
| + | |
| − | }
| + | |
| − | | + | |
| − | .wiggle {
| + | |
| − | -webkit-animation-name: wiggle;
| + | |
| − | -moz-animation-name: wiggle;
| + | |
| − | -o-animation-name: wiggle;
| + | |
| − | animation-name: wiggle;
| + | |
| − | | + | |
| − | -webkit-animation-timing-function: ease-in;
| + | |
| − | -moz-animation-timing-function: ease-in;
| + | |
| − | -o-animation-timing-function: ease-in;
| + | |
| − | animation-timing-function: ease-in;
| + | |
| − | }
| + | |
| − | | + | |
| − | .animated.wiggle {
| + | |
| − | -webkit-animation-duration: 0.75s;
| + | |
| − | -moz-animation-duration: 0.75s;
| + | |
| − | -o-animation-duration: 0.75s;
| + | |
| − | animation-duration: 0.75s;
| + | |
| − | }
| + | |
| − | /* Collapse.css*/
| + | |
| − | .grow input:checked{color:red;}
| + | |
| − | | + | |
| − | .grow {
| + | |
| − | -moz-transition: height .5s;
| + | |
| − | -ms-transition: height .5s;
| + | |
| − | -o-transition: height .5s;
| + | |
| − | -webkit-transition: height .5s;
| + | |
| − | transition: height .5s;
| + | |
| − | height: 0;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | .focus{
| + | |
| − | background: rgba(0, 0, 0, 0.2);
| + | |
| − | box-shadow: inset 0 -1px rgba(0, 0, 0, 0);
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*googleleapis1.css*/
| + | |
| − | /* latin-ext */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Source Serif Pro';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 400;
| + | |
| − | src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/CeUM4np2c42DV49nanp55Q_BUM40eMa9-jBVStC9wY0.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Source Serif Pro';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 400;
| + | |
| − | src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/CeUM4np2c42DV49nanp55fETq2ZMMnErnN6OL83eMrU.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| − | }
| + | |
| − | /* latin-ext */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Source Serif Pro';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 700;
| + | |
| − | src: local('Source Serif Pro Bold'), local('SourceSerifPro-Bold'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/yd5lDMt8Sva2PE17yiLarKwVIEQt96q_HGoOJQzfwxw.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Source Serif Pro';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 700;
| + | |
| − | src: local('Source Serif Pro Bold'), local('SourceSerifPro-Bold'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/yd5lDMt8Sva2PE17yiLarPgHLTi6vdOOFgNDwEC6JgI.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*oogleleapis2.css*/
| + | |
| − | /* latin-ext */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 300;
| + | |
| − | src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */ | + | |
| − | @font-face {
| + | |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 300;
| + | |
| − | src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| − | } | + | |
| − | /* latin-ext */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 400;
| + | |
| − | src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */ | + | |
| − | @font-face {
| + | |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 400;
| + | |
| − | src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| − | }
| + | |
| − | /* latin-ext */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 700;
| + | |
| − | src: local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/ObQr5XYcoH0WBoUxiaYK3_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 700;
| + | |
| − | src: local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/H2DMvhDLycM56KNuAtbJYA.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*normalize.css*/
| + | |
| − | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
| + | |
| − | | + | |
| − | /*demo.css*/
| + | |
| − | *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }
| + | |
| − | | + | |
| − | body {
| + | |
| − | font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
| + | |
| − | color: #fff;
| + | |
| − | background: #34343d;
| + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | a {
| + | |
| − | outline: none;
| + | |
| − | color: #60B8B9;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | a:hover, a:focus {
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .hidden {
| + | |
| − | position: absolute;
| + | |
| − | overflow: hidden;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | pointer-events: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .message {
| + | |
| − | font-weight: bold;
| + | |
| − | color: #914a58;
| + | |
| − | background: #f0d4d8;
| + | |
| − | font-size: 0.85em;
| + | |
| − | margin: 0;
| + | |
| − | padding: 1em;
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Icons */
| + | |
| − | .icon-link {
| + | |
| − | padding: 0 0.5em;
| + | |
| − | margin: 0 0 0 auto;
| + | |
| − | font-size: 0.85em;
| + | |
| − | white-space: nowrap;
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon {
| + | |
| − | display: inline-block;
| + | |
| − | vertical-align: middle;
| + | |
| − | width: 1.5em;
| + | |
| − | height: 1.5em;
| + | |
| − | margin: 0 auto;
| + | |
| − | fill: currentColor;
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-text {
| + | |
| − | line-height: 1;
| + | |
| − | vertical-align: middle;
| + | |
| − | padding: 0.35em;
| + | |
| − | font-weight: bold;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | | + | |
| − | main {
| + | |
| − | max-width: 1885px;
| + | |
| − | display: inline-block;
| + | |
| − | margin: 0 auto;
| + | |
| − | position: relative;
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Header */
| + | |
| − | .codrops-header {
| + | |
| − | position: relative;
| + | |
| − | padding: 1em;
| + | |
| − | width: 100%;
| + | |
| − | display: -webkit-box;
| + | |
| − | display: -ms-flexbox;
| + | |
| − | display: -webkit-flex;
| + | |
| − | display: flex;
| + | |
| − | -webkit-box-orient: horizontal;
| + | |
| − | -webkit-box-direction: normal;
| + | |
| − | -ms-flex-direction: row;
| + | |
| − | -webkit-flex-direction: row;
| + | |
| − | flex-direction: row;
| + | |
| − | -webkit-align-items: center;
| + | |
| − | align-items: center;
| + | |
| − | z-index: 10;
| + | |
| − | background: #28282f;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-header__title {
| + | |
| − | margin: 0;
| + | |
| − | letter-spacing: -1px;
| + | |
| − | font-size: 1.65em;
| + | |
| − | white-space: nowrap;
| + | |
| − | line-height: 1;
| + | |
| − | font-family: 'Source Serif Pro', serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-header__tagline {
| + | |
| − | margin: 0 0 0 1.5em;
| + | |
| − | color: #495050;
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Top Navigation Style */
| + | |
| − | .codrops-links {
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;
| + | |
| − | text-align: center;
| + | |
| − | white-space: nowrap;
| + | |
| − | font-size: 0.8em;
| + | |
| − | margin: 0 1em 0 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-links::after {
| + | |
| − | position: absolute;
| + | |
| − | top: 15%;
| + | |
| − | left: 50%;
| + | |
| − | width: 1px;
| + | |
| − | height: 70%;
| + | |
| − | background: currentColor;
| + | |
| − | opacity: 0.2;
| + | |
| − | content: '';
| + | |
| − | -webkit-transform: rotate3d(0,0,1,22.5deg);
| + | |
| − | transform: rotate3d(0,0,1,22.5deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-icon {
| + | |
| − | display: inline-block;
| + | |
| − | margin: 0.5em;
| + | |
| − | padding: 0.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Demo links */
| + | |
| − | .codrops-demos {
| + | |
| − | margin: 0 0 0 auto;
| + | |
| − | text-align: right;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-demos a {
| + | |
| − | display: inline-block;
| + | |
| − | margin: 0 0.5em;
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-demos a.current-demo {
| + | |
| − | color: #28282f;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Content */
| + | |
| − | .content {
| + | |
| − | background: #28282f;
| + | |
| − | }
| + | |
| − | | + | |
| − | .content__inner {
| + | |
| − | max-width: 1000px;
| + | |
| − | margin: 0 auto;
| + | |
| − | padding: 13% 10% 18%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .content__title,
| + | |
| − | .content__subtitle {
| + | |
| − | font-family: 'Source Serif Pro', serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | .content__title {
| + | |
| − | font-size: 3em;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .content__subtitle {
| + | |
| − | font-size: 2em;
| + | |
| − | font-weight: normal;
| + | |
| − | margin: 0.25em 0 0;
| + | |
| − | color: #9f9da7;
| + | |
| − | }
| + | |
| − | | + | |
| − | .content p {
| + | |
| − | font-size: 1.175em;
| + | |
| − | line-height: 1.6;
| + | |
| − | margin: 1.5em 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | p.margin-paragraph {
| + | |
| − | margin: 8em 0 1.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Related demos */
| + | |
| − | .content--related {
| + | |
| − | padding: 4em 1em;
| + | |
| − | text-align: center;
| + | |
| − | font-weight: bold;
| + | |
| − | background: #1c1c21;
| + | |
| − | color: #495050;
| + | |
| − | }
| + | |
| − | | + | |
| − | .content--related a:hover,
| + | |
| − | .content--related a:focus {
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .media-item {
| + | |
| − | display: inline-block;
| + | |
| − | padding: 1em;
| + | |
| − | vertical-align: top;
| + | |
| − | -webkit-transition: color 0.3s;
| + | |
| − | transition: color 0.3s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .media-item__img {
| + | |
| − | max-width: 100%;
| + | |
| − | opacity: 0.3;
| + | |
| − | -webkit-transition: opacity 0.3s;
| + | |
| − | transition: opacity 0.3s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .media-item:hover .media-item__img,
| + | |
| − | .media-item:focus .media-item__img {
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | .media-item__title {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0.5em;
| + | |
| − | font-size: 1em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Sponsor */
| + | |
| − | .pater {
| + | |
| − | display: none;
| + | |
| − | position: relative;
| + | |
| − | background: rgba(96,184,185,0.6);
| + | |
| − | padding: 2.5em 1em 2.5em;
| + | |
| − | width: 100%;
| + | |
| − | pointer-events: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .pater:focus {
| + | |
| − | outline: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .pater::after {
| + | |
| − | content: 'Sponsored by';
| + | |
| − | position: absolute;
| + | |
| − | top: 20px;
| + | |
| − | left: 20px;
| + | |
| − | color: #408283;
| + | |
| − | font-size: 0.65em;
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | | + | |
| − | .pater__img {
| + | |
| − | max-width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .pater__title {
| + | |
| − | font-size: 1em;
| + | |
| − | color: #fff;
| + | |
| − | margin: 0 0 0.25em 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .pater__description {
| + | |
| − | color: #1a2638;
| + | |
| − | font-size: 0.85em;
| + | |
| − | font-weight: 600;
| + | |
| − | margin: 0 0 0 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .pater__description strong {
| + | |
| − | color: #ffe38e;
| + | |
| − | }
| + | |
| − | | + | |
| − | .pater--responsive {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (min-width: 52.375em) {
| + | |
| − | .pater {
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | bottom: 0;
| + | |
| − | right: 0;
| + | |
| − | width: 400px;
| + | |
| − | padding: 2.5em 1em 1em;
| + | |
| − | -webkit-transform: translate3d(0,3.5em,0);
| + | |
| − | transform: translate3d(0,3.5em,0);
| + | |
| − | -webkit-transition: background 0.3s, -webkit-transform 0.3s;
| + | |
| − | transition: background 0.3s, transform 0.3s;
| + | |
| − | }
| + | |
| − | .points-content--open ~ .pater {
| + | |
| − | pointer-events: none;
| + | |
| − | -webkit-transform: translate3d(0,100%,0);
| + | |
| − | transform: translate3d(0,100%,0);
| + | |
| − | }
| + | |
| − | .pater:focus,
| + | |
| − | .pater:hover {
| + | |
| − | background: rgba(96,184,185,1);
| + | |
| − | -webkit-transform: translate3d(0,0,0);
| + | |
| − | transform: translate3d(0,0,0);
| + | |
| − | }
| + | |
| − | .pater__img {
| + | |
| − | -webkit-transform-origin: 0% 50%;
| + | |
| − | transform-origin: 0% 50%;
| + | |
| − | -webkit-transform: scale(1.5);
| + | |
| − | transform: scale(1.5);
| + | |
| − | -webkit-transition: -webkit-transform 0.3s;
| + | |
| − | transition: transform 0.3s;
| + | |
| − | }
| + | |
| − | .pater:focus .pater__img,
| + | |
| − | .pater:hover .pater__img {
| + | |
| − | -webkit-transform: scale(1);
| + | |
| − | transform: scale(1);
| + | |
| − | }
| + | |
| − | .pater__description {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translate3d(0,1em,0);
| + | |
| − | transform: translate3d(0,1em,0);
| + | |
| − | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
| + | |
| − | transition: opacity 0.3s, transform 0.3s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .pater:focus .pater__description,
| + | |
| − | .pater:hover .pater__description {
| + | |
| − | -webkit-transform: translate3d(0,0,0);
| + | |
| − | transform: translate3d(0,0,0);
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | .pater--responsive {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width: 52.375em) {
| + | |
| − | .codrops-header {
| + | |
| − | padding: 0.25em;
| + | |
| − | font-size: 0.65em;
| + | |
| − | }
| + | |
| − | .codrops-header__tagline {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .content {
| + | |
| − | font-size: 0.75em;
| + | |
| − | }
| + | |
| − | .message {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /*component.css*/ | + | |
| − | .interactive-points {
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;
| + | |
| − | overflow: hidden;
| + | |
| − | width: 100%;
| + | |
| − | margin-bottom: -0.4em;
| + | |
| − | background: #cfced7;
| + | |
| − | } | + | |
| − | | + | |
| − | .interactive-points:focus {
| + | |
| − | outline: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .backgrounds,
| + | |
| − | .background__element {
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .background__element {
| + | |
| − | height: 50vh;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-position: 50% 50%;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | | + | |
| − | .static {
| + | |
| − | position: relative;
| + | |
| − | display: block;
| + | |
| − | margin: 0 auto;
| + | |
| − | opacity: 0.5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .points {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .static,
| + | |
| − | .points {
| + | |
| − | width: 100%;
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (min-aspect-ratio: 1885/1000) {
| + | |
| − | .static,
| + | |
| − | .points {
| + | |
| − | width: auto;
| + | |
| − | height: calc(100vh - 6em); | + | |
| − | min-height: 500px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .points {
| + | |
| − | left: 50%;
| + | |
| − | -webkit-transform: translate3d(-50%,0,0);
| + | |
| − | transform: translate3d(-50%,0,0);
| + | |
| − | }
| + | |
| − | | + | |
| − | .point {
| + | |
| − | cursor: pointer;
| + | |
| − | fill: #28282f;
| + | |
| − | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, fill 0.3s;
| + | |
| − | transition: opacity 0.3s, transform 0.3s, fill 0.3s;
| + | |
| − | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
| + | |
| − | transition-timing-function: cubic-bezier(0.2,1,0.3,1);
| + | |
| − | }
| + | |
| − | | + | |
| − | .point--active {
| + | |
| − | fill: #408283;
| + | |
| − | -webkit-transform: scale3d(2,2,1);
| + | |
| − | transform: scale3d(2,2,1);
| + | |
| − | }
| + | |
| − | | + | |
| − | .point--hide {
| + | |
| − | opacity: 0;
| + | |
| − | pointer-events: none;
| + | |
| − | -webkit-transform: translate3d(0,10px,0);
| + | |
| − | transform: translate3d(0,10px,0);
| + | |
| − | }
| + | |
| − | | + | |
| − | .points-tooltips,
| + | |
| − | .points-content {
| + | |
| − | position: absolute;
| + | |
| − | bottom: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | pointer-events: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .points-tooltips {
| + | |
| − | display: -webkit-box;
| + | |
| − | display: -ms-flexbox;
| + | |
| − | display: flex;
| + | |
| − | -webkit-box-orient: vertical;
| + | |
| − | -webkit-box-direction: normal;
| + | |
| − | -ms-flex-direction: column;
| + | |
| − | flex-direction: column;
| + | |
| − | -webkit-box-pack: end;
| + | |
| − | -ms-flex-pack: end;
| + | |
| − | justify-content: flex-end;
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-tooltip {
| + | |
| − | height: 50vh;
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-tooltip__title {
| + | |
| − | font-family: 'Source Serif Pro', serif;
| + | |
| − | font-size: 1.5em;
| + | |
| − | line-height: 1;
| + | |
| − | margin: 0 0 0.15em;
| + | |
| − | display: inline-block;
| + | |
| − | background: #28282f;
| + | |
| − | padding: 5px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-tooltip__description {
| + | |
| − | font-size: 0.85em;
| + | |
| − | font-weight: 500;
| + | |
| − | margin: 0;
| + | |
| − | line-height: 1;
| + | |
| − | display: inline-block;
| + | |
| − | background: #28282f;
| + | |
| − | padding: 5px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .points-content {
| + | |
| − | -webkit-transition: background 0.1s;
| + | |
| − | transition: background 0.1s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .points-content--open {
| + | |
| − | cursor: url(img/close.cur), pointer;
| + | |
| − | pointer-events: auto;
| + | |
| − | background: rgba(50,49,59,0.6);
| + | |
| − | }
| + | |
| − | | + | |
| − | @supports (cursor: zoom-in) {
| + | |
| − | .points-content--open {
| + | |
| − | cursor: url(https://static.igem.org/mediawiki/2016/d/df/T--NUS_Singapore--close.png) 12 6, pointer; | + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-content {
| + | |
| − | font-size: 1.25em;
| + | |
| − | position: absolute;
| + | |
| − | bottom: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | min-width: 300px;
| + | |
| − | padding: 0 0 3em 3em;
| + | |
| − | opacity: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-content--current {
| + | |
| − | pointer-events: auto;
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-content__title {
| + | |
| − | font-family: 'Source Serif Pro', serif;
| + | |
| − | font-size: 2.25em;
| + | |
| − | margin: 0;
| + | |
| − | text-shadow: 0 1px 5px rgba(0,0,0,0.2);
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-content__subtitle {
| + | |
| − | font-family: 'Source Serif Pro', serif;
| + | |
| − | font-weight: bold;
| + | |
| − | margin: 0.25em 0 0;
| + | |
| − | display: inline-block;
| + | |
| − | background: #408283;
| + | |
| − | color: #28282f;
| + | |
| − | padding: 0 10px;
| + | |
| − | line-height: 1.5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-content__text {
| + | |
| − | font-weight: 500;
| + | |
| − | margin: 1em 0 0 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-content > * {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translate3d(0,-40px,0);
| + | |
| − | transform: translate3d(0,-40px,0);
| + | |
| − | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
| + | |
| − | transition: opacity 0.3s, transform 0.3s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-content--current > * {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translate3d(0,0,0);
| + | |
| − | transform: translate3d(0,0,0);
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-content--current > *:first-child {
| + | |
| − | -webkit-transition-delay: 0.1s;
| + | |
| − | transition-delay: 0.1s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .point-content--current > *:nth-child(2) {
| + | |
| − | -webkit-transition-delay: 0.05s;
| + | |
| − | transition-delay: 0.05s;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Second example */
| + | |
| − | .interactive-points--alter .point-content {
| + | |
| − | text-align: right;
| + | |
| − | left: auto;
| + | |
| − | right: 0;
| + | |
| − | padding: 0 3em 3em;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (min-width: 52.375em) {
| + | |
| − | .point-content {
| + | |
| − | width: 50%; | + | |
| − | }
| + | |
| − | .js .points {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | .js .backgrounds,
| + | |
| − | .js .background__element {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | .js .background__element {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transition: opacity 0.1s;
| + | |
| − | transition: opacity 0.1s;
| + | |
| − | }
| + | |
| − | .js .points-tooltip {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | .js .point-tooltip {
| + | |
| − | position: absolute;
| + | |
| − | margin: 0.75em 0 0 0.25em;
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translate3d(0,10px,0);
| + | |
| − | transform: translate3d(0,10px,0);
| + | |
| − | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
| + | |
| − | transition: opacity 0.3s, transform 0.3s;
| + | |
| − | }
| + | |
| − | .js .point-tooltip--current {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translate3d(0,0,0);
| + | |
| − | transform: translate3d(0,0,0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /*sidebar_transitions_normalize.css*/
| + | |
| − | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
| + | |
| − | | + | |
| − | /*sidebar_transitions_demo.css*/ | + | |
| − | body {
| + | |
| − | background: #444;
| + | |
| − | color: #48a770;
| + | |
| − | font-weight: 300;
| + | |
| − | font-family: 'Lato', Calibri, Arial, sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | a {
| + | |
| − | text-decoration: none;
| + | |
| − | color: #48a770;
| + | |
| − | outline: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | a:hover, a:focus {
| + | |
| − | color: #2c774b;
| + | |
| − | outline: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
| + | |
| − | .clearfix:before,
| + | |
| − | .clearfix:after {
| + | |
| − | display: table;
| + | |
| − | content: " ";
| + | |
| − | }
| + | |
| − | | + | |
| − | .clearfix:after {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-header,
| + | |
| − | .codrops-top {
| + | |
| − | font-family: 'Lato', Arial, sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-header {
| + | |
| − | margin: 0 auto 3em;
| + | |
| − | padding: 3em;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-header h1 {
| + | |
| − | margin: 0;
| + | |
| − | font-weight: 300;
| + | |
| − | font-size: 2.625em;
| + | |
| − | line-height: 1.3;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-header span {
| + | |
| − | display: block;
| + | |
| − | padding: 0 0 0.6em 0.1em;
| + | |
| − | font-size: 60%;
| + | |
| − | color: #aca89a;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* To Navigation Style */ | + | |
| − | .codrops-top { | + | |
| − | width: 100%;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 0.69em;
| + | |
| − | line-height: 2.2;
| + | |
| − | font-weight: 400;
| + | |
| − | background: rgba(255,255,255,0.3);
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-top a {
| + | |
| − | display: inline-block;
| + | |
| − | padding: 0 1em;
| + | |
| − | text-decoration: none;
| + | |
| − | letter-spacing: 0.1em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-top a:hover {
| + | |
| − | background: rgba(255,255,255,0.4);
| + | |
| − | color: #333;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-top span.right {
| + | |
| − | float: right;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-top span.right a {
| + | |
| − | display: block;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-icon:before {
| + | |
| − | margin: 0 4px;
| + | |
| − | text-transform: none;
| + | |
| − | font-weight: normal;
| + | |
| − | font-style: normal;
| + | |
| − | font-variant: normal;
| + | |
| − | font-family: 'codropsicons';
| + | |
| − | line-height: 1;
| + | |
| − | speak: none;
| + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | -ms-font-smoothing: scale(1.1) translate(70px); /* IE 9 */
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-icon-drop:before {
| + | |
| − | content: "\e001";
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-icon-prev:before {
| + | |
| − | content: "\e004";
| + | |
| − | }
| + | |
| − | | + | |
| − | .main {
| + | |
| − | max-width: 69em;
| + | |
| − | margin: 0 auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .column {
| + | |
| − | float: left;
| + | |
| − | width: 50%;
| + | |
| − | padding: 0 2em;
| + | |
| − | min-height: 300px;
| + | |
| − | position: relative;
| + | |
| − | text-align: right;
| + | |
| − | }
| + | |
| − | | + | |
| − | .column:nth-child(2) {
| + | |
| − | box-shadow: -1px 0 0 rgba(0,0,0,0.1);
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .column p {
| + | |
| − | font-weight: 300;
| + | |
| − | font-size: 2em;
| + | |
| − | padding: 0 0 0.5em;
| + | |
| − | margin: 0;
| + | |
| − | line-height: 1.5;
| + | |
| − | }
| + | |
| − | | + | |
| − | button {
| + | |
| − | border: none;
| + | |
| − | padding: 0.6em 1.2em;
| + | |
| − | background: #388a5a;
| + | |
| − | color: #fff;
| + | |
| − | font-family: 'Lato', Calibri, Arial, sans-serif;
| + | |
| − | font-size: 1em;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | text-transform: uppercase;
| + | |
| − | cursor: pointer;
| + | |
| − | display: inline-block;
| + | |
| − | margin: 3px 2px;
| + | |
| − | border-radius: 2px;
| + | |
| − | -webkit-transition: all .2s ease-in-out;
| + | |
| − | transition: all .2s ease-in-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | button:hover {
| + | |
| − | background-color: rgba(0,0,0,.5);
| + | |
| − | color: rgba(255,255,255,1);
| + | |
| − | -ms-transform: scale(1.7) translate(40px); /* IE 9 */
| + | |
| − | -webkit-transform: scale(1.7) translate(40px); /* Safari */
| + | |
| − | transform: scale(1.7) translate(40px); /* Standard syntax */
| + | |
| − | outline: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .info {
| + | |
| − | text-align: center;
| + | |
| − | font-size: 1.5em;
| + | |
| − | margin-top: 3em;
| + | |
| − | clear: both;
| + | |
| − | padding: 3em 0;
| + | |
| − | opacity: 0.7;
| + | |
| − | color: #aca89a;
| + | |
| − | }
| + | |
| − | | + | |
| − | .info a {
| + | |
| − | font-weight: 700;
| + | |
| − | font-size: 0.9em;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width: 46.0625em) {
| + | |
| − | .column {
| + | |
| − | width: 100%; | + | |
| − | min-width: auto;
| + | |
| − | min-height: auto;
| + | |
| − | padding: 2em;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .column p {
| + | |
| − | font-size: 1.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .column:nth-child(2) {
| + | |
| − | text-align: center;
| + | |
| − | box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width: 25em) {
| + | |
| − | | + | |
| − | .codrops-header {
| + | |
| − | font-size: 80%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-top {
| + | |
| − | font-size: 120%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .codrops-icon span {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /*sidebar_transitions_icons.css*/
| + | |
| − | @font-face {
| + | |
| − | font-family: 'linecons';
| + | |
| − | src:url('../fonts/linecons/linecons.eot');
| + | |
| − | src:url('../fonts/linecons/linecons.eot?#iefix') format('embedded-opentype'),
| + | |
| − | url('../fonts/linecons/linecons.woff') format('woff'),
| + | |
| − | url('../fonts/linecons/linecons.ttf') format('truetype'),
| + | |
| − | url('../fonts/linecons/linecons.svg#linecons') format('svg');
| + | |
| − | font-weight: normal;
| + | |
| − | font-style: normal;
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon:before {
| + | |
| − | font-family: 'linecons';
| + | |
| − | speak: none;
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: normal;
| + | |
| − | font-variant: normal;
| + | |
| − | text-transform: none;
| + | |
| − | line-height: 1;
| + | |
| − | display: inline-block;
| + | |
| − | vertical-align: bottom;
| + | |
| − | margin-right: 0.8em;
| + | |
| − | font-size: 1.2em;
| + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | height: 20px;
| + | |
| − | width: 20px;
| + | |
| − | background-size: 20px 20px;
| + | |
| − | display: inline-block;
| + | |
| − | content:"";
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-home:before {
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2016/5/54/T--NUS_Singapore--home.png');
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-project:before {
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2016/e/e5/T--NUS_Singapore--project.png');
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-notebook:before {
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2016/2/24/T--NUS_Singapore--notebook.png');
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-team:before {
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2016/b/b5/T--NUS_Singapore--team.png');
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-collaboration:before {
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2016/e/e5/T--NUS_Singapore--collaboration.png');
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-practice:before {
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2016/1/1e/T--NUS_Singapore--practice.png');
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-safety:before {
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2016/4/47/T--NUS_Singapore--safety.png');
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-acknowledgement:before {
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2016/2/2b/T--NUS_Singapore--acknowledgement.png');
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-female:before {
| + | |
| − | content: "\f182";
| + | |
| − | }
| + | |
| − | .icon-male:before {
| + | |
| − | content: "\f183";
| + | |
| − | }
| + | |
| − | .icon-arrow-left:before {
| + | |
| − | content: "\e032";
| + | |
| − | }
| + | |
| − | .icon-arrow-left-2:before {
| + | |
| − | content: "\e034";
| + | |
| − | }
| + | |
| − | .icon-arrow-left-3:before {
| + | |
| − | content: "\e036";
| + | |
| − | }
| + | |
| − | .icon-arrow-left-4:before {
| + | |
| − | content: "\e038";
| + | |
| − | }
| + | |
| − | .icon-arrow-right:before {
| + | |
| − | content: "\e035";
| + | |
| − | }
| + | |
| − | .icon-arrow-right-2:before {
| + | |
| − | content: "\e037";
| + | |
| − | }
| + | |
| − | .icon-arrow-right-3:before {
| + | |
| − | content: "\e039";
| + | |
| − | }
| + | |
| − | .icon-arrow-right-4:before {
| + | |
| − | content: "\e033";
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-phone:before {
| + | |
| − | content: "\e000";
| + | |
| − | }
| + | |
| − | .icon-news:before {
| + | |
| − | content: "\e001";
| + | |
| − | }
| + | |
| − | .icon-photo:before {
| + | |
| − | content: "\e002";
| + | |
| − | }
| + | |
| − | .icon-shop:before {
| + | |
| − | content: "\e003";
| + | |
| − | }
| + | |
| − | .icon-wallet:before {
| + | |
| − | content: "\e004";
| + | |
| − | }
| + | |
| − | .icon-t-shirt:before {
| + | |
| − | content: "\e005";
| + | |
| − | }
| + | |
| − | .icon-heart:before {
| + | |
| − | content: "\e006";
| + | |
| − | }
| + | |
| − | .icon-cloud:before {
| + | |
| − | content: "\e007";
| + | |
| − | }
| + | |
| − | .icon-display:before {
| + | |
| − | content: "\e008";
| + | |
| − | }
| + | |
| − | .icon-diamond:before {
| + | |
| − | content: "\e009";
| + | |
| − | }
| + | |
| − | .icon-banknote:before {
| + | |
| − | content: "\e00a";
| + | |
| − | }
| + | |
| − | .icon-data:before {
| + | |
| − | content: "\e00b";
| + | |
| − | }
| + | |
| − | .icon-music:before {
| + | |
| − | content: "\e00c";
| + | |
| − | }
| + | |
| − | .icon-location:before {
| + | |
| − | content: "\e00d";
| + | |
| − | }
| + | |
| − | .icon-star:before {
| + | |
| − | content: "\e00e";
| + | |
| − | }
| + | |
| − | .icon-tv:before {
| + | |
| − | content: "\e00f";
| + | |
| − | }
| + | |
| − | .icon-eye:before {
| + | |
| − | content: "\e010";
| + | |
| − | }
| + | |
| − | .icon-megaphone:before {
| + | |
| − | content: "\e011";
| + | |
| − | }
| + | |
| − | .icon-study:before {
| + | |
| − | content: "\e012";
| + | |
| − | }
| + | |
| − | .icon-bubble:before {
| + | |
| − | content: "\e013";
| + | |
| − | }
| + | |
| − | .icon-sound:before {
| + | |
| − | content: "\e014";
| + | |
| − | }
| + | |
| − | .icon-video:before {
| + | |
| − | content: "\e015";
| + | |
| − | }
| + | |
| − | .icon-stack:before {
| + | |
| − | content: "\e016";
| + | |
| − | }
| + | |
| − | .icon-lab:before {
| + | |
| − | content: "\e017";
| + | |
| − | }
| + | |
| − | .icon-food:before {
| + | |
| − | content: "\e018";
| + | |
| − | }
| + | |
| − | .icon-cup:before {
| + | |
| − | content: "\e019";
| + | |
| − | }
| + | |
| − | .icon-trash:before {
| + | |
| − | content: "\e01a";
| + | |
| − | }
| + | |
| − | .icon-user:before {
| + | |
| − | content: "\e01b";
| + | |
| − | }
| + | |
| − | .icon-key:before {
| + | |
| − | content: "\e01c";
| + | |
| − | }
| + | |
| − | .icon-fire:before {
| + | |
| − | content: "\e01d";
| + | |
| − | }
| + | |
| − | .icon-clip:before {
| + | |
| − | content: "\e01e";
| + | |
| − | }
| + | |
| − | .icon-mail:before {
| + | |
| − | content: "\e01f";
| + | |
| − | }
| + | |
| − | .icon-search:before {
| + | |
| − | content: "\e020";
| + | |
| − | }
| + | |
| − | .icon-settings:before {
| + | |
| − | content: "\e021";
| + | |
| − | }
| + | |
| − | .icon-like:before {
| + | |
| − | content: "\e022";
| + | |
| − | }
| + | |
| − | .icon-calendar:before {
| + | |
| − | content: "\e023";
| + | |
| − | }
| + | |
| − | .icon-camera:before {
| + | |
| − | content: "\e024";
| + | |
| − | }
| + | |
| − | .icon-tag:before {
| + | |
| − | content: "\e025";
| + | |
| − | }
| + | |
| − | .icon-note:before {
| + | |
| − | content: "\e026";
| + | |
| − | }
| + | |
| − | .icon-clock:before {
| + | |
| − | content: "\e027";
| + | |
| − | }
| + | |
| − | .icon-lock:before {
| + | |
| − | content: "\e028";
| + | |
| − | }
| + | |
| − | .icon-vynil:before {
| + | |
| − | content: "\e029";
| + | |
| − | }
| + | |
| − | .icon-truck:before {
| + | |
| − | content: "\e02a";
| + | |
| − | }
| + | |
| − | .icon-paperplane:before {
| + | |
| − | content: "\e02b";
| + | |
| − | }
| + | |
| − | .icon-bulb:before {
| + | |
| − | content: "\e02c";
| + | |
| − | }
| + | |
| − | .icon-pen:before {
| + | |
| − | content: "\e02d";
| + | |
| − | }
| + | |
| − | .icon-params:before {
| + | |
| − | content: "\e02e";
| + | |
| − | }
| + | |
| − | .icon-world:before {
| + | |
| − | content: "\e02f";
| + | |
| − | }
| + | |
| − | | + | |
| − | /*sidebar_transitions_component.css*/
| + | |
| − | *,
| + | |
| − | *:after,
| + | |
| − | *::before {
| + | |
| − | -moz-box-sizing: border-box;
| + | |
| − | box-sizing: border-box;
| + | |
| − | }
| + | |
| − | | + | |
| − | html,
| + | |
| − | body,
| + | |
| − | .st-container,
| + | |
| − | .st-pusher,
| + | |
| − | .st-content {
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-content {
| + | |
| − | overflow-y: scroll;
| + | |
| − | background: #f3efe0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-content,
| + | |
| − | .st-content-inner {
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-container {
| + | |
| − | position: relative;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-pusher {
| + | |
| − | position: relative;
| + | |
| − | left: 0;
| + | |
| − | z-index: 99;
| + | |
| − | height: 100%;
| + | |
| − | -webkit-transition: -webkit-transform 0.5s;
| + | |
| − | transition: transform 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-pusher::after {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | background: rgba(0,0,0,0.2);
| + | |
| − | content: '';
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
| + | |
| − | transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-menu-open .st-pusher::after {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transition: opacity 0.5s;
| + | |
| − | transition: opacity 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-menu {
| + | |
| − | position: fixed;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | z-index: 100;
| + | |
| − | visibility: hidden;
| + | |
| − | width: 300px;
| + | |
| − | height: 100%;
| + | |
| − | background: #48a770;
| + | |
| − | -webkit-transition: all 0.5s;
| + | |
| − | transition: all 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-menu::after {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | background: rgba(0,0,0,0.2);
| + | |
| − | content: '';
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transition: opacity 0.5s;
| + | |
| − | transition: opacity 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-menu-open .st-menu::after {
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
| + | |
| − | transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* content style */
| + | |
| − | | + | |
| − | .st-menu ul {
| + | |
| − | margin-top: 20%;
| + | |
| − | padding: 0;
| + | |
| − | list-style: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-menu h2 {
| + | |
| − | margin: 0;
| + | |
| − | padding: 1em;
| + | |
| − | color: rgba(0,0,0,0.4);
| + | |
| − | text-shadow: 0 0 1px rgba(0,0,0,0.1);
| + | |
| − | font-weight: 300;
| + | |
| − | font-size: 2em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-menu ul li a {
| + | |
| − | display: block;
| + | |
| − | padding: 1em 1em 1em 1.2em;
| + | |
| − | width: 100%;
| + | |
| − | height: 20%;
| + | |
| − | outline: none;
| + | |
| − | box-shadow: inset 0 -1px rgba(0,0,0,0.2);
| + | |
| − | color: #f3efe0;
| + | |
| − | text-transform: uppercase;
| + | |
| − | text-shadow: 0 0 1px rgba(255,255,255,0.1);
| + | |
| − | letter-spacing: 1px;
| + | |
| − | font-weight: 400;
| + | |
| − | -webkit-transition: background 0.3s, box-shadow 0.3s;
| + | |
| − | transition: background 0.3s, box-shadow 0.3s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-menu ul li:first-child a {
| + | |
| − | box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-menu ul li a:hover {
| + | |
| − | background: rgba(0,0,0,0.2);
| + | |
| − | box-shadow: inset 0 -1px rgba(0,0,0,0);
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Individual effects */
| + | |
| − | | + | |
| − | /* Effect 1: Slide in on top */
| + | |
| − | .st-effect-1.st-menu {
| + | |
| − | visibility: visible;
| + | |
| − | -webkit-transform: translate3d(-100%, 0, 0);
| + | |
| − | transform: translate3d(-100%, 0, 0);
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-effect-1.st-menu-open .st-effect-1.st-menu {
| + | |
| − | visibility: visible;
| + | |
| − | -webkit-transform: translate3d(0, 0, 0);
| + | |
| − | transform: translate3d(0, 0, 0);
| + | |
| − | }
| + | |
| − | | + | |
| − | .st-effect-1.st-menu::after {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
| + | |
| − | .no-csstransforms3d .st-pusher,
| + | |
| − | .no-js .st-pusher {
| + | |
| − | padding-left: 300px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*button.css*/
| + | |
| − | /* Common button styles */
| + | |
| − | .button {
| + | |
| − | float: left;
| + | |
| − | width: 100px;
| + | |
| − | height: 100px;
| + | |
| − | border-radius: 50%;
| + | |
| − | display: block;
| + | |
| − | margin: 1em;
| + | |
| − | padding: 1em 2em;
| + | |
| − | border: none;
| + | |
| − | background-color: rgba(0,0,0,.3);
| + | |
| − | vertical-align: middle;
| + | |
| − | position: fixed;
| + | |
| − | top: 40%;
| + | |
| − | left: -45px;
| + | |
| − | z-index: 1;
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| − | -ms-backface-visibility: hidden;
| + | |
| − | }
| + | |
| − | .button:focus {
| + | |
| − | outline: none;
| + | |
| − | }
| + | |
| − | .button > span {
| + | |
| − | vertical-align: middle;
| + | |
| − | }
| + | |
| − | | + | |
| − | .button > span > img {
| + | |
| − | -ms-transform: rotate(-90deg);
| + | |
| − | -webkit-transform: rotate(-90deg);
| + | |
| − | transform: rotate(-90deg);
| + | |
| − | height: 50%;
| + | |
| − | width: 50%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* Borders */
| + | |
| − | .button--border{
| + | |
| − | border: none;
| + | |
| − | outline: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Rayen */
| + | |
| − | .button--rayen {
| + | |
| − | overflow: hidden;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | .button--rayen.button--inverted {
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | .button--rayen::before {
| + | |
| − | content: attr(data-text);
| + | |
| − | position: absolute;
| + | |
| − | font-size: 200%;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | border-radius: 50%;
| + | |
| − | background-color: rgba(0,0,0,.5);
| + | |
| − | color: rgba(255,255,255,1);
| + | |
| − | line-height: 100px;
| + | |
| − | text-align: center;
| + | |
| − | -webkit-transform: translate3d(-100%, 0, 0);
| + | |
| − | transform: translate3d(-100%, 0, 0);
| + | |
| − | -ms-transform: translate3d(-100%, 0, 0);
| + | |
| − | }
| + | |
| − | .button--rayen.button--inverted::before {
| + | |
| − | background: #fff;
| + | |
| − | color: #37474f;
| + | |
| − | }
| + | |
| − | .button--rayen > span {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | .button--rayen::before,
| + | |
| − | .button--rayen > span {
| + | |
| − | -ms-transition: -webkit-transform 0.3s;
| + | |
| − | -webkit-transition: -webkit-transform 0.3s;
| + | |
| − | transition: transform 0.3s;
| + | |
| − | -ms-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
| + | |
| − | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
| + | |
| − | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
| + | |
| − | }
| + | |
| − | .button--rayen:hover::before {
| + | |
| − | -ms-transform: translate3d(0, 0, 0);
| + | |
| − | -webkit-transform: translate3d(0, 0, 0);
| + | |
| − | transform: translate3d(0, 0, 0);
| + | |
| − | }
| + | |
| − | .button--rayen:hover > span {
| + | |
| − | -ms-transform: translate3d(0, 150%, 0);
| + | |
| − | -webkit-transform: translate3d(0, 150%, 0);
| + | |
| − | transform: translate3d(0, 150%, 0);
| + | |
| − | }
| + | |
| − | | + | |
| − | /*header_component.css*/
| + | |
| − | | + | |
| − | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
| + | |
| − | | + | |
| − | /* Content style */
| + | |
| − | | + | |
| − | .scroll {
| + | |
| − | position: fixed;
| + | |
| − | top: 50%;
| + | |
| − | left: 50%;
| + | |
| − | -webkit-transform: translateX(-50%) translateY(-50%);
| + | |
| − | -moz-transform: translateX(-50%) translateY(-50%);
| + | |
| − | transform: translateX(-50%) translateY(-50%);
| + | |
| − | letter-spacing: 1px;
| + | |
| − | font-weight: 700;
| + | |
| − | font-size: 2em;
| + | |
| − | line-height: 2;
| + | |
| − | width: 10em;
| + | |
| − | text-align: center;
| + | |
| − | height: 2em;
| + | |
| − | color: #e74c3c;
| + | |
| − | background: #fff;
| + | |
| − | font-style: normal;
| + | |
| − | text-transform: uppercase;
| + | |
| − | opacity: 0.8;
| + | |
| − | } | + | |
| − | | + | |
| − | .scroll::after {
| + | |
| − | display: block;
| + | |
| − | content: '\2193';
| + | |
| − | color: #fff;
| + | |
| − | font-size: 3em;
| + | |
| − | line-height: 1;
| + | |
| − | } | + | |
| − | | + | |
| − | /* Header styles and animations */
| + | |
| − | | + | |
| − | .ha-header {
| + | |
| − | position: fixed;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | padding: 0;
| + | |
| − | z-index: 50;
| + | |
| − | font-family: 'Lato', Arial, sans-serif;
| + | |
| − | -webkit-transform: translateY(0%);
| + | |
| − | -moz-transform: translateY(0%);
| + | |
| − | transform: translateY(0%);
| + | |
| − | -webkit-transition: all 0.5s;
| + | |
| − | -moz-transition: all 0.5s;
| + | |
| − | transition: all 0.5s;
| + | |
| − | } | + | |
| − | | + | |
| − | .ha-header-perspective {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | position: relative;
| + | |
| − | -webkit-perspective: 1100px;
| + | |
| − | -moz-perspective: 1100px;
| + | |
| − | perspective: 1100px;
| + | |
| − | -webkit-perspective-origin: 50% 0;
| + | |
| − | -moz-perspective-origin: 50% 0;
| + | |
| − | perspective-origin: 50% 0;
| + | |
| − | } | + | |
| − | | + | |
| − | .ha-header-perspective > div {
| + | |
| − | background: #fff;
| + | |
| − | text-align: left;
| + | |
| − | padding: 0 7%;
| + | |
| − | height: 50%;
| + | |
| − | width: 100%;
| + | |
| − | margin: 0 auto;
| + | |
| − | position: relative;
| + | |
| − | text-align: justify;
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | -moz-backface-visibility: hidden;
| + | |
| − | backface-visibility: hidden;
| + | |
| − | -webkit-transition: all 0.5s;
| + | |
| − | -moz-transition: all 0.5s;
| + | |
| − | transition: all 0.5s;
| + | |
| − | overflow: hidden;
| + | |
| − | } | + | |
| − | | + | |
| − | .ha-header-front {
| + | |
| − | z-index: 2;
| + | |
| − | -webkit-transform-origin: 50% 100%;
| + | |
| − | -moz-transform-origin: 50% 100%;
| + | |
| − | transform-origin: 50% 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header-perspective .ha-header-bottom {
| + | |
| − | background: #ddd;
| + | |
| − | -webkit-transform-origin: 50% 0%;
| + | |
| − | -moz-transform-origin: 50% 0%;
| + | |
| − | transform-origin: 50% 0%;
| + | |
| − | z-index: 1;
| + | |
| − | -webkit-transform: rotateX(-90deg);
| + | |
| − | -moz-transform: rotateX(-90deg);
| + | |
| − | transform: rotateX(-90deg);
| + | |
| − | -webkit-transition: top 0.5s;
| + | |
| − | -moz-transition: top 0.5s;
| + | |
| − | transition: top 0.5s;
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Justify inline-block elements (h1 on left side, nav on right) */ | + | |
| − | .ha-header-perspective > div::after {
| + | |
| − | content: '';
| + | |
| − | display: inline-block;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Text styling */
| + | |
| − | .ha-header h1,
| + | |
| − | .ha-header h1::before,
| + | |
| − | .ha-header h1 span,
| + | |
| − | .ha-header nav,
| + | |
| − | .ha-header nav::before {
| + | |
| − | display: inline-block; | + | |
| − | vertical-align: middle;
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header h1 {
| + | |
| − | font-weight: 300;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0 1em 0 0;
| + | |
| − | color: #2d383f;
| + | |
| − | cursor: default;
| + | |
| − | height: 100%;
| + | |
| − | z-index: 1;
| + | |
| − | -webkit-transition: all 0.5s;
| + | |
| − | -moz-transition: all 0.5s;
| + | |
| − | transition: all 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header h1::before,
| + | |
| − | .ha-header nav::before {
| + | |
| − | content: '';
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header h1::after {
| + | |
| − | content: '';
| + | |
| − | width: 100px;
| + | |
| − | height: 96px;
| + | |
| − | background: #fff;
| + | |
| − | position: absolute;
| + | |
| − | z-index: 100;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | cursor: pointer;
| + | |
| − | box-shadow: inset 0 8px #2d383f, inset 0 16px #fff, inset 0 24px #2d383f, inset 0 32px #fff, inset 0 40px #2d383f, inset 0 48px #fff, inset 0 56px #2d383f;
| + | |
| − | opacity: 0;
| + | |
| − | border: 20px solid #fff;
| + | |
| − | -webkit-transition: opacity 0.5s;
| + | |
| − | -moz-transition: opacity 0.5s;
| + | |
| − | transition: opacity 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header nav {
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header nav a {
| + | |
| − | display: inline-block;
| + | |
| − | text-transform: uppercase;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | font-weight: 700;
| + | |
| − | padding: 0.2em 0.4em;
| + | |
| − | margin: 0 0.4em 0;
| + | |
| − | font-size: 0.8em;
| + | |
| − | cursor: pointer;
| + | |
| − | color: #e74c3c;
| + | |
| − | outline: none;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header nav a:hover {
| + | |
| − | color: #bc3c2f;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header nav a:last-child {
| + | |
| − | margin-right: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header .ha-header-front nav a:first-child,
| + | |
| − | .ha-header .ha-header-front nav a:last-child {
| + | |
| − | border: 2px solid #e74c3c;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header .ha-header-front nav a:first-child:hover,
| + | |
| − | .ha-header .ha-header-front nav a:last-child:hover {
| + | |
| − | border: 2px solid #bc3c2f;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Individual states */
| + | |
| − | .ha-header-rotate {
| + | |
| − | height: 15%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header-rotate .ha-header-front {
| + | |
| − | -webkit-transform: translateY(-100%) rotateX(90deg);
| + | |
| − | -moz-transform: translateY(-100%) rotateX(90deg);
| + | |
| − | transform: translateY(-100%) rotateX(90deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header-rotate .ha-header-bottom {
| + | |
| − | top: 50%;
| + | |
| − | -webkit-transition: -webkit-transform 0.5s;
| + | |
| − | -moz-transition: -moz-transform 0.5s;
| + | |
| − | transition: transform 0.5s;
| + | |
| − | -webkit-transform: rotateX(0deg) translateY(-100%);
| + | |
| − | -moz-transform: rotateX(0deg) translateY(-100%);
| + | |
| − | transform: rotateX(0deg) translateY(-100%);
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header-rotateBack {
| + | |
| − | height: 23%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header-rotateBack .ha-header-front {
| + | |
| − | -webkit-transform: translateY(0%) rotateX(0deg);
| + | |
| − | -moz-transform: translateY(0%) rotateX(0deg);
| + | |
| − | transform: translateY(0%) rotateX(0deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | .ha-header-rotateBack .ha-header-bottom {
| + | |
| − | top: 50%;
| + | |
| − | -webkit-transition: -webkit-transform 0.5s;
| + | |
| − | -moz-transition: -moz-transform 0.5s;
| + | |
| − | transition: transform 0.5s;
| + | |
| − | -webkit-transform: rotateX(-90deg);
| + | |
| − | -moz-transform: rotateX(-90deg);
| + | |
| − | transform: rotateX(-90deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | /*Adjustment*/
| + | |
| − | .content p{
| + | |
| − | color: #48a770;
| + | |
| − | }
| + | |
| − | | + | |
| − | #bodyContent h1, h2, #bodyContent h3, #bodyContent h4, #bodyContent h5{
| + | |
| − | color: #48a770;
| + | |
| − | }
| + | |
| − | | + | |
| − | main{
| + | |
| − | padding-left: 24px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #ha-header{
| + | |
| − | padding-top: 15px;
| + | |
| − | }
| + | |
| − | </style> | + | |
| | </html> | | </html> |
| | + | {{Team:NUS_Singapore/JS}} |
