Difference between revisions of "Team:KU Leuven/Prizes"

 
(46 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
 
{{KU_Leuven}}
 
{{KU_Leuven}}
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
 +
       
 +
        h4 {
 +
            margin-bottom: 10px;
 +
        }
 +
        .background{
 +
            background:url(https://static.igem.org/mediawiki/2017/c/cb/KU_Leuven_Homepage2.png);
 +
            position: initial;
 +
            background-size: 100%;
 +
            padding: 0 10px 0 10px;
 +
        }
  
−
    * {
+
        #grad {
−
      -webkit-backface-visibility: hidden;
+
    background: -webkit-linear-gradient(#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2); /* Safari 5.1-6.0 */
 +
    background: -o-linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Opera 11.1-12.0 */
 +
    background: -moz-linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Firefox 3.6-15 */
 +
    background: linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Standard syntax */
 
     }
 
     }
  
−
    html {
+
        p.head::first-letter {
−
      font-size: 1vw;
+
            color: #cc3333;
−
      height: 100vh;
+
            font-size: 40px;
−
      overflow: hidden;
+
        }
−
    }
+
       
 +
        p {
 +
          text-align:justify;
 +
          font-size: 20px;
 +
        }
 +
        </style>
 +
       
 +
            <div id="grad">
 +
                   
 +
                        <br>
 +
                   
 +
                        <div class="background">
 +
                            <h1 style="text-align:center; padding: 30px; font-size:50px; color: white;">Prizes</h1>
 +
                                <p class="head" style="text-align:center;color: white; padding: 10px 10px 60px 10px; font-size:15px;">The KU Leuven iGEM team 2017 is delighted to announce that they have won their track for Best New Application and a bronze medal for their project at the iGEM 2017 Jamboree which was held on the 13th November 2017. </p>
 +
                       
 +
                        </div>
 +
                    <br>
 +
                    <div class="container">
 +
                    <p class="head" style="text-align: justify"; >November 13, 2017 is marked as an unforgettable day for the KU Leuven iGEM Team 2017, because exactly one year ago on that date, 4 Bio-engineering students went around Leuven advertising iGEM in the hopes of assembling a team for the 2017 iGEM competition. Little did they know they would gather 8 other amazing students to dedicate themselves to the project, ultimately creating the unforgettable HEKcite Team.
 +
                    <br>
 +
                    <img src="https://static.igem.org/mediawiki/2017/1/15/KU_Leuven_Groups1.jpeg" width="450" height="300" style="margin: 35px; float: left">
 +
                    <br>
 +
                    <br>
  
−
    @media screen and (min-aspect-ratio: 8 / 5) {
+
                    Then, one year later at the iGEM 2017 Jamboree results presentation, with sweaty handpalms and their heart beating in their throat, they sat on a row next to each other and waited anxiously for their results. Did their project shine enough between the strong and talented competitors? Is there a possibility that they will take something home tonight?
−
      html {
+
                    <br>
−
        font-size: 1.5vh;
+
                    <br>
−
      }
+
−
    }
+
  
−
    body, .wrap {
+
                    They were hoping for a nomination in their track, because that's what they wanted... And finally, the nominees were revealed!
−
      height: 100vh;
+
                    <br>
−
    }
+
                    <br>
  
−
    .back {
+
                    Team members sat on the edge of their seat, white knuckles and heart throbbing in their chest. Could this be...?
−
      height: 100%;
+
                    <br>
−
    }
+
                    <br>
  
−
    .back__slide {
+
                    KU Leuven was nominated for their own track, "Best New Application"!!!
−
      position: absolute;
+
                    <br>
−
      top: 0;
+
                    <br>
−
      left: 0;
+
−
      width: 100%;
+
−
      height: 100%;
+
−
      opacity: 0;
+
−
      background: #1c1c1c;
+
−
      -webkit-transition: opacity 300ms 800ms linear;
+
−
      transition: opacity 300ms 800ms linear;
+
−
    }
+
  
−
    .back__slide .progress {
+
                    The seconds before the screen to change the names into the winners were nerve-wrecking. Every team member was holding their breath!
−
      position: absolute;
+
                    <br>
−
      top: 0;
+
                    <br>
−
      left: 0;
+
                    <br>
−
      width: 100%;
+
                    <br>
−
      height: 0.25rem;
+
−
      opacity: 0.5;
+
−
      background: -webkit-gradient(linear, left top, right top, from(#7b29ff), to(#304ffe));
+
−
      background: linear-gradient(90deg, #7b29ff, #304ffe);
+
−
      -webkit-transform-origin: 0% 50%;
+
−
              transform-origin: 0% 50%;
+
−
      -webkit-transform: scaleX(0);
+
−
              transform: scaleX(0);
+
−
    }
+
  
−
    .back__slide:before {
 
−
      content: '';
 
−
      position: absolute;
 
−
      top: 0;
 
−
      left: 0;
 
−
      width: 100%;
 
−
      height: 100%;
 
−
      background-position: center;
 
−
      background-size: cover;
 
−
    }
 
  
−
    .back__slide.active {
+
                    "And... These are the winners..." Was the last thing all the team members heard, because at that very moment, their name KU Leuven appeared on the screen from behind all the nominees, stating the fact that not only was KU Leuven nominated, but they have <b>won "Best New Application Project"!!!</b>
−
      opacity: 1;
+
−
    }
+
  
−
    .back__slide:nth-child(even) {
+
                    <br>
−
      background: #ffffff;
+
                    <br>
−
    }
+
  
−
    .back__slide:nth-child(even) .progress {
+
                    Tears of joy were cried and hugs were shared. It was surreal how their dream has come true and how their hardwork over the summer deserved an award from the jury!!!
−
      background: #000000;
+
−
      -webkit-transform-origin: 100% 50%;
+
−
              transform-origin: 100% 50%;
+
−
      opacity: 0.5;
+
−
    }
+
  
−
    .back__slide:nth-child(1):before {
+
                    <br>
−
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/jelly-back-back.png");
+
                    <br>
−
      opacity: 0.1;
+
−
    }
+
  
−
    .back__slide:nth-child(2):before {
+
                    It was hard to believe and as the team members comforted each other, their awesome team captain, Victor Top, and fellow lovely teammate, Evelien Van Hoeymissen went up the stage to get the team's award and a bronze medal.  
−
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/mountain-back-crop2.png");
+
                    <br>
−
      opacity: 0.2;
+
                    <br>
−
      background-repeat: no-repeat;
+
−
      background-size: 101% auto;
+
−
      background-position: right calc(50% - 14rem);
+
−
    }
+
  
−
    .back__slide:nth-child(2) .back-front-image {
+
                   
−
      position: absolute;
+
                    <img src="https://static.igem.org/mediawiki/2017/9/93/KU_Leuven_Foto1.jpeg" width="450" height="300" style="margin: 25px">
−
      top: 0;
+
                    <img src="https://static.igem.org/mediawiki/2017/a/a2/Ku_Leuven_foto3.jpeg" width="450" height="300" style="margin: 25px">
−
      left: 0;
+
                    <img src="https://static.igem.org/mediawiki/2017/c/c4/Ku_Leuven_foto5.jpeg" width="450" height="300" style="margin: 25px">
−
      width: 100%;
+
                    <img src="https://static.igem.org/mediawiki/2017/5/50/Award_KULeuven.jpeg" width="250" height="300" style="margin: 24px 0px 31px 237px">
−
      height: 100%;
+
−
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/mountain-front-crop.png");
+
−
      background-size: 101% auto;
+
−
      background-position: center calc(50% + 21rem);
+
−
      background-repeat: no-repeat;
+
−
      z-index: 0;
+
−
      opacity: 0;
+
−
      -webkit-transform: translate3d(0, 10rem, 0);
+
−
              transform: translate3d(0, 10rem, 0);
+
−
      -webkit-transition: opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
+
−
      transition: opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
+
−
      transition: transform 600ms 300ms linear, opacity 300ms 500ms linear;
+
−
      transition: transform 600ms 300ms linear, opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
+
−
    }
+
  
−
    .back__slide:nth-child(2) .back-front-image:after {
+
                    <br>
−
      content: '';
+
                    <br>
−
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(80%, #ffffff));
+
                    All by all, it was a great adventure for the KU Leuven iGEM Team from 2017. A massive thank you for everyone who has helped out the team. Also, special thanks to every team member who dedicated their time, effort and enthusiasm to this project.  
−
      background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 80%);
+
−
      display: block;
+
−
      position: absolute;
+
−
      left: 0;
+
−
      top: calc(50% + 20rem);
+
−
      height: 20.5rem;
+
−
      width: 100%;
+
−
    }
+
  
−
    .back__slide:nth-child(2).active .back-front-image {
+
                   
−
      opacity: 0.2;
+
−
      -webkit-transform: translate3d(0, 0, 0);
+
−
              transform: translate3d(0, 0, 0);
+
−
      -webkit-transition: opacity 300ms 1300ms linear, -webkit-transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+
−
      transition: opacity 300ms 1300ms linear, -webkit-transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+
−
      transition: transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1300ms linear;
+
−
      transition: transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1300ms linear, -webkit-transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+
−
    }
+
  
−
    .card {
 
−
      background: rgba(0, 0, 0, 0.2);
 
−
      position: absolute;
 
−
      top: 50%;
 
−
      left: 50%;
 
−
      -webkit-transform: translate3d(-50%, -50%, 0);
 
−
              transform: translate3d(-50%, -50%, 0);
 
−
      width: 90rem;
 
−
      height: 50rem;
 
−
      background: #000000;
 
−
    }
 
  
−
    .card__slide {
 
−
      position: absolute;
 
−
      top: 0;
 
−
      left: 0;
 
−
      width: 100%;
 
−
      height: 100%;
 
−
      -webkit-box-shadow: 0 0rem 2rem transparent;
 
−
              box-shadow: 0 0rem 2rem transparent;
 
−
      -webkit-transition: -webkit-box-shadow 400ms 400ms linear;
 
−
      transition: -webkit-box-shadow 400ms 400ms linear;
 
−
      transition: box-shadow 400ms 400ms linear;
 
−
      transition: box-shadow 400ms 400ms linear, -webkit-box-shadow 400ms 400ms linear;
 
−
    }
 
  
−
    .card__slide .number {
 
−
      opacity: 0;
 
−
      -webkit-transform: translatex(-5rem);
 
−
              transform: translatex(-5rem);
 
−
      -webkit-transition: opacity 300ms 400ms linear, -webkit-transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 300ms 400ms linear, -webkit-transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 400ms linear;
 
−
      transition: transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 400ms linear, -webkit-transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
  
−
    .card__slide .date {
 
−
      opacity: 0;
 
−
      -webkit-transform: translatex(-5rem) rotate(-90deg);
 
−
              transform: translatex(-5rem) rotate(-90deg);
 
−
      -webkit-transition: opacity 300ms 400ms linear, -webkit-transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 300ms 400ms linear, -webkit-transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 400ms linear;
 
−
      transition: transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 400ms linear, -webkit-transform 600ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
  
−
    .card__slide.active {
 
−
      -webkit-box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.4);
 
−
              box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.4);
 
−
    }
 
  
−
    .card__slide.active .number {
 
−
      opacity: 1;
 
−
      -webkit-transform: translatex(0rem);
 
−
              transform: translatex(0rem);
 
−
      -webkit-transition: opacity 300ms 900ms linear, -webkit-transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 300ms 900ms linear, -webkit-transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 900ms linear;
 
−
      transition: transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 900ms linear, -webkit-transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
  
−
    .card__slide.active .date {
+
                    </p>
−
      opacity: 1;
+
−
      -webkit-transform: translatex(0rem) rotate(-90deg);
+
−
              transform: translatex(0rem) rotate(-90deg);
+
−
      -webkit-transition: opacity 300ms 900ms linear, -webkit-transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
+
−
      transition: opacity 300ms 900ms linear, -webkit-transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
+
−
      transition: transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 900ms linear;
+
−
      transition: transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 900ms linear, -webkit-transform 600ms 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
+
−
    }
+
  
−
    .card__slide.exit .number {
 
−
      -webkit-transform: translatex(0rem);
 
−
              transform: translatex(0rem);
 
−
      -webkit-transition: opacity 200ms 1000ms linear, -webkit-transform 600ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 200ms 1000ms linear, -webkit-transform 600ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 600ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 200ms 1000ms linear;
 
−
      transition: transform 600ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 200ms 1000ms linear, -webkit-transform 600ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
  
−
    .card__slide.exit .date {
 
−
      -webkit-transform: translatex(5rem) rotate(-90deg);
 
−
              transform: translatex(5rem) rotate(-90deg);
 
−
    }
 
  
−
    .card__slide:nth-child(even) {
 
−
      -webkit-box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
 
−
              box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
 
−
    }
 
  
−
    .card__slide:nth-child(even) .date, .card__slide:nth-child(even) .number {
 
−
      color: #000000;
 
−
    }
 
  
−
    .card__slide:nth-child(even) .date {
 
−
      left: 5.5%;
 
−
    }
 
  
−
    .card__slide:nth-child(even) .number {
 
−
      left: 94.5%;
 
−
    }
 
−
 
−
    .card__slide:nth-child(even) .date:before {
 
−
      border-bottom: 0.15rem solid #000000;
 
−
    }
 
−
 
−
    .card__slide:nth-child(even) .number:before {
 
−
      border-left: 0.15rem solid #000000;
 
−
    }
 
−
 
−
    .card__slide:nth-child(even):after {
 
−
      content: '';
 
−
      position: absolute;
 
−
      top: 0;
 
−
      left: 0;
 
−
      width: 100%;
 
−
      height: 100%;
 
−
      background-color: #ffffff;
 
−
      -webkit-transform: scaleX(0);
 
−
              transform: scaleX(0);
 
−
      -webkit-transform-origin: 100% 50%;
 
−
              transform-origin: 100% 50%;
 
−
      -webkit-transition: -webkit-transform 500ms 600ms ease-in-out;
 
−
      transition: -webkit-transform 500ms 600ms ease-in-out;
 
−
      transition: transform 500ms 600ms ease-in-out;
 
−
      transition: transform 500ms 600ms ease-in-out, -webkit-transform 500ms 600ms ease-in-out;
 
−
    }
 
−
 
−
    .card__slide:nth-child(even).active {
 
−
      -webkit-box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
 
−
              box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
 
−
    }
 
−
 
−
    .card__slide:nth-child(even).active .number {
 
−
      opacity: 1;
 
−
      -webkit-transition: opacity 200ms 400ms linear;
 
−
      transition: opacity 200ms 400ms linear;
 
−
    }
 
−
 
−
    .card__slide:nth-child(even).active .date {
 
−
      -webkit-transition: opacity 300ms 1200ms linear, -webkit-transform 600ms 1200ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 300ms 1200ms linear, -webkit-transform 600ms 1200ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 600ms 1200ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1200ms linear;
 
−
      transition: transform 600ms 1200ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1200ms linear, -webkit-transform 600ms 1200ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
−
 
−
    .card__slide:nth-child(even).active:after {
 
−
      -webkit-transform: scaleX(1);
 
−
              transform: scaleX(1);
 
−
      -webkit-transform-origin: 0% 50%;
 
−
              transform-origin: 0% 50%;
 
−
    }
 
−
 
−
    .card__slide:nth-child(even).exit .date {
 
−
      -webkit-transform: translatex(0rem) rotate(-90deg);
 
−
              transform: translatex(0rem) rotate(-90deg);
 
−
    }
 
−
 
−
    .card__slide:nth-child(even).exit .number {
 
−
      -webkit-transform: translatex(4rem);
 
−
              transform: translatex(4rem);
 
−
      -webkit-transition: opacity 300ms 700ms linear, -webkit-transform 600ms 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 300ms 700ms linear, -webkit-transform 600ms 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 600ms 700ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 700ms linear;
 
−
      transition: transform 600ms 700ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 700ms linear, -webkit-transform 600ms 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
−
 
−
    .card__slide:nth-child(1) .image {
 
−
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/jelly.png");
 
−
      background-size: 150% auto;
 
−
      background-position: center;
 
−
      background-repeat: no-repeat;
 
−
      width: 40%;
 
−
      height: 150%;
 
−
      position: absolute;
 
−
      top: 50%;
 
−
      left: 25%;
 
−
      -webkit-transform: translate3d(-55%, -40%, 0);
 
−
              transform: translate3d(-55%, -40%, 0);
 
−
      z-index: 2;
 
−
      opacity: 0;
 
−
    }
 
−
 
−
    .card__slide:nth-child(1).active .image {
 
−
      opacity: 1;
 
−
      -webkit-transform: translate3d(-50%, -50%, 0);
 
−
              transform: translate3d(-50%, -50%, 0);
 
−
      -webkit-transition: opacity 300ms 1000ms linear, -webkit-transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 300ms 1000ms linear, -webkit-transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1000ms linear;
 
−
      transition: transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1000ms linear, -webkit-transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
−
 
−
    .card__slide:nth-child(1).exit .image {
 
−
      -webkit-transform: translate3d(-45%, -60%, 0);
 
−
              transform: translate3d(-45%, -60%, 0);
 
−
      -webkit-transition: opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
 
−
      transition: opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
 
−
      transition: transform 600ms 300ms linear, opacity 300ms 500ms linear;
 
−
      transition: transform 600ms 300ms linear, opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
 
−
    }
 
−
 
−
    .card__slide:nth-child(1):after {
 
−
      content: '';
 
−
      position: absolute;
 
−
      top: 0;
 
−
      left: 0;
 
−
      width: 100%;
 
−
      height: 100%;
 
−
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/jelly-back.png");
 
−
      background-size: 135% auto;
 
−
      background-position: center;
 
−
      opacity: 0.15;
 
−
      -webkit-filter: contrast(150%);
 
−
              filter: contrast(150%);
 
−
    }
 
−
 
−
    .card__slide:nth-child(2) {
 
−
      overflow: hidden;
 
−
    }
 
−
 
−
    .card__slide:nth-child(2) .image {
 
−
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/mountain-front-crop.png");
 
−
      background-size: 100% auto;
 
−
      background-position: 50% top;
 
−
      background-repeat: no-repeat;
 
−
      width: 100vw;
 
−
      height: 100%;
 
−
      position: absolute;
 
−
      top: 55%;
 
−
      left: -5vw;
 
−
      -webkit-transform: translate3d(0, 20%, 0);
 
−
              transform: translate3d(0, 20%, 0);
 
−
      z-index: 2;
 
−
      opacity: 0;
 
−
      pointer-events: none;
 
−
      z-index: 1;
 
−
      -webkit-transition: opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
 
−
      transition: opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
 
−
      transition: transform 600ms 300ms linear, opacity 300ms 500ms linear;
 
−
      transition: transform 600ms 300ms linear, opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
 
−
    }
 
−
 
−
    .card__slide:nth-child(2) .back-image {
 
−
      position: absolute;
 
−
      top: 0;
 
−
      left: 0;
 
−
      width: 100%;
 
−
      height: 100%;
 
−
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/908370/mountain-back-crop2.png");
 
−
      background-size: 101% auto;
 
−
      background-position: center 85%;
 
−
      background-repeat: no-repeat;
 
−
      z-index: 1;
 
−
      opacity: 0;
 
−
      -webkit-transform: translatey(0);
 
−
              transform: translatey(0);
 
−
      -webkit-transition: opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
 
−
      transition: opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
 
−
      transition: transform 600ms 300ms linear, opacity 300ms 500ms linear;
 
−
      transition: transform 600ms 300ms linear, opacity 300ms 500ms linear, -webkit-transform 600ms 300ms linear;
 
−
    }
 
−
 
−
    .card__slide:nth-child(2) .back-image:after {
 
−
      content: '';
 
−
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));
 
−
      background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 100%);
 
−
      position: absolute;
 
−
      top: 0;
 
−
      left: 0;
 
−
      width: 100%;
 
−
      height: 100%;
 
−
      height: 50%;
 
−
      top: 50%;
 
−
    }
 
−
 
−
    .card__slide:nth-child(2).active .image {
 
−
      opacity: 1;
 
−
      -webkit-transform: translate3d(0, 0, 0);
 
−
              transform: translate3d(0, 0, 0);
 
−
      -webkit-transition: opacity 300ms 1300ms linear, -webkit-transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 300ms 1300ms linear, -webkit-transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1300ms linear;
 
−
      transition: transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1300ms linear, -webkit-transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
−
 
−
    .card__slide:nth-child(2).active .back-image {
 
−
      opacity: 1;
 
−
      -webkit-transform: translatey(-2rem);
 
−
              transform: translatey(-2rem);
 
−
      -webkit-transition: opacity 300ms 1000ms linear, -webkit-transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 300ms 1000ms linear, -webkit-transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1000ms linear;
 
−
      transition: transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1000ms linear, -webkit-transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
−
 
−
    .card__slide:nth-child(2).exit .back-image {
 
−
      -webkit-transform: translatey(-4rem);
 
−
              transform: translatey(-4rem);
 
−
    }
 
−
 
−
    .number {
 
−
      color: #ffffff;
 
−
      z-index: 1;
 
−
      font-family: 'Roboto Mono', monospace;
 
−
      font-weight: 500;
 
−
      letter-spacing: 0.02em;
 
−
      position: absolute;
 
−
      left: 5%;
 
−
      top: calc(50% + 6rem);
 
−
    }
 
−
 
−
    .number:before {
 
−
      content: '';
 
−
      position: absolute;
 
−
      left: 50%;
 
−
      -webkit-transform: translatex(-50%);
 
−
              transform: translatex(-50%);
 
−
      bottom: 2.5rem;
 
−
      display: block;
 
−
      height: 4rem;
 
−
      border-left: 0.15rem solid #ffffff;
 
−
    }
 
−
 
−
    .date {
 
−
      color: #ffffff;
 
−
      z-index: 1;
 
−
      font-family: 'Roboto Mono', monospace;
 
−
      font-weight: 500;
 
−
      letter-spacing: 0.15em;
 
−
      position: absolute;
 
−
      left: 95%;
 
−
      width: 30%;
 
−
      top: calc(83% - 0.5rem);
 
−
      -webkit-transform-origin: 0 50%;
 
−
              transform-origin: 0 50%;
 
−
      -webkit-transform: rotate(-90deg);
 
−
              transform: rotate(-90deg);
 
−
    }
 
−
 
−
    .date__time {
 
−
      opacity: 0.25;
 
−
    }
 
−
 
−
    .date:before {
 
−
      content: '';
 
−
      display: inline-block;
 
−
      -webkit-transform: translatey(-0.35rem);
 
−
              transform: translatey(-0.35rem);
 
−
      width: 4rem;
 
−
      margin-right: 1.5rem;
 
−
      border-bottom: 0.15rem solid #ffffff;
 
−
    }
 
−
 
−
    .content {
 
−
      position: absolute;
 
−
      left: 40%;
 
−
      top: 50%;
 
−
      -webkit-transform: translatey(-50%);
 
−
              transform: translatey(-50%);
 
−
      width: 44%;
 
−
      height: 68%;
 
−
      z-index: 2;
 
−
    }
 
−
 
−
    .content__ping {
 
−
      position: absolute;
 
−
      bottom: 0;
 
−
      width: 4rem;
 
−
      -webkit-transition: -webkit-transform 500ms ease-out;
 
−
      transition: -webkit-transform 500ms ease-out;
 
−
      transition: transform 500ms ease-out;
 
−
      transition: transform 500ms ease-out, -webkit-transform 500ms ease-out;
 
−
    }
 
−
 
−
    .content__ping:after {
 
−
      content: '';
 
−
      display: block;
 
−
      height: 0.15rem;
 
−
      background: #ffffff;
 
−
      width: 100%;
 
−
      -webkit-transition: background 200ms 700ms linear;
 
−
      transition: background 200ms 700ms linear;
 
−
      -webkit-animation: widenFromLeft 1200ms ease-out;
 
−
              animation: widenFromLeft 1200ms ease-out;
 
−
    }
 
−
 
−
    @-webkit-keyframes widenFromLeft {
 
−
      0% {
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
        -webkit-transform-origin: 0 50%;
 
−
                transform-origin: 0 50%;
 
−
      }
 
−
      20% {
 
−
        -webkit-transform: scaleX(4);
 
−
                transform: scaleX(4);
 
−
        -webkit-transform-origin: 0 50%;
 
−
                transform-origin: 0 50%;
 
−
      }
 
−
      100% {
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
        -webkit-transform-origin: 0 50%;
 
−
                transform-origin: 0 50%;
 
−
      }
 
−
    }
 
−
 
−
    @keyframes widenFromLeft {
 
−
      0% {
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
        -webkit-transform-origin: 0 50%;
 
−
                transform-origin: 0 50%;
 
−
      }
 
−
      20% {
 
−
        -webkit-transform: scaleX(4);
 
−
                transform: scaleX(4);
 
−
        -webkit-transform-origin: 0 50%;
 
−
                transform-origin: 0 50%;
 
−
      }
 
−
      100% {
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
        -webkit-transform-origin: 0 50%;
 
−
                transform-origin: 0 50%;
 
−
      }
 
−
    }
 
−
 
−
    @-webkit-keyframes widenFromRight {
 
−
      0% {
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
        -webkit-transform-origin: 100% 50%;
 
−
                transform-origin: 100% 50%;
 
−
      }
 
−
      20% {
 
−
        -webkit-transform: scaleX(4);
 
−
                transform: scaleX(4);
 
−
        -webkit-transform-origin: 100% 50%;
 
−
                transform-origin: 100% 50%;
 
−
      }
 
−
      100% {
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
        -webkit-transform-origin: 100% 50%;
 
−
                transform-origin: 100% 50%;
 
−
      }
 
−
    }
 
−
 
−
    @keyframes widenFromRight {
 
−
      0% {
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
        -webkit-transform-origin: 100% 50%;
 
−
                transform-origin: 100% 50%;
 
−
      }
 
−
      20% {
 
−
        -webkit-transform: scaleX(4);
 
−
                transform: scaleX(4);
 
−
        -webkit-transform-origin: 100% 50%;
 
−
                transform-origin: 100% 50%;
 
−
      }
 
−
      100% {
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
        -webkit-transform-origin: 100% 50%;
 
−
                transform-origin: 100% 50%;
 
−
      }
 
−
    }
 
−
 
−
    .content__ping--right {
 
−
      -webkit-transform: translateX(35.5rem);
 
−
              transform: translateX(35.5rem);
 
−
    }
 
−
 
−
    .content__ping--right:after {
 
−
      background: #000000;
 
−
      -webkit-animation: widenFromRight 1200ms ease-out;
 
−
              animation: widenFromRight 1200ms ease-out;
 
−
    }
 
−
 
−
    .content__ping--noanimation:after {
 
−
      -webkit-animation: none !important;
 
−
              animation: none !important;
 
−
    }
 
−
 
−
    .content__slide {
 
−
      position: absolute;
 
−
      top: 0;
 
−
      left: 0;
 
−
      width: 100%;
 
−
      height: 100%;
 
−
      pointer-events: none;
 
−
    }
 
−
 
−
    .content__slide.active {
 
−
      pointer-events: auto;
 
−
    }
 
−
 
−
    .content__slide.active .title__line:before {
 
−
      -webkit-transform: scaleX(1);
 
−
              transform: scaleX(1);
 
−
      -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: -webkit-transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      -webkit-transition-delay: 1000ms;
 
−
              transition-delay: 1000ms;
 
−
    }
 
−
 
−
    .content__slide.active .title__line:nth-child(2):before {
 
−
      -webkit-transition-delay: 1200ms;
 
−
              transition-delay: 1200ms;
 
−
    }
 
−
 
−
    .content__slide.active .title__inner, .content__slide.active .desc, .content__slide.active .button-wrap {
 
−
      opacity: 1;
 
−
      -webkit-transform: translatey(0);
 
−
              transform: translatey(0);
 
−
    }
 
−
 
−
    .content__slide.active .title__inner {
 
−
      -webkit-transition-delay: 1600ms;
 
−
              transition-delay: 1600ms;
 
−
    }
 
−
 
−
    .content__slide.active .desc {
 
−
      -webkit-transition-delay: 1800ms;
 
−
              transition-delay: 1800ms;
 
−
    }
 
−
 
−
    .content__slide.active .button-wrap {
 
−
      -webkit-transition-delay: 2000ms;
 
−
              transition-delay: 2000ms;
 
−
    }
 
−
 
−
    .content__slide.exit .title__inner, .content__slide.exit .desc, .content__slide.exit .button-wrap {
 
−
      -webkit-transform: translatey(-2.5rem);
 
−
              transform: translatey(-2.5rem);
 
−
      -webkit-transition: opacity 300ms linear, -webkit-transform 400ms ease-out;
 
−
      transition: opacity 300ms linear, -webkit-transform 400ms ease-out;
 
−
      transition: transform 400ms ease-out, opacity 300ms linear;
 
−
      transition: transform 400ms ease-out, opacity 300ms linear, -webkit-transform 400ms ease-out;
 
−
    }
 
−
 
−
    .content__slide.exit .title__inner {
 
−
      -webkit-transition-delay: 150ms;
 
−
              transition-delay: 150ms;
 
−
    }
 
−
 
−
    .content__slide.exit .desc {
 
−
      -webkit-transition-delay: 300ms;
 
−
              transition-delay: 300ms;
 
−
    }
 
−
 
−
    .content__slide.exit .button-wrap {
 
−
      -webkit-transition-delay: 450ms;
 
−
              transition-delay: 450ms;
 
−
    }
 
−
 
−
    .content__slide:nth-child(even) {
 
−
      text-align: right;
 
−
    }
 
−
 
−
    .content__slide:nth-child(even) .title, .content__slide:nth-child(even) .desc {
 
−
      color: #000000;
 
−
    }
 
−
 
−
    .content__slide:nth-child(even) .button {
 
−
      background: transparent;
 
−
      color: #ffffff;
 
−
      border: 0.15rem solid #000000;
 
−
      -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
 
−
              box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
 
−
    }
 
−
 
−
    .content__slide:nth-child(even) .button:before, .content__slide:nth-child(even) .button:after {
 
−
      display: none;
 
−
    }
 
−
 
−
    .content__slide:nth-child(even) .button__hover {
 
−
      background: #000000;
 
−
      -webkit-animation: full-rest 10s forwards;
 
−
              animation: full-rest 10s forwards;
 
−
    }
 
−
 
−
    @-webkit-keyframes full-rest {
 
−
      0% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
      100% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
    }
 
−
 
−
    @keyframes full-rest {
 
−
      0% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
      100% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
    }
 
−
 
−
    .content__slide:nth-child(even) .button:hover .button__hover {
 
−
      -webkit-animation: empty-swipe 500ms forwards;
 
−
              animation: empty-swipe 500ms forwards;
 
−
    }
 
−
 
−
    @-webkit-keyframes empty-swipe {
 
−
      0% {
 
−
        -webkit-transform-origin: left center;
 
−
                transform-origin: left center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
      50% {
 
−
        -webkit-transform-origin: left center;
 
−
                transform-origin: left center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
      51% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
      100% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
    }
 
−
 
−
    @keyframes empty-swipe {
 
−
      0% {
 
−
        -webkit-transform-origin: left center;
 
−
                transform-origin: left center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
      50% {
 
−
        -webkit-transform-origin: left center;
 
−
                transform-origin: left center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
      51% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
      100% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
    }
 
−
 
−
    .content__slide:nth-child(even) .title__line:before {
 
−
      left: -4rem;
 
−
      background: #f9f9f9;
 
−
      -webkit-transform-origin: 0% 50%;
 
−
              transform-origin: 0% 50%;
 
−
    }
 
−
 
−
    .content__slide:nth-child(even).active .title__line:before {
 
−
      -webkit-transform-origin: 100% 50%;
 
−
              transform-origin: 100% 50%;
 
−
    }
 
−
 
−
    .title {
 
−
      color: #ffffff;
 
−
      font-size: 5.5rem;
 
−
      font-family: 'Playfair Display', serif;
 
−
      line-height: 1;
 
−
      letter-spacing: 0.03em;
 
−
      margin: 0 0 3.6rem;
 
−
    }
 
−
 
−
    .title__line {
 
−
      display: inline-block;
 
−
      position: relative;
 
−
    }
 
−
 
−
    .title__line:before {
 
−
      background: -webkit-gradient(linear, left top, right top, from(#7b29ff), to(#304ffe));
 
−
      background: linear-gradient(90deg, #7b29ff, #304ffe);
 
−
      -webkit-transform-origin: 100% 50%;
 
−
              transform-origin: 100% 50%;
 
−
      -webkit-transition: -webkit-transform 500ms ease-out;
 
−
      transition: -webkit-transform 500ms ease-out;
 
−
      transition: transform 500ms ease-out;
 
−
      transition: transform 500ms ease-out, -webkit-transform 500ms ease-out;
 
−
      -webkit-transform: scaleX(0);
 
−
              transform: scaleX(0);
 
−
      content: '';
 
−
      display: block;
 
−
      position: absolute;
 
−
      width: calc(100% + 6rem);
 
−
      top: 2rem;
 
−
      left: -2rem;
 
−
      height: 2rem;
 
−
      z-index: -1;
 
−
    }
 
−
 
−
    .title__line:nth-child(2):before {
 
−
      -webkit-transition-delay: 200ms;
 
−
              transition-delay: 200ms;
 
−
    }
 
−
 
−
    .title__inner {
 
−
      position: relative;
 
−
      display: inline-block;
 
−
    }
 
−
 
−
    .desc {
 
−
      font-size: 1.4rem;
 
−
      font-family: 'Libre Franklin', sans-serif;
 
−
      line-height: 1.84;
 
−
      margin: 0 0 3.6rem;
 
−
      color: #ffffff;
 
−
    }
 
−
 
−
    .button {
 
−
      background: rgba(0, 0, 0, 0.2);
 
−
      display: inline-block;
 
−
      font-size: 1rem;
 
−
      font-family: 'Montserrat', sans-serif;
 
−
      text-transform: uppercase;
 
−
      line-height: 1;
 
−
      font-weight: 600;
 
−
      letter-spacing: 0.1em;
 
−
      padding: 1.15rem 2rem;
 
−
      cursor: pointer;
 
−
      position: relative;
 
−
      z-index: 2;
 
−
      color: #ffffff;
 
−
      border-top: 0.15rem solid #304ffe;
 
−
      border-bottom: 0.15rem solid #7b29ff;
 
−
      -webkit-box-shadow: 0 1rem 2rem rgba(123, 41, 255, 0.2);
 
−
              box-shadow: 0 1rem 2rem rgba(123, 41, 255, 0.2);
 
−
      -webkit-transition: -webkit-transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: -webkit-transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
−
 
−
    .button:before, .button:after, .button__hover {
 
−
      content: '';
 
−
      position: absolute;
 
−
      top: -1%;
 
−
      height: 102%;
 
−
      width: 0.15rem;
 
−
      background: -webkit-gradient(linear, left top, left bottom, from(#304ffe), to(#7b29ff));
 
−
      background: linear-gradient(#304ffe, #7b29ff);
 
−
    }
 
−
 
−
    .button:before {
 
−
      left: 0;
 
−
    }
 
−
 
−
    .button:after {
 
−
      right: 0;
 
−
    }
 
−
 
−
    .button__hover {
 
−
      left: -1%;
 
−
      width: 102%;
 
−
      height: 102%;
 
−
      z-index: -1;
 
−
      -webkit-animation: rest 10s forwards;
 
−
              animation: rest 10s forwards;
 
−
    }
 
−
 
−
    @-webkit-keyframes rest {
 
−
      0% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
      100% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
    }
 
−
 
−
    @keyframes rest {
 
−
      0% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
      100% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
    }
 
−
 
−
    .button:hover {
 
−
      -webkit-transform: translatey(-0.5rem);
 
−
              transform: translatey(-0.5rem);
 
−
    }
 
−
 
−
    .button:hover .button__hover {
 
−
      -webkit-animation: swipe 500ms forwards;
 
−
              animation: swipe 500ms forwards;
 
−
    }
 
−
 
−
    @-webkit-keyframes swipe {
 
−
      0% {
 
−
        -webkit-transform-origin: left center;
 
−
                transform-origin: left center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
      50% {
 
−
        -webkit-transform-origin: left center;
 
−
                transform-origin: left center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
      51% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
      100% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
    }
 
−
 
−
    @keyframes swipe {
 
−
      0% {
 
−
        -webkit-transform-origin: left center;
 
−
                transform-origin: left center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
      50% {
 
−
        -webkit-transform-origin: left center;
 
−
                transform-origin: left center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
      51% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(1);
 
−
                transform: scaleX(1);
 
−
      }
 
−
      100% {
 
−
        -webkit-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
        -webkit-transform: scaleX(0);
 
−
                transform: scaleX(0);
 
−
      }
 
−
    }
 
−
 
−
    .title__inner, .desc, .button-wrap {
 
−
      opacity: 0;
 
−
      -webkit-transform: translatey(2.5rem);
 
−
              transform: translatey(2.5rem);
 
−
      position: relative;
 
−
      -webkit-transition: opacity 300ms linear, -webkit-transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: opacity 300ms linear, -webkit-transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
      transition: transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms linear;
 
−
      transition: transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms linear, -webkit-transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
−
    }
 
−
    </style>
 
  
−
<div class="wrap">
 
−
  <div class="back">
 
−
    <div class="back__slide active">
 
−
      <div class="progress"></div>
 
−
    </div>
 
−
    <div class="back__slide">
 
−
      <div class="progress"></div>
 
−
      <div class="back-front-image"></div>
 
−
    </div>
 
−
  </div>
 
−
  <div class="card">
 
−
    <div class="card__slide active">
 
−
      <div class="image"></div><span class="number">01</span><span class="date">13 NOVEMBER 2017 <span class="date__time">13:00PM</span></span>
 
−
    </div>
 
−
    <div class="card__slide">
 
−
      <div class="back-image"></div>
 
−
      <div class="image"></div><span class="number">02</span><span class="date">13 NOVEMBER 2017 <span class="date__time">13:00PM</span></span>
 
−
    </div>
 
−
    <div class="content">
 
−
      <div class="content__slide active">
 
−
        <h2 class="title"> <span class="title__line"> <span class="title__inner">Winner</span></span><span class="title__line"> <span class="title__inner" style="font-size:41px">Best New Application</span></span></h2>
 
−
        <p class="desc">Nunc orci metus, ornare non molestie ac, ultrices eget <br/> dolor. Mauris ac mattis lectus. Praesent facilisis <br/> malesuada sapien nec pharetra. Fusce eleifend, nisl.</p>
 
−
        <div class="button-wrap"><a class="button">Learn More<span class="button__hover"></span></a></div>
 
−
      </div>
 
−
      <div class="content__slide">
 
−
        <h2 class="title"> <span class="title__line"> <span class="title__inner">Breathtaking</span></span><span class="title__line"> <span class="title__inner">Heights</span></span></h2>
 
−
        <p class="desc">Nunc orci metus, ornare non molestie ac, ultrices eget  <br/> dolor. Mauris ac mattis lectus. Praesent facilisis  <br/> malesuada sapien nec pharetra. Fusce eleifend, nisl.</p>
 
−
        <div class="button-wrap"><a class="button">Learn More<span class="button__hover"></span></a></div>
 
−
      </div>
 
−
      <div class="content__ping content__ping--noanimation"></div>
 
−
    </div>
 
−
  </div>
 
−
</div>
 
−
<script>
 
  
  
−
var slideElements = ['.back__slide', '.card__slide', '.content__slide'];
 
−
var inProgress = false;
 
  
−
var goToSlide = function goToSlide(slideElements, index) {
 
−
  if (!inProgress) {
 
−
    inProgress = true;
 
  
−
    $('.active').addClass('exit');
 
−
    $('.active').removeClass('active');
 
−
    slideElements.forEach(function (elem) {
 
−
      $(elem + ':nth-child(' + index + ')').addClass('active');
 
−
    });
 
  
−
    var evenSlide = index % 2 === 0;
 
−
    if (evenSlide) $('.content__ping').addClass('content__ping--right');else $('.content__ping').removeClass('content__ping--right');
 
−
    $('.content__ping--noanimation').removeClass('content__ping--noanimation');
 
  
−
    setTimeout(function () {
 
−
      return $('.exit').removeClass('exit');
 
−
    }, 1000);
 
−
    setTimeout(function () {
 
−
      return inProgress = false;
 
−
    }, 2000);
 
−
  }
 
−
};
 
  
−
$('.content__slide:nth-child(1) .button').on('click', function () {
 
−
  return goToSlide(slideElements, 2);
 
−
});
 
−
$('.content__slide:nth-child(2) .button').on('click', function () {
 
−
  return goToSlide(slideElements, 1);
 
−
});
 
  
−
setTimeout(function () {
+
                   
−
  return goToSlide(slideElements, 2);
+
−
}, 2000);
+
−
setTimeout(function () {
+
−
  return goToSlide(slideElements, 1);
+
−
}, 6000);
+
  
−
</script>
+
       
 +
       
 
</html>
 
</html>
 
{{KU_Leuven_footer}}
 
{{KU_Leuven_footer}}

Latest revision as of 23:21, 15 December 2017


Prizes

The KU Leuven iGEM team 2017 is delighted to announce that they have won their track for Best New Application and a bronze medal for their project at the iGEM 2017 Jamboree which was held on the 13th November 2017.


November 13, 2017 is marked as an unforgettable day for the KU Leuven iGEM Team 2017, because exactly one year ago on that date, 4 Bio-engineering students went around Leuven advertising iGEM in the hopes of assembling a team for the 2017 iGEM competition. Little did they know they would gather 8 other amazing students to dedicate themselves to the project, ultimately creating the unforgettable HEKcite Team.


Then, one year later at the iGEM 2017 Jamboree results presentation, with sweaty handpalms and their heart beating in their throat, they sat on a row next to each other and waited anxiously for their results. Did their project shine enough between the strong and talented competitors? Is there a possibility that they will take something home tonight?

They were hoping for a nomination in their track, because that's what they wanted... And finally, the nominees were revealed!

Team members sat on the edge of their seat, white knuckles and heart throbbing in their chest. Could this be...?

KU Leuven was nominated for their own track, "Best New Application"!!!

The seconds before the screen to change the names into the winners were nerve-wrecking. Every team member was holding their breath!



"And... These are the winners..." Was the last thing all the team members heard, because at that very moment, their name KU Leuven appeared on the screen from behind all the nominees, stating the fact that not only was KU Leuven nominated, but they have won "Best New Application Project"!!!

Tears of joy were cried and hugs were shared. It was surreal how their dream has come true and how their hardwork over the summer deserved an award from the jury!!!

It was hard to believe and as the team members comforted each other, their awesome team captain, Victor Top, and fellow lovely teammate, Evelien Van Hoeymissen went up the stage to get the team's award and a bronze medal.



All by all, it was a great adventure for the KU Leuven iGEM Team from 2017. A massive thank you for everyone who has helped out the team. Also, special thanks to every team member who dedicated their time, effort and enthusiasm to this project.