Difference between revisions of "Template:Team:NUS Singapore/CSS"

(Undo revision 163944 by Chloroplast (talk))
Line 1: Line 1:
{{Team:NUS_Singapore/new_template}}
+
<html>
{{Team:NUS_Singapore/CSS}}
+
<style>
<!DOCTYPE html>
+
@charset "UTF-8";
<html lang="en" class="no-js">
+
/*
<head>
+
Animate.css - http://daneden.me/animate
<meta charset="UTF-8" />
+
Licensed under the ☺ license (http://licence.visualidiot.com/)
<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
  
<!-- <script src="js/modernizr.custom.js"></script> -->
+
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:
  
<!--[if IE]>
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  <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">
+
  
<!--Sidebar button-->
+
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.
<div id="st-trigger-effects">
+
*/
<button data-effect="st-effect-1" class="button button--rayen button--border button--round-m" data-text="More" style="z-index: 100">
+
body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
<span><img src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png"></span>
+
-webkit-backface-visibility: hidden;
</button>
+
}
</div>
+
.animated {
<!--End of Sidebar button-->
+
-webkit-animation-duration: 1s;
 +
  -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;
 +
}
  
<!--Header-->
+
.animated.hinge {
<header id="ha-header" class="ha-header ha-header-large">
+
-webkit-animation-duration: 2s;
<div class="ha-header-perspective">
+
  -moz-animation-duration: 2s;
<div id="header1" class="ha-header-front" style="height: 120px">
+
    -o-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;"/>
+
        animation-duration: 2s;
<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-->
+
  
<!--Side Bar-->
+
@-webkit-keyframes flash {
<nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto;">
+
0%, 50%, 100% {opacity: 1;}
<h2 class="icon icon-lab">Sidebar</h2>
+
25%, 75% {opacity: 0;}
<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-->
+
  
<!--Sub header-->
+
@-moz-keyframes flash {
<p class="message">Please view this wiki site on a larger screen.</p>
+
0%, 50%, 100% {opacity: 1;}
 +
25%, 75% {opacity: 0;}
 +
}
  
<section class="content">
+
@-o-keyframes flash {
<div class="content__inner">
+
0%, 50%, 100% {opacity: 1;}
<h2 class="content__title">Project Intro</h2>
+
25%, 75% {opacity: 0;}
<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;}
 +
}
  
<!-- Start of Map -->
+
.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);">
+
-webkit-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%;" />
+
-moz-animation-name: flash;
 +
-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);}
 +
}
  
<div class="CD44v6" >
+
@-moz-keyframes shake {
<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;" />
+
0%, 100% {-moz-transform: translateX(0);}
<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;">
+
10%, 30%, 50%, 70%, 90% {-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.
+
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
<p>
+
}
</div>
+
  
<div class="Cancer_cell_body">
+
@-o-keyframes shake {
<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;" />
+
0%, 100% {-o-transform: translateX(0);}
<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;">
+
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
<u>Hallmarks of cancer and Warburg effect</u><br>
+
20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
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>
+
  
<div class="Invasin_and_LLO">
+
@keyframes shake {
<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;" />
+
0%, 100% {transform: translateX(0);}
<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;">
+
10%, 30%, 50%, 70%, 90% {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.
+
20%, 40%, 60%, 80% {transform: translateX(10px);}
<p>
+
}
</div>
+
  
<div class="Quorum_Sensing">
+
.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;" />
+
-webkit-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;">
+
-moz-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.
+
-o-animation-name: shake;
<p>
+
animation-name: shake;
</div>
+
}
+
@-webkit-keyframes bounce {
<div class="backgrounds">
+
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
<div class="background__element" style="background-image: url(img/pic/Cancer_Cell.png)"></div>
+
40% {-webkit-transform: translateY(-30px);}
</div>
+
60% {-webkit-transform: translateY(-15px);}
<!-- <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);}
 +
}
  
<section>
+
@-o-keyframes bounce {
<h2> Welcome to NUS_Singapore iGEM 2016 Page! </h2>
+
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
<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>
+
40% {-o-transform: translateY(-30px);}
 +
60% {-o-transform: translateY(-15px);}
 +
}
 +
@keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 +
40% {transform: translateY(-30px);}
 +
60% {transform: translateY(-15px);}
 +
}
  
<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>
+
.bounce {
 +
-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);}
 +
}
  
<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>
+
@-moz-keyframes tada {
 +
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);}
 +
}
  
<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>
+
@-o-keyframes tada {
</section>
+
0% {-o-transform: scale(1);}
 +
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);}
 +
}
  
<section class="content content--related">
+
.tada {
<p><strong>Content Section here</strong></p>
+
-webkit-animation-name: tada;
</section>
+
-moz-animation-name: tada;
</div><!-- /st-pusher -->
+
-o-animation-name: tada;
</div><!-- /st-container -->
+
animation-name: tada;
</main>
+
}
<script src="js/lunar.js"></script>
+
@-webkit-keyframes swing {
<script src="js/imagesloaded.pkgd.min.js"></script>
+
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
<script src="js/main.js"></script>
+
20% { -webkit-transform: rotate(15deg); }
<script>
+
40% { -webkit-transform: rotate(-10deg); }
(function() {
+
60% { -webkit-transform: rotate(5deg); }
new PointsMap(document.querySelector('#interactive-2'), {
+
80% { -webkit-transform: rotate(-5deg); }
// Maximum opacity that the background element of a Point can have when the point is active (mouse gets closer to it).
+
100% { -webkit-transform: rotate(0deg); }
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);
+
  
    if (growDiv.clientHeight) {
+
@-moz-keyframes swing {
      growDiv.style.height = 0;
+
20% { -moz-transform: rotate(15deg); }
    } else {
+
40% { -moz-transform: rotate(-10deg); }
      var items = document.querySelectorAll('#grow-' + id + ' .list-group-item');
+
60% { -moz-transform: rotate(5deg); }
if (items.length > 0)
+
80% { -moz-transform: rotate(-5deg); }
growDiv.style.height = (items.length * items[0].clientHeight) + "px";
+
100% { -moz-transform: rotate(0deg); }
    }
+
}
  
    if(document.getElementById("menu-item-"+id).className.indexOf("focus") >= 0){
+
@-o-keyframes swing {
    document.getElementById("menu-item-"+id).className = document.getElementById("menu-item-"+id).className.replace("focus", "");
+
20% { -o-transform: rotate(15deg); }
    } else{
+
40% { -o-transform: rotate(-10deg); }
    document.getElementById("menu-item-"+id).className += " focus";
+
60% { -o-transform: rotate(5deg); }
    }
+
80% { -o-transform: rotate(-5deg); }
 +
100% { -o-transform: rotate(0deg); }
 +
}
  
    event.preventDefault();
+
@keyframes swing {
}
+
20% { transform: rotate(15deg); }
 +
40% { transform: rotate(-10deg); }
 +
60% { transform: rotate(5deg); }
 +
80% { transform: rotate(-5deg); }
 +
100% { transform: rotate(0deg); }
 +
}
  
var $head = $( '#ha-header' );
+
.swing {
$( '.ha-waypoint' ).each( function(i) {
+
-webkit-transform-origin: top center;
var $el = $( this ),
+
-moz-transform-origin: top center;
animClassDown = $el.data( 'animateDown' ),
+
-o-transform-origin: top center;
animClassUp = $el.data( 'animateUp' );
+
transform-origin: top center;
 +
-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 */
  
$el.waypoint( function( direction ) {
+
@-webkit-keyframes wobble {
if( !(direction !== 'down' || !animClassDown) ) {
+
  0% { -webkit-transform: translateX(0%); }
$head.attr('class', 'ha-header ' + animClassDown);
+
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
}
+
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
else if( !(direction !== 'up' || !animClassUp) ){
+
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
$head.attr('class', 'ha-header ' + animClassUp);
+
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
}
+
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
}, { offset: '100%' } );
+
  100% { -webkit-transform: translateX(0%); }
} );
+
}
  
(function($) {
+
@-moz-keyframes wobble {
 +
  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%); }
 +
}
  
var setCss = function() {
+
@-o-keyframes wobble {
if($(window).width() <= 550) {
+
  0% { -o-transform: translateX(0%); }
$('#nus_logo').css('left', "15%");
+
  15% { -o-transform: translateX(-25%) rotate(-5deg); }
$('#sci_logo').css('display', "none");
+
  30% { -o-transform: translateX(20%) rotate(3deg); }
$('#sps_logo').css('display', "none");
+
  45% { -o-transform: translateX(-15%) rotate(-3deg); }
$('#igem_logo').css('display', "none");
+
  60% { -o-transform: translateX(10%) rotate(2deg); }
}else{
+
  75% { -o-transform: translateX(-5%) rotate(-1deg); }
$('#nus_logo').css('left', "0%");
+
  100% { -o-transform: translateX(0%); }
$('#sci_logo').css('display', "block");
+
}
$('#sps_logo').css('display', "block");
+
$('#igem_logo').css('display', "block");
+
}
+
};
+
  
$(document).ready(function() {
+
@keyframes wobble {
setCss();
+
  0% { transform: translateX(0%); }
$(window).resize(setCss);
+
  15% { transform: translateX(-25%) rotate(-5deg); }
});
+
  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%); }
 +
}
  
})(jQuery);
+
.wobble {
</script>
+
-webkit-animation-name: wobble;
 +
-moz-animation-name: wobble;
 +
-o-animation-name: wobble;
 +
animation-name: wobble;
 +
}
 +
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  
<script>
+
@-webkit-keyframes pulse {
 +
    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); }
 +
}
  
$( "#canvas" )
+
.pulse {
  .mouseleave(function() {
+
-webkit-animation-name: pulse;
$('#Cancer_cell_body_text').css('display', 'none');
+
-moz-animation-name: pulse;
$('#Cancer_cell_body').css('opacity', '1');
+
-o-animation-name: pulse;
 +
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;
 +
}
 +
}
  
  $('#CD44v6_text').css('display', 'none');
+
.flip {
  $('#CD44v6').css('opacity', '1');
+
-webkit-backface-visibility: visible !important;
 +
-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;
 +
    }
 +
}
  
  $('#Invasin_and_LLO_text').css('display', 'none');
+
.flipInX {
  $('#Invasin_and_LLO').css('opacity', '1');
+
-webkit-backface-visibility: visible !important;
 +
-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;
 +
    }
 +
}
  
  $('#Quorum_Sensing_text').css('display', 'none');
+
@-moz-keyframes flipOutX {
  $('#Quorum_Sensing').css('opacity', '1');
+
    0% {
 +
        -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;
 +
    }
 +
}
  
$( "div.CD44v6" )
+
.flipOutX {
  .mouseenter(function() {
+
-webkit-animation-name: flipOutX;
  $('#Cancer_cell_body').css('opacity', '0.2');
+
-webkit-backface-visibility: visible !important;
  $('#Cancer_cell_body_text').css('display', 'none');
+
-moz-animation-name: flipOutX;
  $('#Quorum_Sensing').css('opacity', '0.2');
+
-moz-backface-visibility: visible !important;
  $('#Quorum_Sensing_text').css('display', 'none');
+
-o-animation-name: flipOutX;
  $('#Invasin_and_LLO').css('opacity', '0.2');
+
-o-backface-visibility: visible !important;
  $('#Invasin_and_LLO_text').css('display', 'none');
+
animation-name: flipOutX;
 +
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;
 +
    }
 +
}
  
  $('#CD44v6').css('opacity', '1');
+
.flipInY {
    $('#CD44v6_text').css('display', 'block');
+
-webkit-backface-visibility: visible !important;
    $('#CD44v6_text').textillate({ in: {  
+
-webkit-animation-name: flipInY;
    effect: 'fadeInUpBig',
+
-moz-backface-visibility: visible !important;
    sync: true
+
-moz-animation-name: flipInY;
    } });
+
-o-backface-visibility: visible !important;
  })
+
-o-animation-name: flipInY;
  .mouseleave(function() {
+
backface-visibility: visible !important;
  $('#CD44v6_text').css('display', 'none');
+
animation-name: flipInY;
  $('.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;}
 +
}
  
  $( "div.Cancer_cell_body" )
+
@-moz-keyframes fadeIn {
  .mouseenter(function() {
+
0% {opacity: 0;}
  $('#CD44v6_text').css('display', 'none');
+
100% {opacity: 1;}
    $('#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;}
 +
}
  
    $('#Cancer_cell_body_text').css('display', 'block');
+
@keyframes fadeIn {
    $('#Cancer_cell_body').css('opacity', '1');
+
0% {opacity: 0;}
    $('#Cancer_cell_body_text').textillate({ in: {
+
100% {opacity: 1;}
    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);
 +
}
 +
}
  
  $( "div.Invasin_and_LLO" )
+
@-moz-keyframes fadeInUp {
  .mouseenter(function() {
+
0% {
  $('#CD44v6_text').css('display', 'none');
+
opacity: 0;
    $('#CD44v6').css('opacity', '0.2');
+
-moz-transform: translateY(20px);
  $('#Cancer_cell_body').css('opacity', '0.2');
+
}
  $('#Cancer_cell_body_text').css('display', 'none');
+
  $('#Quorum_Sensing').css('opacity', '0.2');
+
100% {
  $('#Quorum_Sensing_text').css('display', 'none');
+
opacity: 1;
   
+
-moz-transform: translateY(0);
 +
}
 +
}
  
    $('#Invasin_and_LLO_text').css('display', 'block');
+
@-o-keyframes fadeInUp {
    $('#Invasin_and_LLO').css('opacity', '1');
+
0% {
    $('#Invasin_and_LLO_text').textillate({ in: {  
+
opacity: 0;
    effect: 'fadeInDownBig',
+
-o-transform: translateY(20px);
    sync: true
+
}
    } });
+
  })
+
100% {
  .mouseleave(function() {
+
opacity: 1;
  $('#Invasin_and_LLO_text').css('display', 'none');
+
-o-transform: translateY(0);
  $('#Invasin_and_LLO_text').textillate('start');
+
}
});
+
}
  
 +
@keyframes fadeInUp {
 +
0% {
 +
opacity: 0;
 +
transform: translateY(20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
transform: translateY(0);
 +
}
 +
}
  
  $( "div.Quorum_Sensing" )
+
.fadeInUp {
  .mouseenter(function() {
+
-webkit-animation-name: fadeInUp;
  $('#CD44v6_text').css('display', 'none');
+
-moz-animation-name: fadeInUp;
    $('#CD44v6').css('opacity', '0.2');
+
-o-animation-name: fadeInUp;
  $('#Cancer_cell_body').css('opacity', '0.2');
+
animation-name: fadeInUp;
  $('#Cancer_cell_body_text').css('display', 'none');
+
}
  $('#Invasin_and_LLO').css('opacity', '0.2');
+
@-webkit-keyframes fadeInDown {
  $('#Invasin_and_LLO_text').css('display', 'none');
+
0% {
   
+
opacity: 0;
 +
-webkit-transform: translateY(-20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translateY(0);
 +
}
 +
}
  
    $('#Quorum_Sensing_text').css('display', 'block');
+
@-moz-keyframes fadeInDown {
    $('#Quorum_Sensing').css('opacity', '1');
+
0% {
    $('#Quorum_Sensing_text').textillate({ in: {  
+
opacity: 0;
    effect: 'fadeInLeftBig',
+
-moz-transform: translateY(-20px);
    sync: true
+
}
    } });
+
  })
+
100% {
  .mouseleave(function() {
+
opacity: 1;
  $('#Quorum_Sensing_text').css('display', 'none');
+
-moz-transform: translateY(0);
  $('#Quorum_Sensing_text').textillate('start');
+
}
});
+
}
  
// $('#CD44v6').mouseenter(function() {
+
@-o-keyframes fadeInDown {
  // $('#CD44v6').css('display', 'none');
+
0% {
// });
+
opacity: 0;
// $( "#CD44v6" ).mouseleave(function() {
+
-o-transform: translateY(-20px);
  // $('#CD44v6').css('display', 'block');
+
}
// });
+
</script>
+
100% {
<!-- text animation-->
+
opacity: 1;
<link rel="stylesheet" type="text/css" href="css/animate.css" />
+
-o-transform: translateY(0);
<script src="js/jquery.textillate.js"></script>
+
}
<script src="js/jquery.lettering.js"></script>
+
}
<!-- end of text animation-->
+
 
               
+
@keyframes fadeInDown {
                <!-- and operator -->
+
0% {
<script>
+
opacity: 0;
var andop = function (a, b) {
+
transform: translateY(-20px);
        if (a) {
+
}
          if (b) {
+
            return true;
+
100% {
          } else {
+
opacity: 1;
            return false;
+
transform: translateY(0);
          }
+
}
        } else {
+
}
          return false;
+
 
                }
+
.fadeInDown {
              };
+
-webkit-animation-name: fadeInDown;
</script>
+
-moz-animation-name: fadeInDown;
</body>
+
-o-animation-name: fadeInDown;
 +
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}}
 

Revision as of 10:39, 4 October 2016