Difference between revisions of "Template:UCL/Style"

@@ Line 4: / Line 4: @@
 @import url('https://fonts.googleapis.com/css?family=Quicksand');
 @import url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");
 /*Futura*/
 @font-face {
@@ Line 12: / Line 11: @@
      src: url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");
      src: local('Futura'), local('Futura'),
-    url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot") format("embedded-opentype"),
+        url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot") format("embedded-opentype"),
-    url("https://static.igem.org/mediawiki/2018/c/ce/T--UCL--futuramed.woff") format("woff"),
+        url("https://static.igem.org/mediawiki/2018/c/ce/T--UCL--futuramed.woff") format("woff"),
-    url("https://static.igem.org/mediawiki/2018/e/e6/T--UCL--futuramed.ttf") format("truetype"),
+        url("https://static.igem.org/mediawiki/2018/e/e6/T--UCL--futuramed.ttf") format("truetype"),
+        url('https://static.igem.org/mediawiki/2018/8/84/T--UCL--Futura.otf');
    }
@@ Line 24: / Line 24: @@
      src: url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot');
      src: local('Quicksand Regular'), local('Quicksand-Regular'),
-            url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot') format('embedded-opentype'),
+        url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot') format('embedded-opentype'),
-            url('https://static.igem.org/mediawiki/2018/a/aa/T--UCL--quicksand.ttf') format('truetype'),
+        url('https://static.igem.org/mediawiki/2018/a/aa/T--UCL--quicksand.ttf') format('truetype'),
-            url('https://static.igem.org/mediawiki/2018/7/74/T--UCL--QuicksandReg1.woff') format('woff');
+        url('https://static.igem.org/mediawiki/2018/7/74/T--UCL--QuicksandReg1.woff') format('woff'),
+        url('https://static.igem.org/mediawiki/2018/0/06/T--UCL--QuicksandLight.otf');
+}
+/* Lato Thin */
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 300;
+    src: url('https://static.igem.org/mediawiki/2018/0/05/T--UCL--LatoThin.eot');
+    src: local('Lato Thin'), local('Lato-Thin'),
+        url('https://static.igem.org/mediawiki/2018/0/05/T--UCL--LatoThin.eot') format('embedded-opentype'),
+        url('https://static.igem.org/mediawiki/2018/6/60/T--UCL--LatoThin1.ttf') format('truetype'),
+        url('https://static.igem.org/mediawiki/2018/4/4a/T--UCL--LatoThin2.ttf') format('woff'),
 }
@@ Line 32: / Line 45: @@
 #top_title {
      display: none;
+}
+#globalWrapper {
+    font-size: inherit;
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+}
+#mw-content-text {
+    margin-top: 0 !important;
 }
@@ Line 48: / Line 71: @@
      height: 0px !important;
 }
-/* ====NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR==== */
-* {
+#bodyContent {
+    margin-top: 0 !important;
+}
+body
+{
    margin:0;
    padding:0;
 }
-/*
+/* ====NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR==== */
-@media screen and (min-width: 1024px) {
+.navbarzindex
-    nav, nav ul li a {
-        height: 8.5vh;
-    }
-}
-@media screen and (max-width: 1023px) {
-    nav, nav ul li a {
-        height: 5vh;
-    }
-}
-*/
-nav
 {
+  z-index: 99999999;
    font-family: "Quicksand";
-  font-weight:100;
    position: fixed;
    top:0;
    left:0;
    width:100%;
-  box-sizing: border-box;
-  transition: 0.3s;
-  background: rgba(255, 255, 255, 0.95);
-  z-index:3;
-  height:8.6vh;
-}
-nav.black
-{
-  background: rgba(0,0,0,0.75);
-}
-.div-logo
-{
-    position: relative;
-    top: 3vh;
-    left:1.5vw;
-    z-index: 9999;
 }
-.img-logo
+.img-logo_igem
 {
-  float:left;
    transition:0.3s;
-  /*
-  box-shadow: 5px 5px 10px #d0513a;
-*/
    border-radius: 100%;
-   z-index: 9999;
+   z-index: 10;
    -webkit-transform: translateX(3vh);
    transform: translateX(3vh);
-   position:fixed;
+   position: fixed;
    width:11vh;
+  height: 11vh;
+  margin-top:4vh;
 }
-.black.img-logo
-{
+.navbarzindex .topnav_igem {
+  overflow: hidden;
+  background-color: rgba(255,255,255,1);
+  margin-top:16px;
+  transition:0.3s;
 }
-nav ul
+.navbarzindex.black .topnav_igem
 {
-   list-style: none;
+   background-color: rgba(0, 0, 0, 0.75);
-  float:right;
+   border-bottom: solid 1px rgba(255, 255, 255,1);
-  display:flex;
+   border-bottom-style: solid;
-  margin: 0 0 0 0;
-   padding: 0;
-   position:relative;
 }
-nav ul li
+.topnav_igem a {
-{
+   display: block;
-   list-style: none;
-}
-nav ul li a
-{
    color: rgba(242, 77, 25,1);
+  text-align: center;
+  padding: 14px 16px;
    text-decoration: none;
-  text-transform: uppercase;
+   font-size: 17px;
-  transition:0.3s;
-  box-sizing: border-box;
-  position: relative;
-   font-size: 0.9vw;
-  display: block;
-  text-align: center;
-  width: 11.5vw;
-  vertical-align: middle;
-  display: table-cell;
-  height:8.5vh;
 }
-nav.black ul li a
-{
-  color: rgba(255, 255, 255, 1);
+.active_igem {
+  background-color: #4CAF50;
+  color: white;
 }
-nav ul li a:before
-{
+.topnav_igem .icon_igem {
-   content: '';
+   display: none;
-  position: absolute;
-  top: 0;
-  left:0;
-  width:100%;
-  height:100%;
-  background:rgba(242, 77, 25,1);
-  transform-origin:top;
-  transform:scaleY(0);
-  transition: 0.5s;
-  color:#000;
-  z-index: -1;
 }
-nav ul li a:hover
-{
+.dropdown_igem {
+    float:left;
+    overflow: hidden;
+}
+.dropdown_igem .dropbtn_igem {
+    font-size: 17px;
+    border: none;
+    outline: none;
+    color: rgba(242, 77, 25,1);
+    padding:0;
+    background-color: inherit;
+    font-family: inherit;
+    margin: 0;
+    text-align:center;
+    width:160px;
+    height:60px;
+}
+.navbarzindex.black .dropdown_igem .dropbtn_igem {
    color:rgba(255, 255, 255, 1);
-  text-decoration: none;
 }
-nav ul li a:hover:before
-{
+.dropdown-content_igem {
-  transform-origin:top;
-  transform:scaleY(1);
+    position: absolute;
+    z-index: 1;
+    margin-left:auto;
+    margin-right:auto;
+    display:none;
 }
-nav.black ul li a:before
-{
-  background:rgba(255,255,255,0.75);
+.dropdown-content_igem a {
+    text-align:center;
+    color:rgba(242, 77, 25,1);
+    background-color:rgba(255,255,255,1);
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+.navbarzindex.black .dropdown-content_igem a {
+    text-align:center;
+    color:rgba(255, 255, 255, 1);
+    background-color:rgba(0, 0, 0, 0.75);
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+.showy {display: block;}
+@media screen and (max-width: 1110px) {
+  .topnav_igem a:not(:first-child), .dropdown_igem .dropbtn_igem {
+    display: none;
+  }
+  .topnav_igem a.icon_igem {
+    display: block;
+  }
+.topnav_igem a:hover, .dropdown_igem:hover .dropbtn_igem {
+  background-color: rgba(242, 77, 25,1);
+  color: white;
 }
-nav.black ul li a:hover
+.navbarzindex.black .topnav_igem a:hover, .dropdown_igem:hover .dropbtn_igem {
-{
+   background-color: rgba(242, 77, 25,1);
-   color:rgba(0,0,0,1);
+   color: white;
-   text-decoration: none;
 }
-nav.black ul li a:hover:before
+.dropdown-content_igem a:hover {
-{
+    background-color: rgba(242, 77, 25,1);
-   transform-origin:top;
+    color: rgba(255,255,255,1);
-   transform:scaleY(1);
+}
+/*  */
+.topnav_igem a:hover, .dropdown_igem:hover .dropbtn_igem {
+   background-color: rgba(242, 77, 25,1);
+   transition: 0.3s;
+  color:white;
+}
+.navbarzindex.black .dropdown_igem:hover .dropbtn_igem{
+  background-color: white;
+  color:black;
+}
+.dropdown-content_igem a:hover {
+    background-color: rgba(242, 77, 25,1);
+    color: rgba(255,255,255,1);
+    transition: 0.3s;
 }
-nav ul li a:focus
+.navbarzindex.black .dropdown-content_igem a:hover {
-{
+   background-color: rgba(255, 255, 255, 1);
-   outline:inherit;
+  color: rgba(0,0,0,1);
 }
-nav ul li ul
+/*  */
-{
+.navbarzindex.black .icon_igem{
-   display:none;
+   color:white;
-  text-align: center;
-  max-width: 200px;
-  transition:0.3s;
-  opacity: 0;
-  visibility: hidden;
-  transform:translateY(0px);
-  background:rgba(255, 255, 255, 0.9);
 }
-nav.black ul li ul
+.navbarzindex.black .topnav_igem a:hover{
+  background-color: white;
+  color:black;
+}
+.dropdown-content_igem
 {
+width:100vw;
+}
+  .topnav.responsive_igem {position: relative;}
+  .topnav.responsive_igem .icon_igem {
-   background:rgba(0,0,0,0.75);
+   }
+  .dropdown_igem .dropbtn_igem{
+  font-size:22px;
+  font-weight:bold;
+  }
+  .topnav_igem.responsive a {
+    float: none;
+    display: block;
+    text-align: center;
+  }
+  .topnav_igem.responsive .dropdown_igem {float: none;}
+  .topnav_igem.responsive .dropdown-content_igem {position: relative;}
+  .topnav_igem.responsive .dropdown_igem .dropbtn_igem {
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+ .floatright_igem{
+ float:none !important;
+ }
+ .floatleft_igem{
+ float:left !important;
+ }
 }
-nav ul li:hover ul
+@media screen and (min-width: 1111px) {
-{
+.floatright_igem{
-  opacity: 1;
+float:right;
-  visibility: visible;
-  display:block;
 }
-nav ul li ul li a
+.dropdown-content_igem
 {
-  text-align: center;
+width:160px;
-  position: relative;
-  vertical-align: middle;
-  display: table-cell;
 }
-nav.black ul li ul li a
+.dropdown-content_igem{
-{
+box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 }
-@media screen and (max-width:700px) {
+.topnav_igem a:hover, .dropdown_igem:hover .dropbtn_igem {
-    .particle-bg-intro, .scroll, .section1, .section2, .section3,
+  background-color: rgba(242, 77, 25,1);
-    .section4, .section5 {
+  transition: 0.3s;
-        width: 100%;
+  color:white;
-    }
+}
+.navbarzindex.black .dropdown_igem:hover .dropbtn_igem{
+  background-color: white;
+  color:black;
+}
+.dropdown-content_igem a:hover {
+    background-color: rgba(242, 77, 25,1);
+    color: rgba(255,255,255,1);
+    transition: 0.3s;
 }
-@media screen and (max-width:700px) {.particle-bg-heading, .acronym, .acronym1, .acronym2,
+.navbarzindex.black .dropdown-content_igem a:hover {
-.acronym3, .acronym4, .heading, .heading1, .heading2, .heading3,
+  background-color: rgba(255, 255, 255, 1);
-.heading4, {
+  color: rgba(0,0,0,1);
-    width: 100%;
-    }
 }
-/* ====HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING=======HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING==== */
+.dropdown_igem:hover > .dropdown-content_igem {
+    display:block;
+}
+}
+.show_igem
+{
+display:block;
+}
+/* Fixed background/canvas */
 #particles-js
 {
-  width: 100%;
+   height: 107vh;
-   height: 85vh;
+   background: black;
-  /*
-  background: url('https://static.igem.org/mediawiki/2018/7/7d/T--UCL--SilkStock1.jpg');
-   background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
-   */
+   background-size: cover;
-   background: #000000;
+   background-attachment: fixed;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
@@ Line 259: / Line 325: @@
    flex: 0 0 100%;
    max-width: 100%;
-   padding: 5em 1em;
+   padding: 4em 1em 5em;
-  border-radius: 0.3em;
 }
+/* Heading */
 div.particle-bg-heading
 {
    position: absolute;
-   top:15vh;
+   top:12vh;
    left:10vw;
    right:50vw;
-}
+  height: 100vh
-@media screen and (min-width: 1024px) {
-    .acronym {
-        font-size: 7vw;
-    }
-}
-@media screen and (max-width: 1023px) {
-    .acronym{
-        font-size: 8vw;
-    }
-}
-@media screen and (min-width: 1024px) {
-    .heading {
-        font-size: 4vw;
-    }
-}
-@media screen and (max-width: 1023px) {
-    .heading{
-        font-size: 5vw;
-    }
 }
 .particle-bg-heading .acronym
@@ Line 370: / Line 417: @@
    display:inline-block;
 }
+@media screen and (min-width: 1024px) {
+    .acronym {
+        font-size: 7vw;
+    }
+}
+@media screen and (max-width: 1023px) {
+    .acronym{
+        font-size: 8vw;
+    }
+}
+@media screen and (min-width: 1024px) {
+    .heading {
+        font-size: 4vw;
+    }
+}
+@media screen and (max-width: 1023px) {
+    .heading{
+        font-size: 5vw;
+    }
+}
 .particle-bg-intro
 {
-   font-family: "Quicksand";
+   font-family: "Quicksand", sans-serif;
-   font-size:10px;
+   font-size:1rem;
-   font-weight: 100;
+   font-weight: 400;
    position: relative;
    line-height: 1.75;
    color: #ffffff;
    animation-timing-function: ease-in;
-   animation-delay: 0s;
+   animation-delay: 4.5s;
-   text-align: justify;
+   text-align:left;
    word-wrap: break-word;      /* IE 5.5-7 */
    white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
    white-space: pre-wrap;      /* current browsers */
-   width:30vw;
+   width:40vw;
+  top: 6vh;
 }
-.scroll
+.scroll_igem
 {
    font-size: 96px;
@@ Line 395: / Line 462: @@
    animation-duration: 2s;
    animation-delay: 0s;
-   animation-direction: alternate;
+   animation-direction: alternate-reverse;
    position: absolute;
-  top:90vh;
-  left:45vw;
    text-decoration: none;
    z-index:2;
-   width:5vw;
+   width:1vw;
+  display: -webkit-flex; /* Safari */
+  -webkit-align-items: center; /* Safari 7.0+ */
+  display: block;
+  margin-top: 85vh;
+  margin-left: 45vw;
 }
@@ Line 407: / Line 478: @@
      text-decoration: inherit;
      color: inherit;
-     cursor: auto;
+     cursor: pointer;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    bottom: 0;
 }
@@ Line 413: / Line 487: @@
      text-decoration: inherit;
      color: inherit;
-     cursor: auto;
+     cursor: pointer;
 }
+/* HOMEPAGE___SECTIONS========= HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========HOMEPAGE___SECTIONS=========*/
+.h1_igem_homepage {
+    font-weight: 400;
+    font-family: "Quicksand", sans-serif;
+    font-size: 5rem;
+    color: rgba(242, 77, 25,1);
+    text-align: center;
+    line-height: 6rem;
+}
 section.section1
 {
-   padding: 150px 0px 100px;
+   padding: 100px 0px 100px;
+  background: black;
 }
 section.section1 p
@@ Line 423: / Line 509: @@
    width: 80vw;
    margin:30px auto;
-   text-align: center;
+   text-align: center !important;
-   font-size: 24px;
+   font-size: 24px !important;
-   line-height: 30px;
+   line-height: 30px !important;
-   font-family: "Quicksand";
+   font-family: "Lato", sans-serif !important;
+  font-weight: 300;
+  vertical-align: super;
+  color:white;
 }
 section.section2
@@ Line 433: / Line 522: @@
    background-color: grey;
    color:white;
+  height: 100vh;
 }
-section.section2 p
-{
-  width: 80vw;
-  margin:30px auto;
-  text-align: center;
-  font-size: 24px;
-  line-height: 30px;
-  font-family: "Quicksand";
+/* SUBPAGE===============================================================================================================================================*/
+.background_img_igem {
+    background-image: url('https://static.igem.org/mediawiki/2018/9/98/T--UCL--silkbackground2.svg') !important;
+    min-height: 100% !important;
+    width: 100% !important;
+    background-attachment: fixed !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+    z-index: -5;
 }
-section.section3
+.container_igem {
+    padding-bottom: 1rem;
+    background-color:rgba(0, 0, 0, 0.0);
+    padding-left: 5vw;
+}
+.container_igem2 {
+    padding-bottom: 1rem;
+    background-color:rgba(0, 0, 0, 0.0);
+}
+.card_igem {
+    animation-duration: 1.5s;
+    animation-iteration-count: 1;
+    background-color: rgb(255, 255, 255, 1) !important;
+    border-radius: 1rem !important;
+    margin-top: 5vh;
+    padding-top: 5vh;
+    padding-bottom: 7.5vh;
+    margin-left: 2rem;
+}
+.card_pic_igem {
+    animation-duration: 1.5s;
+    animation-iteration-count: 1;
+    background-color: rgb(255, 255, 255, 1) !important;
+    border-radius: 1rem !important;
+    margin-top: 1rem;
+}
+.card-text_igem {
+    font-family: 'Lato', sans-serif !important;
+    font-weight: 300;
+    line-height: 1.6em;
+    margin-bottom: 1rem !important;
+    margin-top: 2rem !important;
+    font-size: 1rem !important;
+}
+.bypass{
+  text-align: center !important;
+  margin-bottom: 1rem !important;
+}
+.card-text_igem2 {
+    font-family: 'Lato', sans-serif !important;
+    font-weight: 300;
+    line-height: 1.6em;
+    margin-bottom: 0.1rem !important;
+    margin-top: 0.2rem !important;
+    font-size: 1rem !important;
+}
+.basicparts{
+  margin-top: 5vh;
+}
+@media screen and (max-width:1441px) {
+  .specialmargin {
+    margin-bottom: 5vh;
+  }
+}
+@media screen and (max-width: 1399px) {
+    .card_igem{
+        margin-left: 7rem;
+    }
+}
+@media screen and (max-width: 401px) {
+    .card_igem{
+        margin-left: 0rem;
+    }
+}
+.h1_igem_subpage {
+    font-weight: 400;
+    font-family: "Quicksand", sans-serif;
+    font-size: 5rem;
+    color: rgba(242, 77, 25,1);
+    text-align: center;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    line-height: 1rem;
+}
+.h1_igem_subpage1 {
+    font-weight: 400;
+    font-family: "Quicksand", sans-serif;
+    font-size: 5rem;
+    color: rgba(242, 77, 25,1);
+    text-align: center;
+    padding-top: 7rem;
+    padding-bottom: 1rem;
+    line-height: 1rem;
+}
+.h1_igem_subpage2 {
+    font-weight: 400;
+    font-family: "Quicksand", sans-serif;
+    font-size: 5rem;
+    color: rgba(242, 77, 25,1);
+    text-align: center;
+    line-height: 1rem;
+}
+.h1_igem_subpage3 {
+    font-weight: 400;
+    font-family: "Quicksand", sans-serif;
+    font-size: 5rem;
+    color: rgba(242, 77, 25,1);
+    text-align: center;
+    padding-top: 7rem;
+    padding-bottom: 2rem;
+    line-height: 1rem;
+}
+@media screen and (max-width: 401px) {
+    .h1_igem_subpage, .h1_igem_subpage1{
+        font-size: 3rem;
+    }
+}
+.subpage_img_igem {
+    margin-right: auto;
+    margin-left: auto;
+    width: 80vh;
+    height: 80vh;
+    display: block;
+    margin-top: 1rem;
+}
+.subpage_img_igem1 {
+    margin-right: auto;
+    margin-left: auto;
+    width: 100vh;
+    height: 100vh;
+    display: block;
+}
+@media screen and (max-width: 401px) {
+    .subpage_img_igem{
+        width: 30vh;
+        height: 30vh;
+        margin-top: 5rem;
+    }
+}
+@media screen and (max-width: 769px) {
+    .subpage_img_igem{
+        width: 40vh;
+        height: 40vh;
+        margin-top: 5rem;
+    }
+}
+@media screen and (max-width: 1025px) {
+    .subpage_img_igem{
+        width: 50vh;
+        height: 50vh;
+        margin-top: 5rem;
+    }
+}
+.card-title h4 {
+    font-size: 2.5rem;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 400;
+    margin-top: 1rem;
+}
+.vanish {
+    font-size: 1.5rem !important;
+    font-family: 'Quicksand', sans-serif !important;
+    font-weight: 400;
+    margin-top: 1rem;
+    text-align: center !important;
+}
+.card_igem_img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: 0.5rem;
+    border-radius: 0.5rem !important;
+}
+.card_igem_sponsor {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    vertical-align:middle !important;
+    align-items: center !important;
+}
+.model_img{
+    padding:1rem;
+}
+.h4_sponsor {
+    font-family: 'Quicksand', sans-serif;
+    font-size: 1rem;
+}
+.animatedhover {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.animatedhover:hover {
+  -webkit-animation-duration: 1s;
+  animation-duration: 2s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  animation-play-state: running;
+  animation-iteration-count: infinite;
+}
+.h2_card_igem {
+    font-weight: 400;
+    font-family: "Quicksand", sans-serif;
+    font-size: 2rem;
+    color: rgba(0, 0, 0,1);
+    margin-bottom: 1rem;
+}
+.sidenav {
+    width: 200px;
+    z-index: 1;
+    left: 0.5vw;
+    border-radius: 1rem;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    vertical-align: middle;
+    position: absolute;
+}
+.sidenav a {
+    padding: 6px 8px 6px 16px;
+    text-decoration: none;
+    font-size: 1rem;
+    background-color: tomato;
+    color:white;
+    display: block;
+    font-family: 'Quicksand', sans-serif;
+}
+.sidenav a:hover {
+    background-color: white;
+    color: tomato;
+}
+@media screen and (max-width: 1025px) {
+    .sidenav{
+        width:160px;
+    }
+}
+@media screen and (max-width: 401px) {
+    .sidenav{
+        display:none;
+    }
+}
+.yaypadding
 {
-   padding: 100px 0px 100px;
+   padding-top: 75px;
+}
+.accordion {
+    background-color: rgb(13, 13, 13, 0.8);
+    color: tomato;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: center;
+    outline: none;
+    font-size: 1.5rem;
+    font-family:"Quicksand";
+    transition: 0.4s;
+    border-radius: 0.5rem;
 }
-section.section3 p
+.active, .accordion:hover {
+    background-color: #ff3300;
+    color: #eee;
+}
+.panel {
+    padding: 8px 18px;
+    display: none;
+    background-color:  #262626;
+    color: #eee;
+    overflow: hidden;
+    border-radius: 0.5rem;
+}
+.sidenav_accordion {
+    height: 100vh;
+    width: 2.3rem;
+    position: fixed;
+    z-index: 1;
+    top: 75;
+    left: 0;
+    background-color: rgb(13, 13, 13, 0.9);
+    overflow-x: hidden;
+    padding-top: 20px;
+}
+.sidenav_accordion a {
+    padding: 4px 2px 2px 1px;
+    text-decoration: none;
+    font-size: 0.8rem;
+    color: #737373;
+    display: block;
+    text-align: center;
+    line-height: 1.1rem;
+}
+.sidenav_accordion a:hover {
+    color: tomato;
+}
+.accordion_column {
+    float: left;
+    width: 50%;
+    padding: 10px;
+}
+.accordion_row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+.accordion_image{
+    width:80%;
+    margin: 5vh;
+}
+@media screen and (max-height: 450px) {
+  .sidenav_accordion {padding-top: 15px;}
+  .sidenav_accordion a {font-size: 18px;}
+}
+.leftspace {
+  position: relative;
+  left: 410;
+  bottom: 450;
+}
+.button_circle {
+    background-color: tomato;
+    border: none;
+    color: white;
+    padding: 1px 5px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 10px;
+    margin: 5px 0.1px;
+    cursor: pointer;
+    border-radius: 80%;
+  }
+.button_circle:hover {background-color: red}
+    #myContainer {
+      width: 400px;
+      height: 300px;
+      position: relative;
+      background:  rgb(102, 102, 102, 0.7);
+      border-radius: 5%;
+    }
+    #myRFP1 {
+      width: 40px;
+      height: 25px;
+      position: relative;
+      left: 30px;
+      bottom: 155px;
+      background-color:  #ff6666;
+      border-radius: 10%;
+    }
+    #myInteinRN1 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 15px;
+      bottom: 172px;
+      background-color: #ff9966;
+      border-radius: 80%;
+    }
+    #myInteinRC1 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 70px;
+      bottom: 180px;
+      background-color: #ffffcc;
+      border-radius: 10%;
+    }
+    #myGFP1 {
+      width: 40px;
+      height: 25px;
+      position: relative;
+      left: 100px;
+      bottom: 196px;
+      background-color:  #b3ffb3;
+      border-radius: 10%;
+    }
+    #myInteinGN1 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 85px;
+      bottom: 213px;
+      background-color: #ffffcc;
+      border-radius: 80%;
+    }
+    #myInteinGC1 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 140px;
+      bottom: 220px;
+      background-color:   #ff9966;
+      border-radius: 10%;
+    }
+    #myRFP2 {
+      width: 40px;
+      height: 25px;
+      position: relative;
+      left: 170px;
+      bottom: 237px;
+      background-color:  #ff6666;
+      border-radius: 10%;
+    }
+    #myInteinRN2 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 155px;
+      bottom: 253px;
+      background-color: #ff9966;
+      border-radius: 80%;
+    }
+    #myInteinRC2 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 210px;
+      bottom: 261px;
+      background-color: #ffffcc;
+      border-radius: 10%;
+    }
+    #myGFP2 {
+      width: 40px;
+      height: 25px;
+      position: relative;
+      left: 240px;
+      bottom: 278px;
+      background-color:  #b3ffb3;
+      border-radius: 10%;
+    }
+    #myInteinGN2 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 225px;
+      bottom: 294px;
+      background-color: #ffffcc;
+      border-radius: 80%;
+    }
+    #myInteinGC2 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 280px;
+      bottom: 302px;
+      background-color:   #ff9966;
+      border-radius: 10%;
+    }
+    #myRFP3 {
+      width: 40px;
+      height: 25px;
+      position: relative;
+      left: 310px;
+      bottom: 319px;
+      background-color:  #ff6666;
+      border-radius: 10%;
+    }
+    #myInteinRN3 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 295px;
+      bottom: 335px;
+      background-color: #ff9966;
+      border-radius: 80%;
+    }
+    #myInteinRC3 {
+      width: 15px;
+      height: 8px;
+      position: relative;
+      left: 350px;
+      bottom: 343px;
+      background-color: #ffffcc;
+      border-radius: 10%;
+    }
+.h4_notebook {
+    font-family: 'Quicksand', sans-serif;
+    color: tomato;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+.h4_cards {
+    font-family: 'Quicksand', sans-serif;
+    color: black;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    text-align: left;
+}
+/*  */
+.collapsible {
+ background-color: #777;
+ color: white;
+ cursor: pointer;
+ padding: 1rem;
+ border: none;
+ text-align: center;
+ outline: none;
+ font-size: 2rem;
+ border-radius: 0.5rem;
+ font-family: 'Quicksand', sans-serif;
+ transition: 0.3s;
+ margin-left: 2rem;
+ width: 50vw;
+}
+.activelol{
+  background-color: rgba(28,28,28,1)
+}
+.activelol, .collapsible:hover {
+ background-color: #555;
+}
+.collapsible:after {
+ content: '\002B';
+ color: white;
+ font-weight: bold;
+ float: right;
+}
+.activelol:after {
+ content: "\2212";
+}
+.collapsible1 {
+ background-color: #777;
+ color: white;
+ cursor: pointer;
+ border: none;
+ text-align: center;
+ outline: none;
+ font-size: 2rem;
+ border-radius: 0.5rem;
+ font-family: 'Quicksand', sans-serif;
+ transition: 0.3s;
+ width: 50vw;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+.activelol1{
+  background-color: rgba(28,28,28,1)
+}
+.activelol1, .collapsible1:hover {
+ background-color: #555;
+}
+.collapsible1:after {
+ content: '\002B';
+ color: white;
+ font-weight: bold;
+ float: right;
+}
+.activelol1:after {
+ content: "\2212";
+}
+.collapsible_content {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ background-color: #f1f1f1;
+ padding-left: 2.5vw;
+ padding-right: 2.5vw;
+ border-radius: 0.5rem !important;
+ margin-left: 2rem;
+}
+.collapsible_content1 {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ background-color: #f1f1f1;
+ border-radius: 0.5rem !important;
+}
+@media screen and (max-width: 1399px) {
+    .collapsible, .collapsible_content {
+        margin-left: 7rem;
+    }
+}
+.specialp
 {
-  width: 80vw;
+ margin-top: 0.5rem !important;
-  margin:30px auto;
+ margin-bottom: 0 !important;
-  text-align: center;
-  font-size: 24px;
-  line-height: 30px;
-  font-family: "Quicksand";
 }
-section.section4
+tbody tr:hover
 {
-   padding: 100px 0px 100px;
+   height:43px;
-   background-color: grey;
+   background-color: rgb(214, 214, 214);
-   color:white;
+   color:black;
+  z-index: -1;
+  transition: 0.15s;
 }
-section.section4 p
+.tableleft
 {
-   width: 80vw;
+   text-align: left;
-  margin:30px auto;
+}
+.tablecenter{
    text-align: center;
-  font-size: 24px;
-  line-height: 30px;
-  font-family: "Quicksand";
 }
-section.section5
+.tableright{
+  text-align: right;
+}
+@media screen and (max-width: 1126px) {
+   .collapsible{
+       margin-left: 7rem;
+   }
+}
+@media screen and (max-width: 401px) {
+   .collapsible{
+       margin-left: 0rem;
+   }
+}
+.marginlr{
+  margin-left: auto;
+  margin-right: auto;
+}
+.textcenter{
+  margin-left: auto;
+  margin-right: auto;
+}
+.row{
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+.loqclass{
+  text-align: center !important;
+  margin-bottom: 3rem !important;
+}
+.filler1{
+  padding:2vh;
+}
+.kin1{
+}
+.kin2{
+}
+.speciall{
+  margin-left: 7vw;
+}
+.kinesismagazine{
+  width:100%;
+  height:100%;
+}
+.paddingss{
+  margin-left:7.5vw;
+   margin-right: 7.5vw;
+   margin-bottom: 6vh;
+   border:5px grey solid;
+   margin-top: 3vh;
+}
+.insta{
+  width:80%;
+  display:block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 5vh;
+  margin-bottom: 3vh;
+  border-radius: 3rem;
+}
+.cards_logos{
+  width:80%;
+  display:block;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 3rem;
+}
+.cards_logos1{
+  width:50%;
+  display:block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.cards_logos2{
+  width:50%;
+  display:block;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 3rem;
+}
+.cards_logos3{
+  width:100%;
+  display:block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+}
+.cards_logos4{
+  width:105%;
+  display:block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+}
+.cards_logos5{
+  width:80%;
+  display:block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+}
+.cards_logos6{
+  width:110.4%;
+  display:block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+}
+.customise{
+  position: relative;
+  width: 100vw;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+.lol{
+  display: inline-block;
+}
+.lol:hover{
+  color:tomato;
+  transition:0.3s;
+  animation-iteration-count: infinite;
+  animation-duration: 0.1s;
+}
+.superwow{
+  background-color: orange !important;
+  color:white !important;
+}
+.yin{
+  background-color: black;
+  color:white;
+  border-radius: 1rem;
+  transition: 0.3s;
+}
+.yin:hover{
+  background-color: white;
+  color:black;
+  transition: 0.3s;
+}
+.yang{
+  background-color: white;
+  color:black;
+  border-radius: 1rem;
+}
+.yang:hover{
+  background-color: #ff9f80;
+  color:black;
+  transition: 0.5s;
+}
+.removepadding
 {
-   padding: 100px 0px 100px;
+   padding-bottom:0 !important;
+  text-align: justify !important;
+  font-size: 1rem;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 400;
+    margin-top: 1rem;
 }
-section.section5 p
+.argss{
+  text-align: center !important;
+}
+.sshh{
+  text-decoration: none;
+  color:rgb(255, 133, 102);
+  transition: 0.15s;
+}
+.sshh:hover{
+  text-decoration: none;
+  color:rgb(255, 0, 53);
+  transition: 0.15s;
+}
+.sshh1{
+  text-decoration: none;
+  color:rgb(153, 0, 0) !important;
+  transition: 0.15s;
+}
+.sshh1:hover{
+  text-decoration: none;
+  color:rgb(77, 0, 0);
+  transition: 0.15s;
+}
+.h3_insta {
+    font-size: 1.5rem;
+    font-family: 'Quicksand', sans-serif;
+    color: black;
+    text-align: center;
+     background-color: white;
+     width: 15rem;
+}
+.flippy
 {
-   width: 80vw;
+    animation-iteration-count: infinite;
-   margin:30px auto;
+    animation-duration: 1s;
+}
+.flip-card {
+  background-color: transparent;
+}
+.flip-card-inner {
+  position: relative;
+   width: 100%;
+   height: 22vh;
    text-align: center;
-   font-size: 24px;
+   transition: transform 0.6s;
-   line-height: 30px;
+  transform-style: preserve-3d;
-   font-family: "Quicksand";
+}
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+.flip-card-front {
+  background-color: transparent;
+  color: black;
+}
+.flip-card-back {
+  background-color: transparent;
+  color: black;
+  transform: rotateY(180deg);
+}
+.carousel-item{
+  background-color: rgba(28,28,28,1);
+}
+.list-group-item_igem1 {
+  color: white;
+  background-color: rgb(255, 133, 102);
+}
+.list-group-item_igem2 {
+  color: white;
+  background-color: rgb(255, 219, 77);
+}
+.list-group-item_igem3 {
+  color: white;
+  background-color: rgb(255, 77, 77);
+}
+.list-group-item_igem4 {
+  color: white;
+  background-color: rgb(255, 166, 77);
+}
+.infographic_igem {
+    width: 90vw;
+    height: auto;
+}
+.carousel-inner img {
+      width: 33vw;
+      height: 33vw;
+  }
+  .holysss{
+display:block;
+margin-left: auto;
+margin-right: auto;
+  }
+  .lmao{
+    padding-bottom: 2vh !important;
+  }
+  .lmaoo{
+    padding-bottom: 0.5vh !important;
+    margin-bottom: 5vh !important;
+  }
+  .fuq img{
+    width:100%;
+  }
+  .orange{
+    color:tomato;
+  }
+  .orange_bkgr{
+      background-color: white;
+      border-radius: 0.5rem;
+      color: tomato !important;
+  }
+.carousel_title_igem {
+    font-size: 2rem !important;
+    font-weight: 800 !important;
+    font-family: "Quicksand", sans-serif !important;
+    color: tomato !important;
+    background-color: rgba(28,28,28,0.75);
+}
+  .wwww{
+    background-color: rgba(28,28,28,1);
+    font-size: 1rem !important;
+    font-weight: 400 !important;
+    font-family: "Lato", sans-serif !important;
+  }
+.sucks{
+  width:30vh;
+  border-radius: 50%;
+  border:green 5px solid;
+  transition: 0.3s;
+  opacity: 0.5;
+}
+.sucks:hover{
+  width:30vh;
+  border-radius: 50%;
+  border: green 5px solid;
+  transition:0.3s;
+  opacity: 1;
+}
+.sucks2{
+  width:30vh;
+  height:30vh;
+  border-radius: 50%;
+  border:rgb(54, 173, 224) 5px solid;
+  transition: 0.3s;
+  opacity: 0.5;
+}
+.sucks2:hover{
+  width:30vh;
+  border-radius: 50%;
+  border: rgb(54, 173, 224) 5px solid;
+  transition:0.3s;
+  opacity: 1;
+}
+.sucks3{
+  width:30vh;
+  height:30vh;
+  border-radius: 50%;
+  border:rgba(28,28,28,1) 5px solid;
+  transition: 0.3s;
+  opacity: 0.5;
+}
+.sucks3:hover{
+  width:30vh;
+  border-radius: 50%;
+  border: rgba(28,28,28,1) 5px solid;
+  transition:0.3s;
+  opacity: 1;
+}
+.sucks4{
+  width:30vh;
+  height:30vh;
+  border-radius: 50%;
+  border:rgba(21, 38, 98, 1) 5px solid;
+  transition: 0.3s;
+  opacity: 0.5;
+}
+.sucks4:hover{
+  width:30vh;
+  border-radius: 50%;
+  border: rgba(21, 38, 98, 1) 5px solid;
+  transition:0.3s;
+  opacity: 1;
+}
+.sucks5{
+  width:30vh;
+  height:30vh;
+  border-radius: 50%;
+  border:red 5px solid;
+  transition: 0.3s;
+  opacity: 0.5;
+}
+.sucks5:hover{
+  width:30vh;
+  border-radius: 50%;
+  border: red 5px solid;
+  transition:0.3s;
+  opacity: 1;
+}
+.sucks6{
+  width:30vh;
+  height:30vh;
+  border-radius: 50%;
+  border:rgba(50, 223, 156, 1) 5px solid;
+  transition: 0.3s;
+  opacity: 0.5;
+}
+.sucks6:hover{
+  width:30vh;
+  border-radius: 50%;
+  border: rgba(50, 223, 156, 1) 5px solid;
+  transition:0.3s;
+  opacity: 1;
+}
+.elimination{
+  padding-bottom: 0 !important;
+}
+.eeeee{
+    margin-bottom: 1.5vh;
+}
+.ohwow{
+  margin-bottom: 15vh;
+}
+.mmmm{
+  margin-left: auto;
+  margin-right: auto;
+}
+.removedec{
+  text-decoration: none;
+}
+.mrfont{
+  font-family: 'Lato', sans-serif !important;
+  font-weight: 300;
+   line-height: 1.6em;
+  text-align: justify !important;
+}
+.mrfont2{
+   font-family: 'Lato', sans-serif !important;
+  font-weight: 300;
+  line-height: 1.6em;
+  text-align: center !important;
+}
+.card_igem.mmmmm p{
+    text-align: justify !important;
+}
+.ooooo{
+  border: 2px solid rgba(138, 138, 138, 1);
+  margin-top: 2rem;
+}
+.oooo th{
+  width:300px;
+}
+figcaption{
+  font-size: 11px;
+}
+.video_igem{
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+.list_padding_igem {
+    padding-bottom: 1.5rem;
+}
+.table_text_igem{
+    font-family: 'Lato', sans-serif !important;
+    font-weight: 300;
+    line-height: 1.6em;
+}
+.m1{
+  width:25vw;
+}
+.nodec{
+  text-decoration: none;
+}
+.gifs{
+  width:15vw;
+  margin:1rem;
+  border-radius: 1rem;
+}
+.yyyyy{
+  background-color: white;
+  transition: 0.3s;
+}
+.yyyyy:hover{
+  background-color: rgb(214, 214, 214);
+  transition: 0.3s;
+  border-radius: 1rem;
+}
+.marrrgin{
+  margin-left: 10vw;
+}
+.marrgin{
+  margin-right: 10vw;
+}
+.margintopp{
+  margin-top: 5vh;
+}
+.model_h6 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+.model_caption_title_igem {
+    font-weight: bold;
+    color: tomato;
+}
+code {
+    border-radius: 3px;
+    font-family: courier, monospace;
+    padding: 0 3px;
+    color: black;
+    font-size: 1.4rem;
+    line-height: 2rem;
+}
+/* FOOTER===============================================================================================================================================*/
+.footer {
+   position: relative;
+   left: 0;
+   width: 100vw;
+   background-color: rgb(28,28,28, 1);
+   color: white;
+   text-align: center;
+   font-family: "Quicksand", sans-serif;
+   padding-top: 4vh;
+}
+.footer_img_igem {
+    margin-bottom: 5px;
+}
+.h2_footer_igem {
+    font-weight: 400;
+    font-family: "Quicksand", sans-serif;
+    font-size: 2rem;
+    color: rgba(242, 77, 25,1);
+    text-align: center;
+    padding-bottom: 1rem;
+}
+.contacticons
+{
+  transition: 0.075s;
+}
+.contacticons:hover
+{
+  opacity: 0.5;
+}
+/* PARALLAX================================================================== */
+/* ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE========ANIMATE===== */
+@charset "UTF-8";
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.7.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2018 Daniel Eden
+ */
+@-webkit-keyframes bounce {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+%,
+% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+  }
+}
+@keyframes bounce {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+%,
+% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+  }
+}
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+  -webkit-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
+@-webkit-keyframes flash {
+  from,
+%,
+  to {
+    opacity: 1;
+  }
+%,
+% {
+    opacity: 0;
+  }
+}
+@keyframes flash {
+  from,
+%,
+  to {
+    opacity: 1;
+  }
+%,
+% {
+    opacity: 0;
+  }
+}
+.flash {
+  -webkit-animation-name: flash;
+  animation-name: flash;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+@-webkit-keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+@keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+.pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+}
+@-webkit-keyframes rubberBand {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+% {
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
+  }
+% {
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
+  }
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+@keyframes rubberBand {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+% {
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
+  }
+% {
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
+  }
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+.rubberBand {
+  -webkit-animation-name: rubberBand;
+  animation-name: rubberBand;
+}
+@-webkit-keyframes shake {
+  from,
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+%,
+%,
+%,
+%,
+% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+%,
+%,
+%,
+% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+@keyframes shake {
+  from,
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+%,
+%,
+%,
+%,
+% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+%,
+%,
+%,
+% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+@-webkit-keyframes headShake {
+% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+@keyframes headShake {
+% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+.headShake {
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-name: headShake;
+  animation-name: headShake;
+}
+@-webkit-keyframes swing {
+% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+  to {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+@keyframes swing {
+% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+  to {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+.swing {
+  -webkit-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-animation-name: swing;
+  animation-name: swing;
+}
+@-webkit-keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+%,
+% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+%,
+%,
+%,
+% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+%,
+%,
+% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+@keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+%,
+% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+%,
+%,
+%,
+% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+%,
+%,
+% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+.tada {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+@-webkit-keyframes wobble {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes wobble {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.wobble {
+  -webkit-animation-name: wobble;
+  animation-name: wobble;
+}
+@-webkit-keyframes jello {
+  from,
+.1%,
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+.2% {
+    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+.3% {
+    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+.4% {
+    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+.5% {
+    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+.6% {
+    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+.7% {
+    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+.8% {
+    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+@keyframes jello {
+  from,
+.1%,
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+.2% {
+    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+.3% {
+    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+.4% {
+    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+.5% {
+    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+.6% {
+    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+.7% {
+    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+.8% {
+    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+.jello {
+  -webkit-animation-name: jello;
+  animation-name: jello;
+  -webkit-transform-origin: center;
+  transform-origin: center;
+}
+@-webkit-keyframes heartBeat {
+% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+% {
+    -webkit-transform: scale(1.3);
+    transform: scale(1.3);
+  }
+% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+% {
+    -webkit-transform: scale(1.3);
+    transform: scale(1.3);
+  }
+% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes heartBeat {
+% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+% {
+    -webkit-transform: scale(1.3);
+    transform: scale(1.3);
+  }
+% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+% {
+    -webkit-transform: scale(1.3);
+    transform: scale(1.3);
+  }
+% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+.heartBeat {
+  -webkit-animation-name: heartBeat;
+  animation-name: heartBeat;
+  -webkit-animation-duration: 1.3s;
+  animation-duration: 1.3s;
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+}
+@-webkit-keyframes bounceIn {
+  from,
+%,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+@keyframes bounceIn {
+  from,
+%,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+.bounceIn {
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+@-webkit-keyframes bounceInDown {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+    transform: translate3d(0, -3000px, 0);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+    transform: translate3d(0, 25px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, 5px, 0);
+    transform: translate3d(0, 5px, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes bounceInDown {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+    transform: translate3d(0, -3000px, 0);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+    transform: translate3d(0, 25px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, 5px, 0);
+    transform: translate3d(0, 5px, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}
+@-webkit-keyframes bounceInLeft {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+    transform: translate3d(-3000px, 0, 0);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+    transform: translate3d(25px, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(5px, 0, 0);
+    transform: translate3d(5px, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes bounceInLeft {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+    transform: translate3d(-3000px, 0, 0);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+    transform: translate3d(25px, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(5px, 0, 0);
+    transform: translate3d(5px, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+@-webkit-keyframes bounceInRight {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+    transform: translate3d(-25px, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes bounceInRight {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+    transform: translate3d(-25px, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.bounceInRight {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+@-webkit-keyframes bounceInUp {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+    transform: translate3d(0, 3000px, 0);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, -5px, 0);
+    transform: translate3d(0, -5px, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes bounceInUp {
+  from,
+%,
+%,
+%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+    transform: translate3d(0, 3000px, 0);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+% {
+    -webkit-transform: translate3d(0, -5px, 0);
+    transform: translate3d(0, -5px, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.bounceInUp {
+  -webkit-animation-name: bounceInUp;
+  animation-name: bounceInUp;
+}
+@-webkit-keyframes bounceOut {
+% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+%,
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+}
+@keyframes bounceOut {
+% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+%,
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+}
+.bounceOut {
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-animation-name: bounceOut;
+  animation-name: bounceOut;
+}
+@-webkit-keyframes bounceOutDown {
+% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+%,
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+@keyframes bounceOutDown {
+% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+%,
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+.bounceOutDown {
+  -webkit-animation-name: bounceOutDown;
+  animation-name: bounceOutDown;
+}
+@-webkit-keyframes bounceOutLeft {
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+    transform: translate3d(20px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+@keyframes bounceOutLeft {
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+    transform: translate3d(20px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+.bounceOutLeft {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+@-webkit-keyframes bounceOutRight {
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+    transform: translate3d(-20px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+@keyframes bounceOutRight {
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+    transform: translate3d(-20px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+.bounceOutRight {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+@-webkit-keyframes bounceOutUp {
+% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+%,
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+@keyframes bounceOutUp {
+% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+%,
+% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+.bounceOutUp {
+  -webkit-animation-name: bounceOutUp;
+  animation-name: bounceOutUp;
+}
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+@-webkit-keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+@-webkit-keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+  animation-name: fadeInDownBig;
+}
+@-webkit-keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+@-webkit-keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.fadeInLeftBig {
+  -webkit-animation-name: fadeInLeftBig;
+  animation-name: fadeInLeftBig;
+}
+@-webkit-keyframes fadeInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+@-webkit-keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.fadeInRightBig {
+  -webkit-animation-name: fadeInRightBig;
+  animation-name: fadeInRightBig;
+}
+@-webkit-keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
+@-webkit-keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.fadeInUpBig {
+  -webkit-animation-name: fadeInUpBig;
+  animation-name: fadeInUpBig;
+}
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+@-webkit-keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+@-webkit-keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+@keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+.fadeOutDownBig {
+  -webkit-animation-name: fadeOutDownBig;
+  animation-name: fadeOutDownBig;
+}
+@-webkit-keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+@keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+  animation-name: fadeOutLeft;
+}
+@-webkit-keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+@keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+.fadeOutLeftBig {
+  -webkit-animation-name: fadeOutLeftBig;
+  animation-name: fadeOutLeftBig;
+}
+@-webkit-keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+  animation-name: fadeOutRight;
+}
+@-webkit-keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+@keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+.fadeOutRightBig {
+  -webkit-animation-name: fadeOutRightBig;
+  animation-name: fadeOutRightBig;
+}
+@-webkit-keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}
+@-webkit-keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+@keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+.fadeOutUpBig {
+  -webkit-animation-name: fadeOutUpBig;
+  animation-name: fadeOutUpBig;
+}
+@-webkit-keyframes flip {
+  from {
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+% {
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+% {
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+% {
+    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  to {
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+@keyframes flip {
+  from {
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+% {
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+% {
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+% {
+    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  to {
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+.animated.flip {
+  -webkit-backface-visibility: visible;
+  backface-visibility: visible;
+  -webkit-animation-name: flip;
+  animation-name: flip;
+}
+@-webkit-keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+@keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+  animation-name: flipInX;
+}
+@-webkit-keyframes flipInY {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+@keyframes flipInY {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInY;
+  animation-name: flipInY;
+}
+@-webkit-keyframes flipOutX {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+@keyframes flipOutX {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+.flipOutX {
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-animation-name: flipOutX;
+  animation-name: flipOutX;
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+@-webkit-keyframes flipOutY {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+@keyframes flipOutY {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+.flipOutY {
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipOutY;
+  animation-name: flipOutY;
+}
+@-webkit-keyframes lightSpeedIn {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+    transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+% {
+    -webkit-transform: skewX(20deg);
+    transform: skewX(20deg);
+    opacity: 1;
+  }
+% {
+    -webkit-transform: skewX(-5deg);
+    transform: skewX(-5deg);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes lightSpeedIn {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+    transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+% {
+    -webkit-transform: skewX(20deg);
+    transform: skewX(20deg);
+    opacity: 1;
+  }
+% {
+    -webkit-transform: skewX(-5deg);
+    transform: skewX(-5deg);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.lightSpeedIn {
+  -webkit-animation-name: lightSpeedIn;
+  animation-name: lightSpeedIn;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+@-webkit-keyframes lightSpeedOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+    transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+@keyframes lightSpeedOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+    transform: translate3d(100%, 0, 0) 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 {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes rotateIn {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+.rotateIn {
+  -webkit-animation-name: rotateIn;
+  animation-name: rotateIn;
+}
+@-webkit-keyframes rotateInDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes rotateInDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+.rotateInDownLeft {
+  -webkit-animation-name: rotateInDownLeft;
+  animation-name: rotateInDownLeft;
+}
+@-webkit-keyframes rotateInDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes rotateInDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+.rotateInDownRight {
+  -webkit-animation-name: rotateInDownRight;
+  animation-name: rotateInDownRight;
+}
+@-webkit-keyframes rotateInUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes rotateInUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+.rotateInUpLeft {
+  -webkit-animation-name: rotateInUpLeft;
+  animation-name: rotateInUpLeft;
+}
+@-webkit-keyframes rotateInUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes rotateInUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+.rotateInUpRight {
+  -webkit-animation-name: rotateInUpRight;
+  animation-name: rotateInUpRight;
+}
+@-webkit-keyframes rotateOut {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+@keyframes rotateOut {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+.rotateOut {
+  -webkit-animation-name: rotateOut;
+  animation-name: rotateOut;
+}
+@-webkit-keyframes rotateOutDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+@keyframes rotateOutDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+.rotateOutDownLeft {
+  -webkit-animation-name: rotateOutDownLeft;
+  animation-name: rotateOutDownLeft;
+}
+@-webkit-keyframes rotateOutDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+@keyframes rotateOutDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+.rotateOutDownRight {
+  -webkit-animation-name: rotateOutDownRight;
+  animation-name: rotateOutDownRight;
+}
+@-webkit-keyframes rotateOutUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+@keyframes rotateOutUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+.rotateOutUpLeft {
+  -webkit-animation-name: rotateOutUpLeft;
+  animation-name: rotateOutUpLeft;
+}
+@-webkit-keyframes rotateOutUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+@keyframes rotateOutUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+.rotateOutUpRight {
+  -webkit-animation-name: rotateOutUpRight;
+  animation-name: rotateOutUpRight;
+}
+@-webkit-keyframes hinge {
+% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+%,
+% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+%,
+% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+@keyframes hinge {
+% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+%,
+% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+%,
+% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+  -webkit-animation-name: hinge;
+  animation-name: hinge;
+}
+@-webkit-keyframes jackInTheBox {
+  from {
+    opacity: 0;
+    -webkit-transform: scale(0.1) rotate(30deg);
+    transform: scale(0.1) rotate(30deg);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+  }
+% {
+    -webkit-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+% {
+    -webkit-transform: rotate(3deg);
+    transform: rotate(3deg);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes jackInTheBox {
+  from {
+    opacity: 0;
+    -webkit-transform: scale(0.1) rotate(30deg);
+    transform: scale(0.1) rotate(30deg);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+  }
+% {
+    -webkit-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+% {
+    -webkit-transform: rotate(3deg);
+    transform: rotate(3deg);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+.jackInTheBox {
+  -webkit-animation-name: jackInTheBox;
+  animation-name: jackInTheBox;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+@-webkit-keyframes rollIn {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes rollIn {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.rollIn {
+  -webkit-animation-name: rollIn;
+  animation-name: rollIn;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+@-webkit-keyframes rollOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+@keyframes rollOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+.rollOut {
+  -webkit-animation-name: rollOut;
+  animation-name: rollOut;
+}
+@-webkit-keyframes zoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+% {
+    opacity: 1;
+  }
+}
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+% {
+    opacity: 1;
+  }
+}
+.zoomIn {
+  -webkit-animation-name: zoomIn;
+  animation-name: zoomIn;
+}
+@-webkit-keyframes zoomInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+@keyframes zoomInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+.zoomInDown {
+  -webkit-animation-name: zoomInDown;
+  animation-name: zoomInDown;
+}
+@-webkit-keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+@keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+.zoomInLeft {
+  -webkit-animation-name: zoomInLeft;
+  animation-name: zoomInLeft;
+}
+@-webkit-keyframes zoomInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+@keyframes zoomInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+.zoomInRight {
+  -webkit-animation-name: zoomInRight;
+  animation-name: zoomInRight;
+}
+@-webkit-keyframes zoomInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+@keyframes zoomInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+.zoomInUp {
+  -webkit-animation-name: zoomInUp;
+  animation-name: zoomInUp;
+}
+@-webkit-keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 0;
+  }
+}
+.zoomOut {
+  -webkit-animation-name: zoomOut;
+  animation-name: zoomOut;
+}
+@-webkit-keyframes zoomOutDown {
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+@keyframes zoomOutDown {
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+.zoomOutDown {
+  -webkit-animation-name: zoomOutDown;
+  animation-name: zoomOutDown;
+}
+@-webkit-keyframes zoomOutLeft {
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+    transform: scale(0.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+@keyframes zoomOutLeft {
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+    transform: scale(0.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+.zoomOutLeft {
+  -webkit-animation-name: zoomOutLeft;
+  animation-name: zoomOutLeft;
+}
+@-webkit-keyframes zoomOutRight {
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+    transform: scale(0.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+@keyframes zoomOutRight {
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+    transform: scale(0.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+.zoomOutRight {
+  -webkit-animation-name: zoomOutRight;
+  animation-name: zoomOutRight;
+}
+@-webkit-keyframes zoomOutUp {
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+@keyframes zoomOutUp {
+% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+.zoomOutUp {
+  -webkit-animation-name: zoomOutUp;
+  animation-name: zoomOutUp;
+}
+@-webkit-keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+@-webkit-keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+@-webkit-keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+@-webkit-keyframes slideInUp {
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slideInUp {
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+.slideInUp {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+}
+@-webkit-keyframes slideOutDown {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+@keyframes slideOutDown {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+.slideOutDown {
+  -webkit-animation-name: slideOutDown;
+  animation-name: slideOutDown;
+}
+@-webkit-keyframes slideOutLeft {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+@keyframes slideOutLeft {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+  animation-name: slideOutLeft;
+}
+@-webkit-keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+@-webkit-keyframes slideOutUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+@keyframes slideOutUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+}
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+.animated.delay-1s {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+.animated.delay-2s {
+  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
+}
+.animated.delay-3s {
+  -webkit-animation-delay: 3s;
+  animation-delay: 3s;
+}
+.animated.delay-4s {
+  -webkit-animation-delay: 4s;
+  animation-delay: 4s;
+}
+.animated.delay-5s {
+  -webkit-animation-delay: 5s;
+  animation-delay: 5s;
+}
+.animated.fast {
+  -webkit-animation-duration: 800ms;
+  animation-duration: 800ms;
+}
+.animated.faster {
+  -webkit-animation-duration: 500ms;
+  animation-duration: 500ms;
+}
+.animated.slow {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+.animated.slower {
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+}
+@media (prefers-reduced-motion) {
+  .animated {
+    -webkit-animation: unset !important;
+    animation: unset !important;
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
 }
 </style>
 </html>

Difference between revisions of "Template:UCL/Style"

Latest revision as of 10:08, 9 December 2018