Difference between revisions of "Team:IONIS Paris/Team"

Line 1: Line 1:
−
<html>
+
{{IONIS_Paris/JS}}
−
<style type="text/css">
+
{{IONIS_Paris-testcss}}
 +
<html lang="en">
 +
<head>
 +
<meta charset="UTF-8" />
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 +
<title >IONIS Paris</title>
  
−
#proto a{
+
<!-- Google fonts -->
−
text-decoration: none;
+
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
−
}
+
  
−
#proto a:link {
+
<!-- font awesome -->
−
color: #66cdaa;
+
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
−
}
+
  
 +
<!-- favicon -->
 +
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
 +
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
  
−
#proto a:hover {
 
−
color:#b22222;
 
−
text-decoration: none;
 
−
}
 
  
−
/* ------------------------GRID -------------------------------*/
+
</head>
−
  .grid {
+
−
position: relative;
+
−
margin: 0 auto;
+
−
list-style: none;
+
−
text-align: center;
+
−
}
+
  
−
/* Common style */
+
<body>
−
.grid figure {
+
<div class="topbar animated fadeInLeftBig"></div>
−
position: relative;
+
−
float: left;
+
−
overflow: hidden;
+
−
margin: 0.8em; /*change here for spacing*/
+
−
width: 30.8%;
+
−
text-align: center;
+
−
cursor: pointer;
+
−
}
+
  
−
.grid figure img {
+
<!-- BANNER -->
−
position: relative;
+
−
display: block;
+
−
max-width: 100%;
+
−
opacity: 1;
+
−
}
+
  
−
.grid figure figcaption {
+
<div class="banner row" id="banner" style="width:101%">
−
padding: 2em;
+
<div class="parallax text-center" style="background-image: url(https://static.igem.org/mediawiki/2015/e/ee/DSC_1133.JPG);">
−
color: #fff;
+
<div class="parallax-pattern-overlay">
−
text-transform: uppercase;
+
<div class="container text-center" style="height:580px;padding-top:200px;">
−
font-size: 1.25em;
+
<h1 class="intro wow zoomIn" wow-data-delay="0.4s" wow-data-duration="0.9s"  style="font-family:sans-serif; color:#B00000; background-color:rgba(255,255,255,0.2);" >TEAM MEMBERS</h1>
−
-webkit-backface-visibility: hidden;
+
−
backface-visibility: hidden;
+
−
}
+
  
−
.grid figure figcaption::before,
+
</div>
−
.grid figure figcaption::after {
+
</div>
−
pointer-events: none;
+
</div>
−
}
+
</div>
  
−
.grid figure figcaption,
+
  <!--img src="https://static.igem.org/mediawiki/2015/4/40/Boston-MIT-01.png" alt="banner"-->
−
.grid figure figcaption > a {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
width: 100%;
+
−
height: 100%;
+
−
}
+
  
−
/* Anchor will cover the whole item by default */
+
<!-- works -->
−
/* For some effects it will show as a button */
+
−
.grid figure figcaption > a {
+
−
z-index: 1000;
+
−
text-indent: 200%;
+
−
white-space: nowrap;
+
−
font-size: 0;
+
−
opacity: 0;
+
−
}
+
  
−
.grid figure h2 {
+
<div id="about"  class="container spacer about">
−
padding: 0;
+
<h2 class="text-center wowload fadeInUp" style="color:#ff0000"><big>IONIS team</big></h2> 
−
word-spacing: -0.15em;
+
<div class="row">
−
font-weight: 700;
+
<div class="col-sm-6 wowload fadeInLeft">
−
}
+
<h4><i class="fa fa-users" style="color:#b22222"></i> Introduction to the IONIS iGEM team</h4>
 +
<p align="justify">IONIS iGEM is a French iGEM team composed of students of the <font style="color:#66cdaa">IONIS Education group</font>, first private education group in France.
 +
The IONIS private group is composed of several engineering schools, among them students from 3 of them have decided to create an iGEM team in 2015: Sup’Biotech specialized in Biotechnology, EPITA focused on IT systems and the school of art design:E-ART SUP. Moreover, a student of the Paris Descartes University specialized in Arts and design is as well a team member.
 +
</p>
 +
</div>
 +
 +
<div class="col-sm-6 wowload fadeInRight">
 +
<h4><i class="fa fa-university" style="color:#b22222"></i>A multidisciplinary team</h4>
 +
<p align="justify">The Bio-Console, the project that represents the most our team: IONIS iGEM. This console uses the field of <font style="color:#66cdaa">biology </font>and<font style="color:#66cdaa"> computer science</font> to create a funny, playful and responsible game. Our team is composed of biologists , computer scientists and designers who have all the skills required for this project.
 +
</p>   
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<!-- MEMBERS -->
 +
<h2 class="text-center  wowload fadeInUp" style="color:#ff0000">Members</h2>
 +
<h4 class="text-center  wowload fadeInLeft">Our creative team that is making everything possible</h4>
 +
<br><br>
 +
 +
  
−
.grid figure h2,
+
−
.grid figure p {
+
<div id="about" class="about">
−
margin: 0;
+
<div class="row"  style="width:90%; margin-left:60px; padding-top:5; padding-bottom:0;">
−
}
+
  
−
.grid figure p {
 
−
letter-spacing: 1px;
 
−
font-size: 68.5%;
 
−
}
 
  
−
/* Individual effects */
+
<div class="col-sm-6 wowload fadeInLeft grid2" style="width:30%">
 +
<span>
 +
<figure class="effect-oscar2">
 +
<center><img src="https://static.igem.org/mediawiki/2015/d/d3/Avatar-04.png" alt="img01" class="img-responsive" style="width:100%;height:100%" /></center>
 +
<figcaption style="width:100%;height:100%">
 +
<img src="https://static.igem.org/mediawiki/2014/1/1d/MathieuEvry.png" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 +
 +
 
 +
<div class="col-sm-6 wowload fadeInRight" style="visibility: visible; animation-name: fadeInRight; width:70%; padding-top:0; margin:0">
 +
<div class="spacer" style="padding-top:0;margin:20px;"><h2 style="padding:0"><i class="fa fa-flask" style="color:#00BFFF"></i> Matthieu Da Costa</h2>
 +
<p style="padding-top:0px"> TEAM MANAGER
 +
<br>23 years old
 +
<br>Sup'Biotech, 5<sup>th</sup> year
 +
<br>
 +
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/matthieu-da-costa/5b/343/a5"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/matt_fdc"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
  </div> 
 +
</div>
 +
 +
 +
 +
<div id="about" class="about" style="padding-top:0">
 +
<div class="row"  style="width:90%;  margin-left:120px; padding-top:0; padding-bottom:0;">
  
−
.grid2 {
+
<div class="col-sm-6 wowload fadeInLeft" style="visibility: visible; animation-name: fadeLeft; width:65%; padding-top:0; margin:0">
−
position: relative;
+
<div class="spacer" style="padding-top:0;margin:20px;" align="right"><h2 style="padding:0"><i class="fa fa-flask" style="color:#FFD700"></i> Johanna Chesnel</h2>
−
margin: 0 auto;
+
<p style="padding-top:0px margin:20px;" align="right"> BIOLOGY
−
list-style: none;
+
<br>22 years old
−
text-align: center;
+
<br>Sup'Biotech, 5<sup>th</sup> year
−
}
+
<br>
 +
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social" align="right">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/johanna-chesnel/76/53a/a"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/Johannaches"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
<div class="col-sm-6 wowload fadeInRight grid2" style="width:30%;">
 +
<span >
 +
<figure class="effect-milo">
 +
<img src="https://static.igem.org/mediawiki/2015/8/81/Avatar-07.png" alt="img01" class="img-responsive" style="width:100%;height:100%" />
 +
<figcaption style="width:100%;height:100%">
 +
<img src="https://static.igem.org/mediawiki/2014/1/1d/MathieuEvry.png" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
 +
<div id="about" class="about" style="padding-top:0">
 +
<div class="row"  style="width:90%; margin-left:60px; padding-top:0; padding-bottom:0">
  
−
/* Common style */
 
−
.grid2 figure {
 
−
position: relative;
 
−
float: center;
 
−
overflow: hidden;
 
−
/*change here for spacing*/
 
−
cursor: pointer;
 
−
}
 
  
−
.grid2 figure img {
+
<div class="col-sm-6 wowload fadeInLeft grid2" style="width:30%">
−
position: relative;
+
<span>
−
display: block;
+
<figure class="effect-oscar2">
−
max-width: 100%;
+
<center><img src="https://static.igem.org/mediawiki/2015/b/bf/Avatar-06.png" alt="img01" class="img-responsive" style="width:100%;height:100%" /></center>
−
opacity: 1;
+
<figcaption style="width:100%;height:100%">
−
}
+
<img src="" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 +
 +
 
 +
<div class="col-sm-6 wowload fadeInRight" style="visibility: visible; animation-name: fadeInRight; width:70%; padding-top:0; margin:0">
 +
<div class="spacer" style="padding-top:0;margin:20px;"><h2 style="padding:0"><i class="fa fa-flask" style="color:#228B22"></i> Marwa Zerhouni</h2>
 +
<p style="padding-top:0px"> BIOLOGY
 +
<br>23 years old
 +
<br>Sup'Biotech, 5<sup>th</sup> year
 +
<br>
 +
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/marwa-zerhouni/96/718/643/en"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/Zerhouni_Marwa"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</div> 
 +
</div>
 +
 +
 
 +
<div id="about" class="about" style="padding-top:0">
 +
<div class="row"  style="width:90%;  margin-left:120px; padding-top:0;padding-bottom:0">
  
−
.grid2 figure figcaption {
+
<div class="col-sm-6 wowload fadeInLeft" style="visibility: visible; animation-name: fadeInLeft; width:65%; padding-top:0; margin:0">
−
color: #fff;
+
<div class="spacer" style="padding-top:0;margin:20px;" align="right"><h2 style="padding:0"><i class="fa fa-flask" style="color:#191970"></i> Nicolas Cornille</h2>
−
text-transform: uppercase;
+
<p style="padding-top:0px margin:20px;" align="right"> BIOLOGY
−
font-size: 1.25em;
+
<br>22 years old
−
-webkit-backface-visibility: hidden;
+
<br>Sup'Biotech, 5<sup>th</sup> year
−
backface-visibility: hidden;
+
<br>
−
}
+
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social" align="right">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/nicolas-cornille/98/58/251"><i class="fa fa-linkedin fa-2x"></i></a>
 +
 
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
<div class="col-sm-6 wowload fadeInRight grid2" style="width:30%;">
 +
<span >
 +
<figure class="effect-oscar2">
 +
<img src="https://static.igem.org/mediawiki/2015/e/ec/Avatar-01.png" alt="img01" class="img-responsive" style="width:100%;height:100%" />
 +
<figcaption style="width:100%;height:100%">
 +
<img src="" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
 +
 +
<div id="about" class="about" style="padding-top:0">
 +
<div class="row"  style="width:90%; margin-left:60px; padding-top:0; padding-bottom:0">
  
−
.grid2 figure figcaption::before,
 
−
.grid2 figure figcaption::after {
 
−
pointer-events: none;
 
−
}
 
  
−
.grid2 figure figcaption,
+
<div class="col-sm-6 wowload fadeInLeft grid2" style="width:30%">
−
.grid2 figure figcaption > a {
+
<span>
−
position: absolute;
+
<figure class="effect-oscar2">
−
top: 0px;
+
<center><img src="https://static.igem.org/mediawiki/2015/4/40/Pauline-1.png" alt="img01" class="img-responsive" style="width:100%;height:100%" /></center>
−
left: 0;
+
<figcaption style="width:100%;height:100%">
−
right:0;
+
<img src="" class="img-responsive"  style="width:100%;height:100%">     
−
width: 100%;
+
</figcaption>
−
height: 100%;
+
</figure>
−
}
+
</span>
 +
</div>
 +
 +
 
 +
<div class="col-sm-6 wowload fadeInRight" style="visibility: visible; animation-name: fadeInRight; width:70%; padding-top:0; margin:0">
 +
<div class="spacer" style="padding-top:0;margin:20px;"><h2 style="padding:0"><i class="fa fa-flask" style="color:#663399"></i> Pauline Trébulle</h2>
 +
<p style="padding-top:0px"> BIOLOGY
 +
<br>21 years old
 +
<br>Sup'Biotech, 5<sup>th</sup> year
 +
<br>
 +
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/pauline-trébulle/79/499/20b"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/ptrebulle"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</div> 
 +
</div>
 +
 +
 +
 +
<div id="about" class="about" style="padding-top:0">
 +
<div class="row"  style="width:90%; margin-left:120px; padding-top:0; padding-bottom:0;">
  
 +
<div class="col-sm-6 wowload fadeInLeft" style="visibility: visible; animation-name: fadeInLeft; width:65%; padding-top:0; margin:0">
 +
<div class="spacer" style="padding-top:0;margin:20px;" align="right"><h2 style="padding:0"><i class="fa fa-flask" style="color:#DC143C"></i> Gilles Defrel </h2>
 +
<p style="padding-top:0px margin:20px;" align="right"> BIOLOGY
 +
<br>24 years old
 +
<br>Sup'Biotech, 5<sup>th</sup> year
 +
<br>
 +
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social" align="right">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/gilles-defrel/90/939/a32"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/Gilles_Df"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
<div class="col-sm-6 wowload fadeInRight grid2" style="width:30%;">
 +
<span >
 +
<figure class="effect-oscar2">
 +
<img src="https://static.igem.org/mediawiki/2015/6/6b/Gilles-1.png" alt="img01" class="img-responsive" style="width:100%;height:100%" />
 +
<figcaption style="width:100%;height:100%">
 +
<img src="" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
<div id="about" class="about" style="padding-top:0">
 +
<div class="row"  style="width:90%; margin-left:60px; padding-top:0; padding-bottom:0;">
  
−
/*---------------*/
 
−
/***** Oscar *****/
 
−
/*---------------*/
 
  
−
figure.effect-oscar2 {
+
<div class="col-sm-6 wowload fadeInLeft grid2" style="width:30%">
−
/* background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
+
<span>
−
background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/
+
<figure class="effect-oscar2">
−
}
+
<center><img src="https://static.igem.org/mediawiki/2015/7/78/Armelle-1.png" alt="img01" class="img-responsive" style="width:100%;height:100%" /></center>
 +
<figcaption style="width:100%;height:100%">
 +
<img src="" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 +
 +
 
 +
<div class="col-sm-6 wowload fadeInRight" style="visibility: visible; animation-name: fadeInRight; width:70%; padding-top:0; margin:0">
 +
<div class="spacer" style="padding-top:0;margin:20px;"><h2 style="padding:0"><i class="fa fa-flask" style="color:#98FB98"></i> Armelle Louisy</h2>
 +
<p style="padding-top:0px"> COMMUNICATION
 +
<br>23 years old
 +
<br>Sup'Biotech, 5<sup>th</sup> year
 +
<br>
 +
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/armelle-louisy/69/b24/983"><i class="fa fa-linkedin fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</div> 
 +
</div>
 +
 +
 +
<div id="about" class="about" style="padding-top:0">
 +
<div class="row"  style="width:90%;  margin-left:120px; padding-top:0; padding-bottom:0;">
  
−
/*figure.effect-oscar img {
+
<div class="col-sm-6 wowload fadeInLeft" style="visibility: visible; animation-name: fadeInLeft; width:65%; padding-top:0; margin:0">
−
opacity: 0.9;
+
<div class="spacer" style="padding-top:0;margin:20px;" align="right"><h2 style="padding:0"><i class="fa fa-flask" style="color:#FF4500"></i> Hugo Cremaschi </h2>
−
-webkit-transition: opacity 0.35s;
+
<p style="padding-top:0px margin:20px;" align="right"> BIOLOGY
−
transition: opacity 0.35s;
+
<br>24 years old
−
}
+
<br>Sup'Biotech, 5<sup>th</sup> year
−
*/
+
<br>
−
figure.effect-oscar2 figcaption {
+
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social" align="right">
 +
 
 +
  <a href="https://www.linkedin.com/pub/hugo-cremaschi/a4/b0a/b7a"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/LaCremash"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
<div class="col-sm-6 wowload fadeInRight grid2" style="width:30%;">
 +
<span >
 +
<figure class="effect-oscar2">
 +
<img src="https://static.igem.org/mediawiki/2015/9/90/Avatar-02.png" alt="img01" class="img-responsive" style="width:100%;height:100%" />
 +
<figcaption style="width:100%;height:100%">
 +
<img src="" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 +
</div>
 +
</div>
  
−
/* background-color: rgba(58,52,42,0.7);
+
−
-webkit-transition: background-color 0.35s;
+
−
transition: background-color 0.35s;*/
+
<div id="about" class="about" style="padding-top:0">
−
}
+
<div class="row"  style="width:90%; margin-left:60px; padding-top:0; padding-bottom:0;">
  
−
figure.effect-oscar2 figcaption::before {
 
−
position: absolute;
 
−
content: '';
 
−
}
 
  
−
figure.effect-oscar2 figcaption img {
+
<div class="col-sm-6 wowload fadeInLeft grid2" style="width:30%">
−
font-size: 25px;
+
<span>
−
margin: 0;
+
<figure class="effect-oscar2">
−
line-height: 1em;
+
<center><img src="https://static.igem.org/mediawiki/2015/1/1e/Lionel.jpg" alt="img01" class="img-responsive" style="width:100%;height:100%" /></center>
−
-webkit-transition: -webkit-transform 0.35s;
+
<figcaption style="width:100%;height:100%">
−
transition: transform 0.35s;
+
<img src="" class="img-responsive"  style="width:100%;height:100%">     
−
-webkit-transform: translate3d(0,100%,0);
+
</figcaption>
−
transform: translate3d(0,100%,0);
+
</figure>
−
}
+
</span>
 +
</div>
 +
 +
 
 +
<div class="col-sm-6 wowload fadeInRight" style="visibility: visible; animation-name: fadeInRight; width:70%; padding-top:0; margin:0">
 +
<div class="spacer" style="padding-top:0;margin:20px;"><h2 style="padding:0"><i class="fa fa-flask" style="color:#8B0000"></i> Lionel Chesnais</h2>
 +
<p style="padding-top:0px"> DESIGN
 +
<br>24 years old
 +
<br>Sup'Biotech, 5<sup>th</sup> year
 +
<br>
 +
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social">
 +
 
 +
<a href="https://www.linkedin.com/pub/lionel-chesnais/90/954/98a"><i class="fa fa-linkedin fa-2x"></i></a>
 +
<a href="https://twitter.com/LioChesnais"><i class="fa fa-twitter fa-2x"></i></a>  
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</div> 
 +
</div>
 +
 +
 +
 +
<div id="about" class="about" style="padding-top:0">
 +
<div class="row"  style="width:90%;  margin-left:120px; padding-top:0; padding-bottom:0;">
  
−
figure.effect-oscar2 figcaption::before {
+
<div class="col-sm-6 wowload fadeInLeft" style="visibility: visible; animation-name: fadeInLeft; width:65%; padding-top:0; margin:0">
−
opacity: 0;
+
<div class="spacer" style="padding-top:0;margin:20px;" align="right"><h2 style="padding:0"><i class="fa fa-flask" style="color:#66CDAA"></i> Paul-Louis Nech </h2>
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
<p style="padding-top:0px margin:20px;" align="right"> COMPUTER SCIENCE
−
transition: opacity 0.35s, transform 0.35s;
+
<br>23 years old
−
-webkit-transform: scale(0);
+
<br>EPITA, 5<sup>th</sup> year
−
transform: scale(0);
+
<br>
−
}
+
</p>
−
 
+
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
−
figure.effect-oscar2:hover figcaption img {
+
−
opacity:1;
+
−
-webkit-transform: translateX(0);
+
−
-moz-transform: translateX(0);
+
−
-o-transform: translateX();
+
−
-ms-transform: translateX(0);
+
−
transform: translateX(0);
+
−
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
+
−
filter: alpha(opacity=100);
+
−
opacity: 1;
+
−
-webkit-transition: all 0.3s ease-in-out;
+
−
-moz-transition: all 0.3s ease-in-out;
+
−
-o-transition: all 0.3s ease-in-out;
+
−
-ms-transition: all 0.3s ease-in-out;
+
−
transition: all 0.3s ease-in-out;
+
 
 
−
}
+
<div class="social" align="right">
 +
 
 +
  <a href="https://fr.linkedin.com/in/plnech"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/PaulLouisNech"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
<div class="col-sm-6 wowload fadeInRight grid2" style="width:30%;">
 +
<span >
 +
<figure class="effect-oscar2">
 +
<img src="https://static.igem.org/mediawiki/2015/9/95/Paul_Louis-1.png" alt="img01" class="img-responsive" style="width:100%;height:100%" />
 +
<figcaption style="width:100%;height:100%">
 +
<img src="" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 +
</div>
 +
</div>
  
−
figure.effect-oscar2:hover figcaption::before,
+
<div id="about" class="about" style="padding-top:0">
−
figure.effect-oscar2:hover p {
+
<div class="row"  style="width:90%; margin-left:60px; padding-top:0; padding-bottom:0;">
−
opacity: 1;
+
−
-webkit-transform: scale(1);
+
−
transform: scale(1);
+
−
}
+
−
+
−
figure.effect-oscar2:hover figcaption {
+
−
background-color: rgba(0,0,0,0.8);
+
−
}
+
  
−
figure.effect-oscar2:hover img {
 
−
opacity: 0.4;
 
−
}
 
−
 
−
 
−
.social a:link{
 
−
color:#66cdaa
 
−
}
 
−
.social a:hover{
 
−
color:#333
 
−
}
 
  
 +
<div class="col-sm-6 wowload fadeInLeft grid2" style="width:30%">
 +
<span>
 +
<figure class="effect-oscar2">
 +
<center><img src="https://static.igem.org/mediawiki/2015/b/bd/Goulwen-1.png" alt="img01" class="img-responsive" style="width:100%;height:100%" /></center>
 +
<figcaption style="width:100%;height:100%">
 +
<img src="" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 
 
−
/*---------------*/
+
 
−
/***** Milo *****/
+
<div class="col-sm-6 wowload fadeInRight" style="visibility: visible; animation-name: fadeInRight; width:70%; padding-top:0; margin:0">
−
/*---------------*/
+
<div class="spacer" style="padding-top:0;margin:20px;"><h2 style="padding:0"><i class="fa fa-flask" style="color:#FA8072"></i> Goulwen Mintec</h2>
 +
<p style="padding-top:0px"> COMPUTER SCIENCE
 +
<br>22 years old
 +
<br>EPITA, 5<sup>th</sup> year
 +
<br>
 +
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/goulwen-mintec/88/a6a/4ab"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/GMintec"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</div> 
 +
</div>
 +
 +
 +
<div id="about" class="about" style="padding-top:0">
 +
<div class="row"  style="width:90%;  margin-left:120px; padding-top:0; padding-bottom:0;">
  
−
 
+
<div class="col-sm-6 wowload fadeInLeft" style="visibility: visible; animation-name: fadeInLeft; width:65%; padding-top:0; margin:0">
−
figure.effect-milo figcaption::before {
+
<div class="spacer" style="padding-top:0;margin:20px;" align="right"><h2 style="padding:0"><i class="fa fa-flask" style="color:#F0E68C"></i> Pascal Charleton </h2>
−
opacity: 0;
+
<p style="padding-top:0px margin:20px;" align="right"> DESIGN
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
<br>24 years old
−
transition: opacity 0.35s, transform 0.35s;
+
<br>E artsup, 5<sup>th</sup> year
−
-webkit-transform: scale(0);
+
<br>
−
transform: scale(0);
+
</p>
−
}
+
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social" align="right">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/pascal-charleton/61/3a6/5"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/PasceW"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
 
 
−
figure.effect-milo figcaption::before {
+
<div class="col-sm-6 wowload fadeInRight grid2" style="width:30%;">
−
position: absolute;
+
<span >
−
content: '';
+
<figure class="effect-oscar2">
−
}
+
<img src="https://static.igem.org/mediawiki/2015/5/59/Pascal-1.png" alt="img01" class="img-responsive" style="width:100%;height:100%" />
 +
<figcaption style="width:100%;height:100%">
 +
<img src="" class="img-responsive"  style="width:100%;height:100%">     
 +
</figcaption>
 +
</figure>
 +
</span>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div id="about" class="about" style="padding-top:0;">
 +
<div class="row"  style="width:90%; margin-left:60px; padding-top:0; padding-bottom:0">
  
  
−
figure.effect-milo  img{
+
<div class="col-sm-6 wowload fadeInLeft grid2" style="width:30%">
−
opacity:1;
+
<span>
−
}
+
<figure class="effect-oscar2">
−
 
+
<center><img src="https://static.igem.org/mediawiki/2015/c/c1/Avatar-03.png" alt="img01" class="img-responsive" style="width:100%;height:100%" /></center>
−
 
+
<figcaption style="width:100%;height:100%">
−
figure.effect-milo:hover img {
+
<img src="" class="img-responsive"  style="width:100%;height:100%">     
−
opacity: 0;
+
</figcaption>
−
-webkit-transform: translate3d(0,0,0) scale(1);
+
</figure>
−
transform: translate3d(0,0,0) scale(1);
+
</span>
−
}
+
</div>
−
 
+
−
 
+
−
figure.effect-milo ficaption img {
+
−
opacity: 0;
+
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
−
transition: opacity 0.35s, transform 0.35s;
+
−
-webkit-transform: translate3d(-40px,0,0);
+
−
transform: translate3d(-40px,0,0);
+
−
}
+
−
 
+
−
figure.effect-milo:hover ficaption img {
+
−
opacity: 1;
+
−
-webkit-transform: translate3d(0,0,0);
+
−
transform: translate3d(0,0,0);
+
−
}
+
−
 
+
−
figure.effect-milo:hover img {
+
−
opacity: 0;
+
−
}
+
−
 
+
−
/* EFFECT OSCAR !!! */
+
−
 
+
−
figure.effect-oscar {
+
−
/* background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
+
−
background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/
+
−
}
+
−
 
+
−
/*figure.effect-oscar img {
+
−
opacity: 0.9;
+
−
-webkit-transition: opacity 0.35s;
+
−
transition: opacity 0.35s;
+
−
}
+
−
*/
+
−
figure.effect-oscar figcaption {
+
−
padding: 15%;
+
−
background-color:rgba(0,0,0,0.3)
+
−
/* background-color: rgba(58,52,42,0.7);
+
−
-webkit-transition: background-color 0.35s;
+
−
transition: background-color 0.35s;*/
+
−
}
+
−
 
+
−
figure.effect-oscar figcaption::before {
+
−
position: absolute;
+
−
top: 30px;
+
−
right: 30px;
+
−
bottom: 30px;
+
−
left: 30px;
+
−
border: 1px solid #fff;
+
−
content: '';
+
−
}
+
−
 
+
−
figure.effect-oscar h2 {
+
−
margin: 0;
+
−
font-size:35px;
+
−
padding-bottom:15px;
+
−
padding-left:0;
+
−
line-height: 1em;
+
−
-webkit-transition: -webkit-transform 0.35s;
+
−
transition: transform 0.35s;
+
−
-webkit-transform: translate3d(0,100%,0);
+
−
transform: translate3d(0,100%,0);
+
−
}
+
−
 
+
−
figure.effect-oscar figcaption::before,
+
−
figure.effect-oscar p {
+
−
opacity: 0;
+
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
−
transition: opacity 0.35s, transform 0.35s;
+
−
-webkit-transform: scale(0);
+
−
transform: scale(0);
+
−
}
+
−
 
+
−
figure.effect-oscar:hover h2 {
+
−
-webkit-transform: translate3d(0,0,0);
+
−
transform: translate3d(0,0,0);
+
−
}
+
−
 
+
−
figure.effect-oscar:hover figcaption::before,
+
−
figure.effect-oscar:hover p {
+
−
opacity: 1;
+
−
-webkit-transform: scale(1);
+
−
transform: scale(1);
+
−
}
+
−
 
+
−
figure.effect-oscar:hover figcaption {
+
−
background-color: rgba(0,0,0,0.8);
+
−
}
+
−
 
+
−
figure.effect-oscar:hover img {
+
−
opacity: 0.4;
+
 
 
−
}
+
 
−
/*---------------*/
+
<div class="col-sm-6 wowload fadeInRight" style="visibility: visible; animation-name: fadeInRight; width:70%; padding-top:0; margin:0">
−
/***** Chico *****/
+
<div class="spacer" style="padding-top:0;margin:20px;"><h2 style="padding:0"><i class="fa fa-flask" style="color:#FF1493"></i> Marine Mohmmed</h2>
−
/*---------------*/
+
<p style="padding-top:0px"> DESIGN
 +
<br>24 years old
 +
<br>Paris Descartes, Master
 +
<br>
 +
</p>
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 +
 +
<div class="social">
 +
 
 +
  <a href="https://fr.linkedin.com/pub/marine-mohmmed/62/116/72a"><i class="fa fa-linkedin fa-2x"></i></a>
 +
  <a href="https://twitter.com/Rinrinator"><i class="fa fa-twitter fa-2x"></i></a>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</div> 
 +
</div>
 +
 +
 +
 +
 +
  
−
figure.effect-chico img {
 
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 
−
transition: opacity 0.35s, transform 0.35s;
 
−
-webkit-transform: scale(1.12);
 
−
transform: scale(1.12);
 
−
}
 
−
 
−
figure.effect-chico:hover img {
 
−
opacity: 0.5;
 
−
-webkit-transform: scale(1);
 
−
transform: scale(1);
 
−
}
 
−
 
−
figure.effect-chico figcaption {
 
−
padding: 2em;
 
−
}
 
−
 
−
figure.effect-chico figcaption::before {
 
−
position: absolute;
 
−
top: 30px;
 
−
right: 30px;
 
−
bottom: 30px;
 
−
left: 30px;
 
−
border: 1px solid #fff;
 
−
content: '';
 
−
-webkit-transform: scale(1.1);
 
−
transform: scale(1.1);
 
−
background: rgba(0,0,0,0.5);
 
−
}
 
−
 
−
figure.effect-chico figcaption::before,
 
−
figure.effect-chico p {
 
−
opacity: 0;
 
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 
−
transition: opacity 0.35s, transform 0.35s;
 
−
}
 
−
 
−
figure.effect-chico h2 {
 
−
padding: 20% 0 20px 0;
 
−
}
 
−
 
−
figure.effect-chico p {
 
−
margin: 0 auto;
 
−
max-width: 200px;
 
−
-webkit-transform: scale(1.5);
 
−
transform: scale(1.5);
 
−
}
 
−
 
−
figure.effect-chico:hover figcaption::before,
 
−
figure.effect-chico:hover p {
 
−
opacity: 1;
 
−
-webkit-transform: scale(1);
 
−
transform: scale(1);
 
−
}
 
−
 
−
@media screen and (max-width: 50em) {
 
−
.content {
 
−
padding: 0 10px;
 
−
text-align: center;
 
−
}
 
−
.grid figure {
 
−
width: 50%;
 
−
}
 
−
}
 
−
 
−
 
−
@media (max-width: 639px) {
 
−
.grid figure {width: 100%;}
 
−
}
 
−
 
−
 
−
@charset "UTF-8";
 
−
 
−
/*!
 
−
Animate.css - http://daneden.me/animate
 
−
Licensed under the MIT license
 
−
 
−
Copyright (c) 2013 Daniel Eden
 
−
 
−
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
−
 
−
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
−
 
−
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
−
*/
 
−
 
−
.animated {
 
−
  -webkit-animation-duration: 1s;
 
−
  animation-duration: 1s;
 
−
  -webkit-animation-fill-mode: both;
 
−
  animation-fill-mode: both;
 
−
}
 
−
 
−
.animated.hinge {
 
−
  -webkit-animation-duration: 2s;
 
−
  animation-duration: 2s;
 
−
}
 
−
 
−
@-webkit-keyframes bounce {
 
−
  0%, 20%, 50%, 80%, 100% {
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: translateY(-30px);
 
−
transform: translateY(-30px);
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: translateY(-15px);
 
−
transform: translateY(-15px);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounce {
 
−
  0%, 20%, 50%, 80%, 100% {
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: translateY(-30px);
 
−
-ms-transform: translateY(-30px);
 
−
transform: translateY(-30px);
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: translateY(-15px);
 
−
-ms-transform: translateY(-15px);
 
−
transform: translateY(-15px);
 
−
  }
 
−
}
 
−
 
−
.bounce {
 
−
  -webkit-animation-name: bounce;
 
−
  animation-name: bounce;
 
−
}
 
−
 
−
@-webkit-keyframes flash {
 
−
  0%, 50%, 100% {
 
−
opacity: 1;
 
−
  }
 
−
 
−
  25%, 75% {
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes flash {
 
−
  0%, 50%, 100% {
 
−
opacity: 1;
 
−
  }
 
−
 
−
  25%, 75% {
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.flash {
 
−
  -webkit-animation-name: flash;
 
−
  animation-name: flash;
 
−
}
 
−
 
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
−
 
−
@-webkit-keyframes pulse {
 
−
  0% {
 
−
-webkit-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
 
−
  50% {
 
−
-webkit-transform: scale(1.1);
 
−
transform: scale(1.1);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
@keyframes pulse {
 
−
  0% {
 
−
-webkit-transform: scale(1);
 
−
-ms-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
 
−
  50% {
 
−
-webkit-transform: scale(1.1);
 
−
-ms-transform: scale(1.1);
 
−
transform: scale(1.1);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: scale(1);
 
−
-ms-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
.pulse {
 
−
  -webkit-animation-name: pulse;
 
−
  animation-name: pulse;
 
−
}
 
−
 
−
@-webkit-keyframes rubberBand {
 
−
  0% {
 
−
-webkit-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
 
−
  30% {
 
−
-webkit-transform: scaleX(1.25) scaleY(0.75);
 
−
transform: scaleX(1.25) scaleY(0.75);
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: scaleX(0.75) scaleY(1.25);
 
−
transform: scaleX(0.75) scaleY(1.25);
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: scaleX(1.15) scaleY(0.85);
 
−
transform: scaleX(1.15) scaleY(0.85);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
@keyframes rubberBand {
 
−
  0% {
 
−
-webkit-transform: scale(1);
 
−
-ms-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
 
−
  30% {
 
−
-webkit-transform: scaleX(1.25) scaleY(0.75);
 
−
-ms-transform: scaleX(1.25) scaleY(0.75);
 
−
transform: scaleX(1.25) scaleY(0.75);
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: scaleX(0.75) scaleY(1.25);
 
−
-ms-transform: scaleX(0.75) scaleY(1.25);
 
−
transform: scaleX(0.75) scaleY(1.25);
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: scaleX(1.15) scaleY(0.85);
 
−
-ms-transform: scaleX(1.15) scaleY(0.85);
 
−
transform: scaleX(1.15) scaleY(0.85);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: scale(1);
 
−
-ms-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
.rubberBand {
 
−
  -webkit-animation-name: rubberBand;
 
−
  animation-name: rubberBand;
 
−
}
 
−
 
−
@-webkit-keyframes shake {
 
−
  0%, 100% {
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  10%, 30%, 50%, 70%, 90% {
 
−
-webkit-transform: translateX(-10px);
 
−
transform: translateX(-10px);
 
−
  }
 
−
 
−
  20%, 40%, 60%, 80% {
 
−
-webkit-transform: translateX(10px);
 
−
transform: translateX(10px);
 
−
  }
 
−
}
 
−
 
−
@keyframes shake {
 
−
  0%, 100% {
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  10%, 30%, 50%, 70%, 90% {
 
−
-webkit-transform: translateX(-10px);
 
−
-ms-transform: translateX(-10px);
 
−
transform: translateX(-10px);
 
−
  }
 
−
 
−
  20%, 40%, 60%, 80% {
 
−
-webkit-transform: translateX(10px);
 
−
-ms-transform: translateX(10px);
 
−
transform: translateX(10px);
 
−
  }
 
−
}
 
−
 
−
.shake {
 
−
  -webkit-animation-name: shake;
 
−
  animation-name: shake;
 
−
}
 
−
 
−
@-webkit-keyframes swing {
 
−
  20% {
 
−
-webkit-transform: rotate(15deg);
 
−
transform: rotate(15deg);
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: rotate(-10deg);
 
−
transform: rotate(-10deg);
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: rotate(5deg);
 
−
transform: rotate(5deg);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: rotate(-5deg);
 
−
transform: rotate(-5deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: rotate(0deg);
 
−
transform: rotate(0deg);
 
−
  }
 
−
}
 
−
 
−
@keyframes swing {
 
−
  20% {
 
−
-webkit-transform: rotate(15deg);
 
−
-ms-transform: rotate(15deg);
 
−
transform: rotate(15deg);
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: rotate(-10deg);
 
−
-ms-transform: rotate(-10deg);
 
−
transform: rotate(-10deg);
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: rotate(5deg);
 
−
-ms-transform: rotate(5deg);
 
−
transform: rotate(5deg);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: rotate(-5deg);
 
−
-ms-transform: rotate(-5deg);
 
−
transform: rotate(-5deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: rotate(0deg);
 
−
-ms-transform: rotate(0deg);
 
−
transform: rotate(0deg);
 
−
  }
 
−
}
 
−
 
−
.swing {
 
−
  -webkit-transform-origin: top center;
 
−
  -ms-transform-origin: top center;
 
−
  transform-origin: top center;
 
−
  -webkit-animation-name: swing;
 
−
  animation-name: swing;
 
−
}
 
−
 
−
@-webkit-keyframes tada {
 
−
  0% {
 
−
-webkit-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
 
−
  10%, 20% {
 
−
-webkit-transform: scale(0.9) rotate(-3deg);
 
−
transform: scale(0.9) rotate(-3deg);
 
−
  }
 
−
 
−
  30%, 50%, 70%, 90% {
 
−
-webkit-transform: scale(1.1) rotate(3deg);
 
−
transform: scale(1.1) rotate(3deg);
 
−
  }
 
−
 
−
  40%, 60%, 80% {
 
−
-webkit-transform: scale(1.1) rotate(-3deg);
 
−
transform: scale(1.1) rotate(-3deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: scale(1) rotate(0);
 
−
transform: scale(1) rotate(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes tada {
 
−
  0% {
 
−
-webkit-transform: scale(1);
 
−
-ms-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
 
−
  10%, 20% {
 
−
-webkit-transform: scale(0.9) rotate(-3deg);
 
−
-ms-transform: scale(0.9) rotate(-3deg);
 
−
transform: scale(0.9) rotate(-3deg);
 
−
  }
 
−
 
−
  30%, 50%, 70%, 90% {
 
−
-webkit-transform: scale(1.1) rotate(3deg);
 
−
-ms-transform: scale(1.1) rotate(3deg);
 
−
transform: scale(1.1) rotate(3deg);
 
−
  }
 
−
 
−
  40%, 60%, 80% {
 
−
-webkit-transform: scale(1.1) rotate(-3deg);
 
−
-ms-transform: scale(1.1) rotate(-3deg);
 
−
transform: scale(1.1) rotate(-3deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: scale(1) rotate(0);
 
−
-ms-transform: scale(1) rotate(0);
 
−
transform: scale(1) rotate(0);
 
−
  }
 
−
}
 
−
 
−
.tada {
 
−
  -webkit-animation-name: tada;
 
−
  animation-name: tada;
 
−
}
 
−
 
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
−
 
−
@-webkit-keyframes wobble {
 
−
  0% {
 
−
-webkit-transform: translateX(0%);
 
−
transform: translateX(0%);
 
−
  }
 
−
 
−
  15% {
 
−
-webkit-transform: translateX(-25%) rotate(-5deg);
 
−
transform: translateX(-25%) rotate(-5deg);
 
−
  }
 
−
 
−
  30% {
 
−
-webkit-transform: translateX(20%) rotate(3deg);
 
−
transform: translateX(20%) rotate(3deg);
 
−
  }
 
−
 
−
  45% {
 
−
-webkit-transform: translateX(-15%) rotate(-3deg);
 
−
transform: translateX(-15%) rotate(-3deg);
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: translateX(10%) rotate(2deg);
 
−
transform: translateX(10%) rotate(2deg);
 
−
  }
 
−
 
−
  75% {
 
−
-webkit-transform: translateX(-5%) rotate(-1deg);
 
−
transform: translateX(-5%) rotate(-1deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0%);
 
−
transform: translateX(0%);
 
−
  }
 
−
}
 
−
 
−
@keyframes wobble {
 
−
  0% {
 
−
-webkit-transform: translateX(0%);
 
−
-ms-transform: translateX(0%);
 
−
transform: translateX(0%);
 
−
  }
 
−
 
−
  15% {
 
−
-webkit-transform: translateX(-25%) rotate(-5deg);
 
−
-ms-transform: translateX(-25%) rotate(-5deg);
 
−
transform: translateX(-25%) rotate(-5deg);
 
−
  }
 
−
 
−
  30% {
 
−
-webkit-transform: translateX(20%) rotate(3deg);
 
−
-ms-transform: translateX(20%) rotate(3deg);
 
−
transform: translateX(20%) rotate(3deg);
 
−
  }
 
−
 
−
  45% {
 
−
-webkit-transform: translateX(-15%) rotate(-3deg);
 
−
-ms-transform: translateX(-15%) rotate(-3deg);
 
−
transform: translateX(-15%) rotate(-3deg);
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: translateX(10%) rotate(2deg);
 
−
-ms-transform: translateX(10%) rotate(2deg);
 
−
transform: translateX(10%) rotate(2deg);
 
−
  }
 
−
 
−
  75% {
 
−
-webkit-transform: translateX(-5%) rotate(-1deg);
 
−
-ms-transform: translateX(-5%) rotate(-1deg);
 
−
transform: translateX(-5%) rotate(-1deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0%);
 
−
-ms-transform: translateX(0%);
 
−
transform: translateX(0%);
 
−
  }
 
−
}
 
−
 
−
.wobble {
 
−
  -webkit-animation-name: wobble;
 
−
  animation-name: wobble;
 
−
}
 
−
 
−
@-webkit-keyframes bounceIn {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: scale(.3);
 
−
transform: scale(.3);
 
−
  }
 
−
 
−
  50% {
 
−
opacity: 1;
 
−
-webkit-transform: scale(1.05);
 
−
transform: scale(1.05);
 
−
  }
 
−
 
−
  70% {
 
−
-webkit-transform: scale(.9);
 
−
transform: scale(.9);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceIn {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: scale(.3);
 
−
-ms-transform: scale(.3);
 
−
transform: scale(.3);
 
−
  }
 
−
 
−
  50% {
 
−
opacity: 1;
 
−
-webkit-transform: scale(1.05);
 
−
-ms-transform: scale(1.05);
 
−
transform: scale(1.05);
 
−
  }
 
−
 
−
  70% {
 
−
-webkit-transform: scale(.9);
 
−
-ms-transform: scale(.9);
 
−
transform: scale(.9);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: scale(1);
 
−
-ms-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
.bounceIn {
 
−
  -webkit-animation-name: bounceIn;
 
−
  animation-name: bounceIn;
 
−
}
 
−
 
−
@-webkit-keyframes bounceInDown {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
 
−
  60% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(30px);
 
−
transform: translateY(30px);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateY(-10px);
 
−
transform: translateY(-10px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceInDown {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
-ms-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
 
−
  60% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(30px);
 
−
-ms-transform: translateY(30px);
 
−
transform: translateY(30px);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateY(-10px);
 
−
-ms-transform: translateY(-10px);
 
−
transform: translateY(-10px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
.bounceInDown {
 
−
  -webkit-animation-name: bounceInDown;
 
−
  animation-name: bounceInDown;
 
−
}
 
−
 
−
@-webkit-keyframes bounceInLeft {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
 
−
  60% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(30px);
 
−
transform: translateX(30px);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateX(-10px);
 
−
transform: translateX(-10px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceInLeft {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
-ms-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
 
−
  60% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(30px);
 
−
-ms-transform: translateX(30px);
 
−
transform: translateX(30px);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateX(-10px);
 
−
-ms-transform: translateX(-10px);
 
−
transform: translateX(-10px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.bounceInLeft {
 
−
  -webkit-animation-name: bounceInLeft;
 
−
  animation-name: bounceInLeft;
 
−
}
 
−
 
−
@-webkit-keyframes bounceInRight {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
 
−
  60% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(-30px);
 
−
transform: translateX(-30px);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateX(10px);
 
−
transform: translateX(10px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceInRight {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
-ms-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
 
−
  60% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(-30px);
 
−
-ms-transform: translateX(-30px);
 
−
transform: translateX(-30px);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateX(10px);
 
−
-ms-transform: translateX(10px);
 
−
transform: translateX(10px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.bounceInRight {
 
−
  -webkit-animation-name: bounceInRight;
 
−
  animation-name: bounceInRight;
 
−
}
 
−
 
−
@-webkit-keyframes bounceInUp {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(2000px);
 
−
transform: translateY(2000px);
 
−
  }
 
−
 
−
  60% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(-30px);
 
−
transform: translateY(-30px);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateY(10px);
 
−
transform: translateY(10px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceInUp {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(2000px);
 
−
-ms-transform: translateY(2000px);
 
−
transform: translateY(2000px);
 
−
  }
 
−
 
−
  60% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(-30px);
 
−
-ms-transform: translateY(-30px);
 
−
transform: translateY(-30px);
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateY(10px);
 
−
-ms-transform: translateY(10px);
 
−
transform: translateY(10px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
.bounceInUp {
 
−
  -webkit-animation-name: bounceInUp;
 
−
  animation-name: bounceInUp;
 
−
}
 
−
 
−
@-webkit-keyframes bounceOut {
 
−
  0% {
 
−
-webkit-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
 
−
  25% {
 
−
-webkit-transform: scale(.95);
 
−
transform: scale(.95);
 
−
  }
 
−
 
−
  50% {
 
−
opacity: 1;
 
−
-webkit-transform: scale(1.1);
 
−
transform: scale(1.1);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: scale(.3);
 
−
transform: scale(.3);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceOut {
 
−
  0% {
 
−
-webkit-transform: scale(1);
 
−
-ms-transform: scale(1);
 
−
transform: scale(1);
 
−
  }
 
−
 
−
  25% {
 
−
-webkit-transform: scale(.95);
 
−
-ms-transform: scale(.95);
 
−
transform: scale(.95);
 
−
  }
 
−
 
−
  50% {
 
−
opacity: 1;
 
−
-webkit-transform: scale(1.1);
 
−
-ms-transform: scale(1.1);
 
−
transform: scale(1.1);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: scale(.3);
 
−
-ms-transform: scale(.3);
 
−
transform: scale(.3);
 
−
  }
 
−
}
 
−
 
−
.bounceOut {
 
−
  -webkit-animation-name: bounceOut;
 
−
  animation-name: bounceOut;
 
−
}
 
−
 
−
@-webkit-keyframes bounceOutDown {
 
−
  0% {
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  20% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(-20px);
 
−
transform: translateY(-20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(2000px);
 
−
transform: translateY(2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceOutDown {
 
−
  0% {
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  20% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(-20px);
 
−
-ms-transform: translateY(-20px);
 
−
transform: translateY(-20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(2000px);
 
−
-ms-transform: translateY(2000px);
 
−
transform: translateY(2000px);
 
−
  }
 
−
}
 
−
 
−
.bounceOutDown {
 
−
  -webkit-animation-name: bounceOutDown;
 
−
  animation-name: bounceOutDown;
 
−
}
 
−
 
−
@-webkit-keyframes bounceOutLeft {
 
−
  0% {
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  20% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(20px);
 
−
transform: translateX(20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceOutLeft {
 
−
  0% {
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  20% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(20px);
 
−
-ms-transform: translateX(20px);
 
−
transform: translateX(20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
-ms-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
}
 
−
 
−
.bounceOutLeft {
 
−
  -webkit-animation-name: bounceOutLeft;
 
−
  animation-name: bounceOutLeft;
 
−
}
 
−
 
−
@-webkit-keyframes bounceOutRight {
 
−
  0% {
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  20% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(-20px);
 
−
transform: translateX(-20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceOutRight {
 
−
  0% {
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  20% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(-20px);
 
−
-ms-transform: translateX(-20px);
 
−
transform: translateX(-20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
-ms-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
}
 
−
 
−
.bounceOutRight {
 
−
  -webkit-animation-name: bounceOutRight;
 
−
  animation-name: bounceOutRight;
 
−
}
 
−
 
−
@-webkit-keyframes bounceOutUp {
 
−
  0% {
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  20% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(20px);
 
−
transform: translateY(20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceOutUp {
 
−
  0% {
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  20% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(20px);
 
−
-ms-transform: translateY(20px);
 
−
transform: translateY(20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
-ms-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
}
 
−
 
−
.bounceOutUp {
 
−
  -webkit-animation-name: bounceOutUp;
 
−
  animation-name: bounceOutUp;
 
−
}
 
−
 
−
@-webkit-keyframes fadeIn {
 
−
  0% {
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeIn {
 
−
  0% {
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.fadeIn {
 
−
  -webkit-animation-name: fadeIn;
 
−
  animation-name: fadeIn;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInDown {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-20px);
 
−
transform: translateY(-20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInDown {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-20px);
 
−
-ms-transform: translateY(-20px);
 
−
transform: translateY(-20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInDown {
 
−
  -webkit-animation-name: fadeInDown;
 
−
  animation-name: fadeInDown;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInDownBig {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInDownBig {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
-ms-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInDownBig {
 
−
  -webkit-animation-name: fadeInDownBig;
 
−
  animation-name: fadeInDownBig;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInLeft {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-20px);
 
−
transform: translateX(-20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInLeft {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-20px);
 
−
-ms-transform: translateX(-20px);
 
−
transform: translateX(-20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInLeft {
 
−
  -webkit-animation-name: fadeInLeft;
 
−
  animation-name: fadeInLeft;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInLeftBig {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInLeftBig {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
-ms-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInLeftBig {
 
−
  -webkit-animation-name: fadeInLeftBig;
 
−
  animation-name: fadeInLeftBig;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInRight {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(20px);
 
−
transform: translateX(20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInRight {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(20px);
 
−
-ms-transform: translateX(20px);
 
−
transform: translateX(20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInRight {
 
−
  -webkit-animation-name: fadeInRight;
 
−
  animation-name: fadeInRight;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInRightBig {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInRightBig {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
-ms-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInRightBig {
 
−
  -webkit-animation-name: fadeInRightBig;
 
−
  animation-name: fadeInRightBig;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInUp {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(20px);
 
−
transform: translateY(20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInUp {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(20px);
 
−
-ms-transform: translateY(20px);
 
−
transform: translateY(20px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInUp {
 
−
  -webkit-animation-name: fadeInUp;
 
−
  animation-name: fadeInUp;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInUpBig {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(2000px);
 
−
transform: translateY(2000px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInUpBig {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(2000px);
 
−
-ms-transform: translateY(2000px);
 
−
transform: translateY(2000px);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInUpBig {
 
−
  -webkit-animation-name: fadeInUpBig;
 
−
  animation-name: fadeInUpBig;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOut {
 
−
  0% {
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOut {
 
−
  0% {
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.fadeOut {
 
−
  -webkit-animation-name: fadeOut;
 
−
  animation-name: fadeOut;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOutDown {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(20px);
 
−
transform: translateY(20px);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOutDown {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(20px);
 
−
-ms-transform: translateY(20px);
 
−
transform: translateY(20px);
 
−
  }
 
−
}
 
−
 
−
.fadeOutDown {
 
−
  -webkit-animation-name: fadeOutDown;
 
−
  animation-name: fadeOutDown;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOutDownBig {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(2000px);
 
−
transform: translateY(2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOutDownBig {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(2000px);
 
−
-ms-transform: translateY(2000px);
 
−
transform: translateY(2000px);
 
−
  }
 
−
}
 
−
 
−
.fadeOutDownBig {
 
−
  -webkit-animation-name: fadeOutDownBig;
 
−
  animation-name: fadeOutDownBig;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOutLeft {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-20px);
 
−
transform: translateX(-20px);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOutLeft {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-20px);
 
−
-ms-transform: translateX(-20px);
 
−
transform: translateX(-20px);
 
−
  }
 
−
}
 
−
 
−
.fadeOutLeft {
 
−
  -webkit-animation-name: fadeOutLeft;
 
−
  animation-name: fadeOutLeft;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOutLeftBig {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOutLeftBig {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
-ms-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
}
 
−
 
−
.fadeOutLeftBig {
 
−
  -webkit-animation-name: fadeOutLeftBig;
 
−
  animation-name: fadeOutLeftBig;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOutRight {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(20px);
 
−
transform: translateX(20px);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOutRight {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(20px);
 
−
-ms-transform: translateX(20px);
 
−
transform: translateX(20px);
 
−
  }
 
−
}
 
−
 
−
.fadeOutRight {
 
−
  -webkit-animation-name: fadeOutRight;
 
−
  animation-name: fadeOutRight;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOutRightBig {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOutRightBig {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
-ms-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
}
 
−
 
−
.fadeOutRightBig {
 
−
  -webkit-animation-name: fadeOutRightBig;
 
−
  animation-name: fadeOutRightBig;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOutUp {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-20px);
 
−
transform: translateY(-20px);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOutUp {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-20px);
 
−
-ms-transform: translateY(-20px);
 
−
transform: translateY(-20px);
 
−
  }
 
−
}
 
−
 
−
.fadeOutUp {
 
−
  -webkit-animation-name: fadeOutUp;
 
−
  animation-name: fadeOutUp;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOutUpBig {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOutUpBig {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
-ms-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
}
 
−
 
−
.fadeOutUpBig {
 
−
  -webkit-animation-name: fadeOutUpBig;
 
−
  animation-name: fadeOutUpBig;
 
−
}
 
−
 
−
@-webkit-keyframes flip {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 
−
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 
−
-webkit-animation-timing-function: ease-out;
 
−
animation-timing-function: ease-out;
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 
−
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 
−
-webkit-animation-timing-function: ease-out;
 
−
animation-timing-function: ease-out;
 
−
  }
 
−
 
−
  50% {
 
−
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 
−
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 
−
-webkit-animation-timing-function: ease-in;
 
−
animation-timing-function: ease-in;
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 
−
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 
−
-webkit-animation-timing-function: ease-in;
 
−
animation-timing-function: ease-in;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 
−
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 
−
-webkit-animation-timing-function: ease-in;
 
−
animation-timing-function: ease-in;
 
−
  }
 
−
}
 
−
 
−
@keyframes flip {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 
−
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 
−
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 
−
-webkit-animation-timing-function: ease-out;
 
−
animation-timing-function: ease-out;
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 
−
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 
−
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 
−
-webkit-animation-timing-function: ease-out;
 
−
animation-timing-function: ease-out;
 
−
  }
 
−
 
−
  50% {
 
−
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 
−
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 
−
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 
−
-webkit-animation-timing-function: ease-in;
 
−
animation-timing-function: ease-in;
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 
−
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 
−
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 
−
-webkit-animation-timing-function: ease-in;
 
−
animation-timing-function: ease-in;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 
−
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 
−
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 
−
-webkit-animation-timing-function: ease-in;
 
−
animation-timing-function: ease-in;
 
−
  }
 
−
}
 
−
 
−
.animated.flip {
 
−
  -webkit-backface-visibility: visible;
 
−
  -ms-backface-visibility: visible;
 
−
  backface-visibility: visible;
 
−
  -webkit-animation-name: flip;
 
−
  animation-name: flip;
 
−
}
 
−
 
−
@-webkit-keyframes flipInX {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) rotateX(90deg);
 
−
transform: perspective(400px) rotateX(90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: perspective(400px) rotateX(-10deg);
 
−
transform: perspective(400px) rotateX(-10deg);
 
−
  }
 
−
 
−
  70% {
 
−
-webkit-transform: perspective(400px) rotateX(10deg);
 
−
transform: perspective(400px) rotateX(10deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) rotateX(0deg);
 
−
transform: perspective(400px) rotateX(0deg);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes flipInX {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) rotateX(90deg);
 
−
-ms-transform: perspective(400px) rotateX(90deg);
 
−
transform: perspective(400px) rotateX(90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: perspective(400px) rotateX(-10deg);
 
−
-ms-transform: perspective(400px) rotateX(-10deg);
 
−
transform: perspective(400px) rotateX(-10deg);
 
−
  }
 
−
 
−
  70% {
 
−
-webkit-transform: perspective(400px) rotateX(10deg);
 
−
-ms-transform: perspective(400px) rotateX(10deg);
 
−
transform: perspective(400px) rotateX(10deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) rotateX(0deg);
 
−
-ms-transform: perspective(400px) rotateX(0deg);
 
−
transform: perspective(400px) rotateX(0deg);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.flipInX {
 
−
  -webkit-backface-visibility: visible !important;
 
−
  -ms-backface-visibility: visible !important;
 
−
  backface-visibility: visible !important;
 
−
  -webkit-animation-name: flipInX;
 
−
  animation-name: flipInX;
 
−
}
 
−
 
−
@-webkit-keyframes flipInY {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) rotateY(90deg);
 
−
transform: perspective(400px) rotateY(90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: perspective(400px) rotateY(-10deg);
 
−
transform: perspective(400px) rotateY(-10deg);
 
−
  }
 
−
 
−
  70% {
 
−
-webkit-transform: perspective(400px) rotateY(10deg);
 
−
transform: perspective(400px) rotateY(10deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) rotateY(0deg);
 
−
transform: perspective(400px) rotateY(0deg);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes flipInY {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) rotateY(90deg);
 
−
-ms-transform: perspective(400px) rotateY(90deg);
 
−
transform: perspective(400px) rotateY(90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: perspective(400px) rotateY(-10deg);
 
−
-ms-transform: perspective(400px) rotateY(-10deg);
 
−
transform: perspective(400px) rotateY(-10deg);
 
−
  }
 
−
 
−
  70% {
 
−
-webkit-transform: perspective(400px) rotateY(10deg);
 
−
-ms-transform: perspective(400px) rotateY(10deg);
 
−
transform: perspective(400px) rotateY(10deg);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) rotateY(0deg);
 
−
-ms-transform: perspective(400px) rotateY(0deg);
 
−
transform: perspective(400px) rotateY(0deg);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.flipInY {
 
−
  -webkit-backface-visibility: visible !important;
 
−
  -ms-backface-visibility: visible !important;
 
−
  backface-visibility: visible !important;
 
−
  -webkit-animation-name: flipInY;
 
−
  animation-name: flipInY;
 
−
}
 
−
 
−
@-webkit-keyframes flipOutX {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) rotateX(0deg);
 
−
transform: perspective(400px) rotateX(0deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) rotateX(90deg);
 
−
transform: perspective(400px) rotateX(90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes flipOutX {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) rotateX(0deg);
 
−
-ms-transform: perspective(400px) rotateX(0deg);
 
−
transform: perspective(400px) rotateX(0deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) rotateX(90deg);
 
−
-ms-transform: perspective(400px) rotateX(90deg);
 
−
transform: perspective(400px) rotateX(90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.flipOutX {
 
−
  -webkit-animation-name: flipOutX;
 
−
  animation-name: flipOutX;
 
−
  -webkit-backface-visibility: visible !important;
 
−
  -ms-backface-visibility: visible !important;
 
−
  backface-visibility: visible !important;
 
−
}
 
−
 
−
@-webkit-keyframes flipOutY {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) rotateY(0deg);
 
−
transform: perspective(400px) rotateY(0deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) rotateY(90deg);
 
−
transform: perspective(400px) rotateY(90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes flipOutY {
 
−
  0% {
 
−
-webkit-transform: perspective(400px) rotateY(0deg);
 
−
-ms-transform: perspective(400px) rotateY(0deg);
 
−
transform: perspective(400px) rotateY(0deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: perspective(400px) rotateY(90deg);
 
−
-ms-transform: perspective(400px) rotateY(90deg);
 
−
transform: perspective(400px) rotateY(90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.flipOutY {
 
−
  -webkit-backface-visibility: visible !important;
 
−
  -ms-backface-visibility: visible !important;
 
−
  backface-visibility: visible !important;
 
−
  -webkit-animation-name: flipOutY;
 
−
  animation-name: flipOutY;
 
−
}
 
−
 
−
@-webkit-keyframes lightSpeedIn {
 
−
  0% {
 
−
-webkit-transform: translateX(100%) skewX(-30deg);
 
−
transform: translateX(100%) skewX(-30deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: translateX(-20%) skewX(30deg);
 
−
transform: translateX(-20%) skewX(30deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateX(0%) skewX(-15deg);
 
−
transform: translateX(0%) skewX(-15deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0%) skewX(0deg);
 
−
transform: translateX(0%) skewX(0deg);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes lightSpeedIn {
 
−
  0% {
 
−
-webkit-transform: translateX(100%) skewX(-30deg);
 
−
-ms-transform: translateX(100%) skewX(-30deg);
 
−
transform: translateX(100%) skewX(-30deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  60% {
 
−
-webkit-transform: translateX(-20%) skewX(30deg);
 
−
-ms-transform: translateX(-20%) skewX(30deg);
 
−
transform: translateX(-20%) skewX(30deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: translateX(0%) skewX(-15deg);
 
−
-ms-transform: translateX(0%) skewX(-15deg);
 
−
transform: translateX(0%) skewX(-15deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0%) skewX(0deg);
 
−
-ms-transform: translateX(0%) skewX(0deg);
 
−
transform: translateX(0%) skewX(0deg);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.lightSpeedIn {
 
−
  -webkit-animation-name: lightSpeedIn;
 
−
  animation-name: lightSpeedIn;
 
−
  -webkit-animation-timing-function: ease-out;
 
−
  animation-timing-function: ease-out;
 
−
}
 
−
 
−
@-webkit-keyframes lightSpeedOut {
 
−
  0% {
 
−
-webkit-transform: translateX(0%) skewX(0deg);
 
−
transform: translateX(0%) skewX(0deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(100%) skewX(-30deg);
 
−
transform: translateX(100%) skewX(-30deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes lightSpeedOut {
 
−
  0% {
 
−
-webkit-transform: translateX(0%) skewX(0deg);
 
−
-ms-transform: translateX(0%) skewX(0deg);
 
−
transform: translateX(0%) skewX(0deg);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(100%) skewX(-30deg);
 
−
-ms-transform: translateX(100%) skewX(-30deg);
 
−
transform: translateX(100%) skewX(-30deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.lightSpeedOut {
 
−
  -webkit-animation-name: lightSpeedOut;
 
−
  animation-name: lightSpeedOut;
 
−
  -webkit-animation-timing-function: ease-in;
 
−
  animation-timing-function: ease-in;
 
−
}
 
−
 
−
@-webkit-keyframes rotateIn {
 
−
  0% {
 
−
-webkit-transform-origin: center center;
 
−
transform-origin: center center;
 
−
-webkit-transform: rotate(-200deg);
 
−
transform: rotate(-200deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: center center;
 
−
transform-origin: center center;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateIn {
 
−
  0% {
 
−
-webkit-transform-origin: center center;
 
−
-ms-transform-origin: center center;
 
−
transform-origin: center center;
 
−
-webkit-transform: rotate(-200deg);
 
−
-ms-transform: rotate(-200deg);
 
−
transform: rotate(-200deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: center center;
 
−
-ms-transform-origin: center center;
 
−
transform-origin: center center;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.rotateIn {
 
−
  -webkit-animation-name: rotateIn;
 
−
  animation-name: rotateIn;
 
−
}
 
−
 
−
@-webkit-keyframes rotateInDownLeft {
 
−
  0% {
 
−
-webkit-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(-90deg);
 
−
transform: rotate(-90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateInDownLeft {
 
−
  0% {
 
−
-webkit-transform-origin: left bottom;
 
−
-ms-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(-90deg);
 
−
-ms-transform: rotate(-90deg);
 
−
transform: rotate(-90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: left bottom;
 
−
-ms-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.rotateInDownLeft {
 
−
  -webkit-animation-name: rotateInDownLeft;
 
−
  animation-name: rotateInDownLeft;
 
−
}
 
−
 
−
@-webkit-keyframes rotateInDownRight {
 
−
  0% {
 
−
-webkit-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(90deg);
 
−
transform: rotate(90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateInDownRight {
 
−
  0% {
 
−
-webkit-transform-origin: right bottom;
 
−
-ms-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(90deg);
 
−
-ms-transform: rotate(90deg);
 
−
transform: rotate(90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: right bottom;
 
−
-ms-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.rotateInDownRight {
 
−
  -webkit-animation-name: rotateInDownRight;
 
−
  animation-name: rotateInDownRight;
 
−
}
 
−
 
−
@-webkit-keyframes rotateInUpLeft {
 
−
  0% {
 
−
-webkit-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(90deg);
 
−
transform: rotate(90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateInUpLeft {
 
−
  0% {
 
−
-webkit-transform-origin: left bottom;
 
−
-ms-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(90deg);
 
−
-ms-transform: rotate(90deg);
 
−
transform: rotate(90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: left bottom;
 
−
-ms-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.rotateInUpLeft {
 
−
  -webkit-animation-name: rotateInUpLeft;
 
−
  animation-name: rotateInUpLeft;
 
−
}
 
−
 
−
@-webkit-keyframes rotateInUpRight {
 
−
  0% {
 
−
-webkit-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(-90deg);
 
−
transform: rotate(-90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateInUpRight {
 
−
  0% {
 
−
-webkit-transform-origin: right bottom;
 
−
-ms-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(-90deg);
 
−
-ms-transform: rotate(-90deg);
 
−
transform: rotate(-90deg);
 
−
opacity: 0;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: right bottom;
 
−
-ms-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.rotateInUpRight {
 
−
  -webkit-animation-name: rotateInUpRight;
 
−
  animation-name: rotateInUpRight;
 
−
}
 
−
 
−
@-webkit-keyframes rotateOut {
 
−
  0% {
 
−
-webkit-transform-origin: center center;
 
−
transform-origin: center center;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: center center;
 
−
transform-origin: center center;
 
−
-webkit-transform: rotate(200deg);
 
−
transform: rotate(200deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateOut {
 
−
  0% {
 
−
-webkit-transform-origin: center center;
 
−
-ms-transform-origin: center center;
 
−
transform-origin: center center;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: center center;
 
−
-ms-transform-origin: center center;
 
−
transform-origin: center center;
 
−
-webkit-transform: rotate(200deg);
 
−
-ms-transform: rotate(200deg);
 
−
transform: rotate(200deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.rotateOut {
 
−
  -webkit-animation-name: rotateOut;
 
−
  animation-name: rotateOut;
 
−
}
 
−
 
−
@-webkit-keyframes rotateOutDownLeft {
 
−
  0% {
 
−
-webkit-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(90deg);
 
−
transform: rotate(90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateOutDownLeft {
 
−
  0% {
 
−
-webkit-transform-origin: left bottom;
 
−
-ms-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: left bottom;
 
−
-ms-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(90deg);
 
−
-ms-transform: rotate(90deg);
 
−
transform: rotate(90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.rotateOutDownLeft {
 
−
  -webkit-animation-name: rotateOutDownLeft;
 
−
  animation-name: rotateOutDownLeft;
 
−
}
 
−
 
−
@-webkit-keyframes rotateOutDownRight {
 
−
  0% {
 
−
-webkit-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(-90deg);
 
−
transform: rotate(-90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateOutDownRight {
 
−
  0% {
 
−
-webkit-transform-origin: right bottom;
 
−
-ms-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: right bottom;
 
−
-ms-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(-90deg);
 
−
-ms-transform: rotate(-90deg);
 
−
transform: rotate(-90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.rotateOutDownRight {
 
−
  -webkit-animation-name: rotateOutDownRight;
 
−
  animation-name: rotateOutDownRight;
 
−
}
 
−
 
−
@-webkit-keyframes rotateOutUpLeft {
 
−
  0% {
 
−
-webkit-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(-90deg);
 
−
transform: rotate(-90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateOutUpLeft {
 
−
  0% {
 
−
-webkit-transform-origin: left bottom;
 
−
-ms-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: left bottom;
 
−
-ms-transform-origin: left bottom;
 
−
transform-origin: left bottom;
 
−
-webkit-transform: rotate(-90deg);
 
−
-ms-transform: rotate(-90deg);
 
−
transform: rotate(-90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.rotateOutUpLeft {
 
−
  -webkit-animation-name: rotateOutUpLeft;
 
−
  animation-name: rotateOutUpLeft;
 
−
}
 
−
 
−
@-webkit-keyframes rotateOutUpRight {
 
−
  0% {
 
−
-webkit-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(90deg);
 
−
transform: rotate(90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes rotateOutUpRight {
 
−
  0% {
 
−
-webkit-transform-origin: right bottom;
 
−
-ms-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
opacity: 1;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform-origin: right bottom;
 
−
-ms-transform-origin: right bottom;
 
−
transform-origin: right bottom;
 
−
-webkit-transform: rotate(90deg);
 
−
-ms-transform: rotate(90deg);
 
−
transform: rotate(90deg);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.rotateOutUpRight {
 
−
  -webkit-animation-name: rotateOutUpRight;
 
−
  animation-name: rotateOutUpRight;
 
−
}
 
−
 
−
@-webkit-keyframes slideInDown {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes slideInDown {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
-ms-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
.slideInDown {
 
−
  -webkit-animation-name: slideInDown;
 
−
  animation-name: slideInDown;
 
−
}
 
−
 
−
@-webkit-keyframes slideInLeft {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes slideInLeft {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
-ms-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.slideInLeft {
 
−
  -webkit-animation-name: slideInLeft;
 
−
  animation-name: slideInLeft;
 
−
}
 
−
 
−
@-webkit-keyframes slideInRight {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes slideInRight {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
-ms-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.slideInRight {
 
−
  -webkit-animation-name: slideInRight;
 
−
  animation-name: slideInRight;
 
−
}
 
−
 
−
@-webkit-keyframes slideOutLeft {
 
−
  0% {
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes slideOutLeft {
 
−
  0% {
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-2000px);
 
−
-ms-transform: translateX(-2000px);
 
−
transform: translateX(-2000px);
 
−
  }
 
−
}
 
−
 
−
.slideOutLeft {
 
−
  -webkit-animation-name: slideOutLeft;
 
−
  animation-name: slideOutLeft;
 
−
}
 
−
 
−
@-webkit-keyframes slideOutRight {
 
−
  0% {
 
−
-webkit-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes slideOutRight {
 
−
  0% {
 
−
-webkit-transform: translateX(0);
 
−
-ms-transform: translateX(0);
 
−
transform: translateX(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(2000px);
 
−
-ms-transform: translateX(2000px);
 
−
transform: translateX(2000px);
 
−
  }
 
−
}
 
−
 
−
.slideOutRight {
 
−
  -webkit-animation-name: slideOutRight;
 
−
  animation-name: slideOutRight;
 
−
}
 
−
 
−
@-webkit-keyframes slideOutUp {
 
−
  0% {
 
−
-webkit-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
}
 
−
 
−
@keyframes slideOutUp {
 
−
  0% {
 
−
-webkit-transform: translateY(0);
 
−
-ms-transform: translateY(0);
 
−
transform: translateY(0);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateY(-2000px);
 
−
-ms-transform: translateY(-2000px);
 
−
transform: translateY(-2000px);
 
−
  }
 
−
}
 
−
 
−
.slideOutUp {
 
−
  -webkit-animation-name: slideOutUp;
 
−
  animation-name: slideOutUp;
 
−
}
 
−
 
−
@-webkit-keyframes hinge {
 
−
  0% {
 
−
-webkit-transform: rotate(0);
 
−
transform: rotate(0);
 
−
-webkit-transform-origin: top left;
 
−
transform-origin: top left;
 
−
-webkit-animation-timing-function: ease-in-out;
 
−
animation-timing-function: ease-in-out;
 
−
  }
 
−
 
−
  20%, 60% {
 
−
-webkit-transform: rotate(80deg);
 
−
transform: rotate(80deg);
 
−
-webkit-transform-origin: top left;
 
−
transform-origin: top left;
 
−
-webkit-animation-timing-function: ease-in-out;
 
−
animation-timing-function: ease-in-out;
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: rotate(60deg);
 
−
transform: rotate(60deg);
 
−
-webkit-transform-origin: top left;
 
−
transform-origin: top left;
 
−
-webkit-animation-timing-function: ease-in-out;
 
−
animation-timing-function: ease-in-out;
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: rotate(60deg) translateY(0);
 
−
transform: rotate(60deg) translateY(0);
 
−
opacity: 1;
 
−
-webkit-transform-origin: top left;
 
−
transform-origin: top left;
 
−
-webkit-animation-timing-function: ease-in-out;
 
−
animation-timing-function: ease-in-out;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateY(700px);
 
−
transform: translateY(700px);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes hinge {
 
−
  0% {
 
−
-webkit-transform: rotate(0);
 
−
-ms-transform: rotate(0);
 
−
transform: rotate(0);
 
−
-webkit-transform-origin: top left;
 
−
-ms-transform-origin: top left;
 
−
transform-origin: top left;
 
−
-webkit-animation-timing-function: ease-in-out;
 
−
animation-timing-function: ease-in-out;
 
−
  }
 
−
 
−
  20%, 60% {
 
−
-webkit-transform: rotate(80deg);
 
−
-ms-transform: rotate(80deg);
 
−
transform: rotate(80deg);
 
−
-webkit-transform-origin: top left;
 
−
-ms-transform-origin: top left;
 
−
transform-origin: top left;
 
−
-webkit-animation-timing-function: ease-in-out;
 
−
animation-timing-function: ease-in-out;
 
−
  }
 
−
 
−
  40% {
 
−
-webkit-transform: rotate(60deg);
 
−
-ms-transform: rotate(60deg);
 
−
transform: rotate(60deg);
 
−
-webkit-transform-origin: top left;
 
−
-ms-transform-origin: top left;
 
−
transform-origin: top left;
 
−
-webkit-animation-timing-function: ease-in-out;
 
−
animation-timing-function: ease-in-out;
 
−
  }
 
−
 
−
  80% {
 
−
-webkit-transform: rotate(60deg) translateY(0);
 
−
-ms-transform: rotate(60deg) translateY(0);
 
−
transform: rotate(60deg) translateY(0);
 
−
opacity: 1;
 
−
-webkit-transform-origin: top left;
 
−
-ms-transform-origin: top left;
 
−
transform-origin: top left;
 
−
-webkit-animation-timing-function: ease-in-out;
 
−
animation-timing-function: ease-in-out;
 
−
  }
 
−
 
−
  100% {
 
−
-webkit-transform: translateY(700px);
 
−
-ms-transform: translateY(700px);
 
−
transform: translateY(700px);
 
−
opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.hinge {
 
−
  -webkit-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);
 
−
transform: translateX(-100%) rotate(-120deg);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0px) rotate(0deg);
 
−
transform: translateX(0px) rotate(0deg);
 
−
  }
 
−
}
 
−
 
−
@keyframes rollIn {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(-100%) rotate(-120deg);
 
−
-ms-transform: translateX(-100%) rotate(-120deg);
 
−
transform: translateX(-100%) rotate(-120deg);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0px) rotate(0deg);
 
−
-ms-transform: translateX(0px) rotate(0deg);
 
−
transform: translateX(0px) rotate(0deg);
 
−
  }
 
−
}
 
−
 
−
.rollIn {
 
−
  -webkit-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);
 
−
transform: translateX(0px) rotate(0deg);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(100%) rotate(120deg);
 
−
transform: translateX(100%) rotate(120deg);
 
−
  }
 
−
}
 
−
 
−
@keyframes rollOut {
 
−
  0% {
 
−
opacity: 1;
 
−
-webkit-transform: translateX(0px) rotate(0deg);
 
−
-ms-transform: translateX(0px) rotate(0deg);
 
−
transform: translateX(0px) rotate(0deg);
 
−
  }
 
−
 
−
  100% {
 
−
opacity: 0;
 
−
-webkit-transform: translateX(100%) rotate(120deg);
 
−
-ms-transform: translateX(100%) rotate(120deg);
 
−
transform: translateX(100%) rotate(120deg);
 
−
  }
 
−
}
 
−
 
−
.rollOut {
 
−
  -webkit-animation-name: rollOut;
 
−
  animation-name: rollOut;
 
−
}
 
−
 
−
@charset "UTF-8";.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{position:absolute;top:0;right:0;bottom:0;left:0;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.slide-content{margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;opacity:1}.blueimp-gallery{position:fixed;z-index:999999;overflow:hidden;background:#000;background:rgba(0,0,0,.9);opacity:0;display:none;direction:ltr;-ms-touch-action:none;touch-action:none}.blueimp-gallery-carousel{position:relative;z-index:auto;margin:1em auto;padding-bottom:56.25%;box-shadow:0 0 10px #000;-ms-touch-action:pan-y;touch-action:pan-y}.blueimp-gallery-display{display:block;opacity:1}.blueimp-gallery>.slides{position:relative;height:100%;overflow:hidden}.blueimp-gallery-carousel>.slides{position:absolute}.blueimp-gallery>.slides>.slide{position:relative;float:left;height:100%;text-align:center;-webkit-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-moz-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-ms-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-o-transition-timing-function:cubic-bezier(0.645,.045,.355,1);transition-timing-function:cubic-bezier(0.645,.045,.355,1)}.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{-webkit-transition:opacity .5s linear;-moz-transition:opacity .5s linear;-ms-transition:opacity .5s linear;-o-transition:opacity .5s linear;transition:opacity .5s linear}.blueimp-gallery>.slides>.slide-loading{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}.blueimp-gallery>.slides>.slide-loading>.slide-content{opacity:0}.blueimp-gallery>.slides>.slide-error{background:url(../img/error.png) center no-repeat}.blueimp-gallery>.slides>.slide-error>.slide-content{display:none}.blueimp-gallery>.prev,.blueimp-gallery>.next{position:absolute;top:50%;left:15px;width:40px;height:40px;margin-top:-23px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-decoration:none;text-shadow:0 0 2px #000;text-align:center;background:#222;background:rgba(0,0,0,.5);-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5;cursor:pointer;display:none}.blueimp-gallery>.next{left:auto;right:15px}.blueimp-gallery>.close,.blueimp-gallery>.title{position:absolute;top:15px;left:15px;margin:0 40px 0 0;font-size:20px;line-height:30px;color:#980000;text-shadow:0 0 2px #000;opacity:.8;display:none}.blueimp-gallery>.close{padding:15px;right:15px;left:auto;margin:-15px;font-size:30px;text-decoration:none;cursor:pointer}.blueimp-gallery>.play-pause{position:absolute;right:15px;bottom:15px;width:15px;height:15px;background:url(../img/play-pause.png) 0 0 no-repeat;cursor:pointer;opacity:.5;display:none}.blueimp-gallery-playing>.play-pause{background-position:-15px 0}.blueimp-gallery>.prev:hover,.blueimp-gallery>.next:hover,.blueimp-gallery>.close:hover,.blueimp-gallery>.title:hover,.blueimp-gallery>.play-pause:hover{color:#fff;opacity:1}.blueimp-gallery-controls>.prev,.blueimp-gallery-controls>.next,.blueimp-gallery-controls>.close,.blueimp-gallery-controls>.title,.blueimp-gallery-controls>.play-pause{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.prev,.blueimp-gallery-left>.prev,.blueimp-gallery-single>.next,.blueimp-gallery-right>.next,.blueimp-gallery-single>.play-pause{display:none}.blueimp-gallery>.slides>.slide>.slide-content,.blueimp-gallery>.prev,.blueimp-gallery>.next,.blueimp-gallery>.close,.blueimp-gallery>.play-pause{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body:last-child .blueimp-gallery>.slides>.slide-error{background-image:url(../img/error.svg)}body:last-child .blueimp-gallery>.play-pause{width:20px;height:20px;background-size:40px 20px;background-image:url(../img/play-pause.svg)}body:last-child .blueimp-gallery-playing>.play-pause{background-position:-20px 0}*+html .blueimp-gallery>.slides>.slide{min-height:300px}*+html .blueimp-gallery>.slides>.slide>.slide-content{position:relative}@charset "UTF-8";.blueimp-gallery>.indicator{position:absolute;top:auto;right:15px;bottom:15px;left:15px;margin:0 40px;padding:0;list-style:none;text-align:center;line-height:10px;display:none}.blueimp-gallery>.indicator>li{display:inline-block;width:9px;height:9px;margin:6px 3px 0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:1px solid transparent;background:#ccc;background:rgba(255,255,255,.25)center no-repeat;border-radius:5px;box-shadow:0 0 2px #000;opacity:.5;cursor:pointer}.blueimp-gallery>.indicator>li:hover,.blueimp-gallery>.indicator>.active{background-color:#fff;border-color:#fff;opacity:1}.blueimp-gallery-controls>.indicator{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.indicator{display:none}.blueimp-gallery>.indicator{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*+html .blueimp-gallery>.indicator>li{display:inline}@charset "UTF-8";.blueimp-gallery>.slides>.slide>.video-content>img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.video-content>video{position:absolute;top:0;left:0;width:100%;height:100%}.blueimp-gallery>.slides>.slide>.video-content>iframe{position:absolute;top:100%;left:0;width:100%;height:100%;border:none}.blueimp-gallery>.slides>.slide>.video-playing>iframe{top:0}.blueimp-gallery>.slides>.slide>.video-content>a{position:absolute;top:50%;right:0;left:0;margin:-64px auto 0;width:128px;height:128px;background:url(../img/video-play.png) center no-repeat;opacity:.8;cursor:pointer}.blueimp-gallery>.slides>.slide>.video-content>a:hover{opacity:1}.blueimp-gallery>.slides>.slide>.video-playing>a,.blueimp-gallery>.slides>.slide>.video-playing>img{display:none}.blueimp-gallery>.slides>.slide>.video-content>video{display:none}.blueimp-gallery>.slides>.slide>.video-playing>video{display:block}.blueimp-gallery>.slides>.slide>.video-loading>a{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}body:last-child .blueimp-gallery>.slides>.slide>.video-content:not(.video-loading)>a{background-image:url(../img/video-play.svg)}*+html .blueimp-gallery>.slides>.slide>.video-content{height:100%}*+html .blueimp-gallery>.slides>.slide>.video-content>a{left:50%;margin-left:-64px}
 
−
 
−
body { color:#333; font:300 15px/15px Roboto,Arial,Helvetica;background:url() right no-repeat fixed #FFFFFF; -webkit-font-smoothing:antialiased;}
 
−
 
−
a{color:#00a9c6; text-decoration:none;}
 
−
a:hover{color:#666;}
 
−
.btn,a,.btn:hover,a:hover {
 
−
-webkit-transition: all 0.3s ease-in-out;
 
−
-moz-transition: all 0.3s ease-in-out;
 
−
-ms-transition: all 0.3s ease-in-out;
 
−
-o-transition: all 0.3s ease-in-out;
 
−
transition: all 0.3s ease-in-out;
 
−
outline: none !important;
 
−
}
 
−
 
−
h1,h2,h3,h4{margin: 0;line-height: 1em;}
 
−
h1{font:700 5em Roboto,Arial,Helvetica;margin:0.25em 0;text-transform: uppercase;}
 
−
h2{font:300 2.5em Roboto,Arial,Helvetica;margin-bottom: 1.5em;}
 
−
h3{font:300 2em Roboto,Arial,Helvetica;margin:2em 0 1em 0;}
 
−
h4{font:300 1.5em Roboto,Arial,Helvetica;margin-bottom: 1em;}
 
−
h4 i{margin-right: 0.5em;}
 
−
 
−
p{font-size:1em;line-height: 1.7em; margin-bottom: 1.7em;}
 
−
 
−
.spacer{padding: 6em 0;}
 
−
 
−
 
−
.btn-default{color: #ccc;border: 1px solid #aaa;}
 
−
.btn-default:hover,.btn-default:active{background: rgba(0,0,0,0.8);}
 
−
.btn-primary{color: #fff;background:#e89f10;width: 100%;outline: none;}
 
−
.btn-primary:hover,.btn-primary:active,.btn-primary:focus{background:#f3c024;box-shadow: none;}
 
−
 
−
.topbar {height:5px;position: fixed;top: 0;width: 98%;z-index: 1000;}
 
−
.navbar-nav > li > a{font-size: 1em;line-height: 3.6em;}
 
−
.navbar-fixed-top{top: 5px;}
 
−
.navbar-inverse{background: #fff;
 
−
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
 
−
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
 
−
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);}
 
−
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus{background: none;color: #E89F10;}
 
−
 
−
#head,.carousel{margin-top: 0;}
 
−
 
−
#home{padding-top: 0;}
 
−
 
−
.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
 
−
background-color: #fff;
 
−
color:#777;
 
−
 
−
  }
 
−
  .dropdown-menu li>a:hover{color:#66cdaa; background:#fff }
 
−
/*View more*/
 
−
 
−
#top_menu_inside
 
−
{background-color: #fff;
 
−
border: 0;
 
−
background-color: transparent;}
 
−
#top_menu_inside > ul > li > a {
 
−
color:#aaa !important;
 
−
 
−
}
 
−
 
−
 
−
#top_menu_14 {
 
−
border: 0;
 
−
background-color:#2F4F4F;
 
−
border-bottom: 1px solid #2F4F4F;}
 
−
 
−
#top_menu_inside #user_item {
 
−
color:#b22222;
 
−
}
 
−
 
−
.btn {
 
−
  -webkit-border-radius: 12;
 
−
  -moz-border-radius: 12;
 
−
  border-radius: 12px;
 
−
  text-shadow: 0px 1px 3px #cc666e;
 
−
  font-family: Arial;
 
−
  color: #b0000f;
 
−
  font-size: 19px;
 
−
  background: #ffffff;
 
−
  padding: 10px 15px 10px 15px;
 
−
  border: solid #d18080 1px;
 
−
  text-decoration: none;
 
−
  text-transform: uppercase;
 
−
}
 
−
 
−
 
−
.btn:hover ,.btn:active{
 
−
  background: #e87f8d;
 
−
  text-decoration: none;
 
−
  color: #fff;
 
−
}
 
−
 
−
.myButton {
 
−
-moz-box-shadow:inset 0px 1px 0px 0px #cc666e;
 
−
-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
 
−
box-shadow:inset 0px 1px 0px 0px #f5978e;
 
−
background-color:#f58f89;
 
−
-moz-border-radius:10px;
 
−
-webkit-border-radius:10px;
 
−
border-radius:10px;
 
−
border:1px solid #b0000f;
 
−
display:inline-block;
 
−
cursor:pointer;
 
−
background-color: #FFFFFF;
 
−
color:#b0000f;
 
−
font-family:Arial;
 
−
font-size:18px;
 
−
padding:10px 15px;
 
−
text-decoration:none;
 
−
text-shadow: 0px 1px 3px #cc666e;
 
−
}
 
−
.myButton:hover {
 
−
background-color: #e87f8d;
 
−
text-decoration:none;
 
−
}
 
−
.myButton:active {
 
−
position:relative;
 
−
top:1px;
 
−
color: #FFFFFF;
 
−
}
 
−
 
−
 
−
 
−
/*about*/
 
−
.about.spacer{padding-left: 4em; padding-right: 4em;padding-bottom: 0;}
 
−
.services ul li{width: 10em;height: 10em;border: 0px solid #ccc;padding: 0;border-radius: 50%;margin: 0 1.25em;line-height: 13.5em;color: #000000; background:#fff;}
 
−
.services ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
 
−
.services ul li span i{font-size: 3em; margin-top:1em}
 
−
.services ul li span b{display: block;font-size: 1em;font-weight: 300;}
 
−
/*#7dbf94*/
 
−
 
−
/*testimonials*/
 
−
.partners img{float: left;margin:0 75px 30px 0;}
 
−
 
−
.testimonails{min-height: 195px;}
 
−
.testimonails img{margin-top: 5px;}
 
−
.testimonails span{color: #888;}
 
−
.testimonails span b{font-weight: 400;}
 
−
.carousel-indicators li{border: 1px solid #f3c024;}
 
−
.carousel-indicators{bottom: 0;}
 
−
 
−
/*works*/
 
−
#works{padding-top:6em; padding-left:4em; padding-right:4em;}
 
−
#works figcaption a{border:1px solid #fff;margin-top: 1em;display: inline-block;color: #fff;padding: 0 2em;}
 
−
#works figcaption a:hover{text-decoration: none;padding: 0 3em;}
 
−
/*works*/
 
−
 
−
/*team*/
 
−
.team figure{width: 100%;}
 
−
.team img{width: 100%;}
 
−
.team b{font-size: 1.2em;display: block;}
 
−
.team a i.fa{color: #fff; font-size: 2em;}
 
−
.team a i.fa:hover{color: #E89F10;}
 
−
 
−
 
−
.highlight-info{ background:url(https://static.igem.org/mediawiki/2015/d/d6/Manette-fond.jpg) center fixed; background-size: cover; color:#fff;}
 
−
.highlight-info .overlay{background: rgba(178,34,34,0.8);}
 
−
.highlight-info h4{color: #fff;margin:0.5em 0 0 0;}
 
−
/*about us*/
 
−
 
−
/*Sponsors*/
 
−
 
−
 
−
.sponsors{ background:url(https://static.igem.org/mediawiki/2015/thumb/8/82/Attribution2.png/800px-Attribution2.png) center fixed; background-size: cover; color:#fff;}
 
−
.sponsors .overlay{background: rgba(102,205,170,0.4);}
 
−
.sponsors h4{color: #fff;margin:0.5em 0 0 0;}
 
−
 
−
 
−
/*0,176,128*/
 
−
 
−
 
−
 
−
/*contact*#003333/
 
−
.contactform textarea,.contactform input{width: 100%;padding:1em;border:1px solid #ccc;margin-bottom: 1em;border-radius: 0;outline: none;}
 
−
/*contact*/
 
−
 
−
 
−
.footer{background-color:#2F4F4F ; color: #fff; font-size: 1em;color: #aaa;}
 
−
.footer a{color: #aaa;margin: 0 1em; }
 
−
 
−
.gototop{z-index: 1000;position: fixed;bottom: 20px; right: 20px;background: rgba(0,0,0,0.0);padding:10px;color: #66cdaa;}
 
−
.gototop i{line-height: 0.5em;}
 
−
 
−
 
−
 
−
 
−
@media (max-width: 1200px) {
 
−
body{font:300 13px/13px Roboto,Arial,Helvetica;}
 
−
.navbar-brand{padding-top: 11px;}
 
−
.services ul li{margin:0 0.5em; }
 
 
 
−
.grid figure h2{font: 700 1.5em Roboto,Arial,Helvetica;}
 
−
figure.effect-oscar figcaption{padding: 12%;}
 
−
figure.effect-oscar figcaption::before,figure.effect-chico figcaption::before{top: 20px;right: 20px;bottom: 20px;left: 20px;}
 
−
 
−
.partners img{margin: 0 25px 25px 0;}
 
−
}
 
−
 
−
@media (max-width: 900px) {
 
−
h1{font: 700 3.5em Roboto,Arial,Helvetica;}
 
−
h4 {font: 300 1.3em Roboto,Arial,Helvetica;}
 
−
.btn{padding: 1em 2em;}
 
−
.partners img{margin: 0 15px 25px 0;width: 157px;}
 
−
.services ul li{width: 9em;height: 9em;}
 
−
figure.effect-chico figcaption {padding: 2em;}
 
−
figure.effect-oscar figcaption {padding: 20%;}
 
−
figure.effect-chico figcaption::before{top: 10px;right: 10px;bottom: 10px;left: 10px;}
 
−
.grid figure.effect-chico p{font-size: 0.6em;line-height: 1.5em;}
 
−
}
 
−
 
−
 
−
@media (max-width: 767px) {
 
−
body{font:300 12px/12px Roboto,Arial,Helvetica;}
 
−
.navbar-nav > li > a {line-height: 1em;}
 
−
.navbar-brand{padding: 5px;}
 
−
.navbar-brand img{height: 20px;}
 
−
.navbar-toggle{margin-top: 12px;}
 
−
 
−
.carousel-caption,.carousel-control,.carousel-indicators{display: none;}
 
−
 
−
h2.text-center{text-align: left;font-size: 1.7em;}
 
−
h4 {font: 300 1.2em Roboto,Arial,Helvetica;}
 
−
#partners h2{padding: 0 0.5em;}
 
−
#home {padding-top: 0em;}
 
−
#partner {padding-top: 0em;}
 
−
#spacer {padding-top: 0em;}
 
−
 
−
.partners{display: block;float: left;}
 
−
.partners img{width: 120px;}
 
−
 
−
 
−
 
−
.about.spacer{padding-left: 2em;padding-right: 2em;}
 
−
.spacer{padding:0.5em 0 0 0;}
 
−
.services ul li{margin-bottom: 1em;}
 
−
 
−
.highlight-info .overlay{padding-bottom: 2em;}
 
−
.sponsors .overlay{padding-bottom: 2em;}
 
−
 
−
.grid.team div{margin: 0;padding: 0;}
 
−
figure.effect-chico figcaption {padding: 1.5em;}
 
−
.footer{margin-top: 2em;padding-bottom: 2em;}
 
−
}
 
−
 
 
 
−
/*---------------------------------------------------- Parallax------------------------------------------------------*/
 
−
.parallax {
 
−
text-align:center;
 
−
background-position:center center;
 
−
background-repeat:no-repeat;
 
−
background-size:cover;
 
−
background-attachment:fixed !important;
 
−
overflow:hidden;
 
−
}
 
−
.parallax-pattern-overlay {
 
−
background:url(../images/lab.jpg) center fixed; background-size: cover; color:#fff;
 
−
background: rgba(200,200,200,0.4);
 
−
background-repeat: repeat;
 
 
 
−
@-webkit-keyframes fadeInDown {
+
<!-- INSTRUCTORS -->
−
  0% {
+
−
opacity: 0;
+
<div id="partners" class="container spacer " style="padding-top:0px; padding-bottom:0px">
−
-webkit-transform: translate3d(0, -100%, 0);
+
<div class="row grid team  wowload fadeInUpBig">
−
transform: translate3d(0, -100%, 0);
+
<h3 style="text-align:left">Instructors</h3>
−
  }
+
<div class=" col-sm-3 col-xs-6">
 +
<figure class="effect-chico">
 +
<img src="https://static.igem.org/mediawiki/2015/9/94/Sam.png" alt="img01"/>
 +
<figcaption>
 +
<p><b>Samuel Juillot</b><br>Biology<br><br> <a href="https://de.linkedin.com/pub/samuel-juillot/12/514/913"><i class="fa fa-linkedin"></i></a> </p>
 +
</figcaption>
 +
</figure>
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
  
−
  100% {
+
<!-- ADVISORS -->
−
opacity: 1;
+
−
-webkit-transform: none;
+
<div id="partners" class="container spacer " style="padding-top:0px">
−
transform: none;
+
<div class="row grid team  wowload fadeInUpBig">
−
  }
+
<h3 style="text-align:left">Advisors</h3>
−
}
+
 +
<div class=" col-sm-3 col-xs-6">
 +
<figure class="effect-chico">
 +
<img src="https://static.igem.org/mediawiki/2015/7/71/Guillaume.png" alt="img01"/>
 +
<figcaption>
 +
<p><b>Guillaume Mercy</b><br>Biology<br><br> <a href="https://fr.linkedin.com/pub/guillaume-mercy/4a/a08/589"><i class="fa fa-linkedin"></i></a> </p>
 +
</figcaption>
 +
</figure>
 +
</div>
 +
 +
<div class=" col-sm-3 col-xs-6">
 +
<figure class="effect-chico">
 +
<img src="https://static.igem.org/mediawiki/2015/7/7e/Pierre.png" alt="img01"/>
 +
<figcaption>
 +
<p><b>Pierre Parutto</b><br>Computer Science<br><br></p>
 +
</figcaption>
 +
</figure>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
  
−
@keyframes fadeInDown {
 
−
  0% {
 
−
opacity: 0;
 
−
-webkit-transform: translate3d(0, -100%, 0);
 
−
transform: translate3d(0, -100%, 0);
 
−
  }
 
  
−
  100% {
+
−
opacity: 1;
+
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
−
-webkit-transform: none;
+
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
−
transform: none;
+
<!-- The container for the modal slides -->
−
  }
+
<div class="slides"></div>
−
}
+
<!-- Controls for the borderless lightbox -->
 +
<h3 class="title">Title</h3>
 +
<a class="prev">‹</a>
 +
<a class="next">›</a>
 +
<a class="close">×</a>
 +
<!-- The modal dialog, which will be used to wrap the lightbox content -->   
 +
</div>
  
−
.fadeInDown {
+
<!-- UP TOP -->
−
  -webkit-animation-name: fadeInDown;
+
−
  animation-name: fadeInDown;
+
−
}
+
  
−
img#site-title {
+
<a href="#banner" class="gototop "><i class="fa fa-chevron-circle-up  fa-3x"></i></a>
−
max-width: 120px;
+
−
}
+
  
  
−
@-webkit-keyframes zoomIn {
+
</body>
−
  0% {
+
</html>
−
opacity: 0;
+
−
-webkit-transform: scale3d(.3, .3, .3);
+
−
transform: scale3d(.3, .3, .3);
+
−
  }
+
  
−
  50% {
 
−
opacity: 1;
 
−
  }
 
−
}
 
  
−
@keyframes zoomIn {
+
{{IONIS_Paris-menu}}
−
  0% {
+
{{IONIS_Paris/FootPage}}
−
opacity: 0;
+
−
-webkit-transform: scale3d(.3, .3, .3);
+
−
transform: scale3d(.3, .3, .3);
+
−
  }
+
−
 
+
−
  50% {
+
−
opacity: 1;
+
−
  }
+
−
}
+
−
 
+
−
.zoomIn {
+
−
  -webkit-animation-name: zoomIn;
+
−
  animation-name: zoomIn;
+
−
}
+
−
 
+
−
@-webkit-keyframes zoomInDown {
+
−
  0% {
+
−
opacity: 0;
+
−
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+
−
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
  }
+
−
 
+
−
  60% {
+
−
opacity: 1;
+
−
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+
−
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
  }
+
−
}
+
−
 
+
−
@keyframes zoomInDown {
+
−
  0% {
+
−
opacity: 0;
+
−
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+
−
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
  }
+
−
 
+
−
  60% {
+
−
opacity: 1;
+
−
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+
−
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
  }
+
−
}
+
−
 
+
−
.zoomInDown {
+
−
  -webkit-animation-name: zoomInDown;
+
−
  animation-name: zoomInDown;
+
−
}
+
−
 
+
−
@-webkit-keyframes zoomInLeft {
+
−
  0% {
+
−
opacity: 0;
+
−
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+
−
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
  }
+
−
 
+
−
  60% {
+
−
opacity: 1;
+
−
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+
−
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
  }
+
−
}
+
−
 
+
−
@keyframes zoomInLeft {
+
−
  0% {
+
−
opacity: 0;
+
−
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+
−
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
  }
+
−
 
+
−
  60% {
+
−
opacity: 1;
+
−
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+
−
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
  }
+
−
}
+
−
 
+
−
.zoomInLeft {
+
−
  -webkit-animation-name: zoomInLeft;
+
−
  animation-name: zoomInLeft;
+
−
}
+
−
 
+
−
@-webkit-keyframes zoomInRight {
+
−
  0% {
+
−
opacity: 0;
+
−
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+
−
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
  }
+
−
 
+
−
  60% {
+
−
opacity: 1;
+
−
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+
−
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
  }
+
−
}
+
−
 
+
−
@keyframes zoomInRight {
+
−
  0% {
+
−
opacity: 0;
+
−
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+
−
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
  }
+
−
 
+
−
  60% {
+
−
opacity: 1;
+
−
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+
−
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
  }
+
−
}
+
−
 
+
−
.zoomInRight {
+
−
  -webkit-animation-name: zoomInRight;
+
−
  animation-name: zoomInRight;
+
−
}
+
−
 
+
−
@-webkit-keyframes zoomInUp {
+
−
  0% {
+
−
opacity: 0;
+
−
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+
−
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
  }
+
−
 
+
−
  60% {
+
−
opacity: 1;
+
−
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+
−
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
  }
+
−
}
+
−
 
+
−
@keyframes zoomInUp {
+
−
  0% {
+
−
opacity: 0;
+
−
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+
−
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
−
  }
+
−
 
+
−
  60% {
+
−
opacity: 1;
+
−
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+
−
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+
−
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+
−
  }
+
−
}
+
−
 
+
−
.zoomInUp {
+
−
  -webkit-animation-name: zoomInUp;
+
−
  animation-name: zoomInUp;
+
−
}
+
−
 
+
−
@-webkit-keyframes zoomOut {
+
−
  0% {
+
−
opacity: 1;
+
−
  }
+
−
 
+
−
  50% {
+
−
opacity: 0;
+
−
-webkit-transform: scale3d(.3, .3, .3);
+
−
transform: scale3d(.3, .3, .3);
+
−
  }
+
−
 
+
−
  100% {
+
−
opacity: 0;
+
−
  }
+
−
}
+
−
 
+
−
+
−
</style>
+
−
+
−
</html>
+

Revision as of 12:57, 31 August 2015

IONIS Paris

IONIS team

Introduction to the IONIS iGEM team

IONIS iGEM is a French iGEM team composed of students of the IONIS Education group, first private education group in France. The IONIS private group is composed of several engineering schools, among them students from 3 of them have decided to create an iGEM team in 2015: Sup’Biotech specialized in Biotechnology, EPITA focused on IT systems and the school of art design:E-ART SUP. Moreover, a student of the Paris Descartes University specialized in Arts and design is as well a team member.

A multidisciplinary team

The Bio-Console, the project that represents the most our team: IONIS iGEM. This console uses the field of biology and computer science to create a funny, playful and responsible game. Our team is composed of biologists , computer scientists and designers who have all the skills required for this project.

Members

Our creative team that is making everything possible



img01

Matthieu Da Costa

TEAM MANAGER
23 years old
Sup'Biotech, 5th year

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

Johanna Chesnel

BIOLOGY
22 years old
Sup'Biotech, 5th year

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

img01
img01

Marwa Zerhouni

BIOLOGY
23 years old
Sup'Biotech, 5th year

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

Nicolas Cornille

BIOLOGY
22 years old
Sup'Biotech, 5th year

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

img01
img01

Pauline Trébulle

BIOLOGY
21 years old
Sup'Biotech, 5th year

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

Gilles Defrel

BIOLOGY
24 years old
Sup'Biotech, 5th year

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

img01
img01

Armelle Louisy

COMMUNICATION
23 years old
Sup'Biotech, 5th year

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

Hugo Cremaschi

BIOLOGY
24 years old
Sup'Biotech, 5th year

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

img01
img01

Lionel Chesnais

DESIGN
24 years old
Sup'Biotech, 5th year

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

Paul-Louis Nech

COMPUTER SCIENCE
23 years old
EPITA, 5th year

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

img01
img01

Goulwen Mintec

COMPUTER SCIENCE
22 years old
EPITA, 5th year

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

Pascal Charleton

DESIGN
24 years old
E artsup, 5th year

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

img01
img01

Marine Mohmmed

DESIGN
24 years old
Paris Descartes, Master

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

Instructors

img01

Samuel Juillot
Biology

Advisors

img01

Guillaume Mercy
Biology

img01

Pierre Parutto
Computer Science


IONIS Paris team. 2015 Edition