-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (115 loc) · 38.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Crispr Revolutions by Bruno Fenzl</title>
<style type="text/css">
*{box-sizing:border-box}body{position:relative;perspective:0;perspective-origin:50% 50%;height:100vh;margin:0;padding:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:1.4;color:#4c4f58;background-color:#fbfbfb}a{color:#5DB75D}p{transition:all 300ms}p::before{transition:all 300ms}ul{padding-left:20px}li{margin-bottom:7px}small{font-size:80%}h1{font-size:70px;line-height:.6;margin:0;font-family:"Times New Roman", Times, serif;font-style:italic;font-weight:100;letter-spacing:-7px;text-shadow:0 0 30px rgba(255,255,255,0.8);display:inline-block;margin-bottom:7px}h1::after{content:"";display:block;width:100%;height:15px;background-color:rgba(93,183,93,0.68);z-index:1000;position:relative;left:.2em}.subline{margin-left:20px;display:inline-block}h2{margin-top:0;margin-bottom:1rem}.top{position:absolute;top:0;left:0;width:100%;height:68px;z-index:100;background-color:white;background-color:rgba(255,255,255,0.8);border-bottom:1px solid #eaeaea;display:none}input{display:none}input[type="radio"]+.nav-item{position:relative;z-index:110;display:none;line-height:1;font-weight:bold;padding:25px 15px;border-right:1px solid #eaeaea;cursor:pointer;transition:all 250ms;display:none}input[type="radio"]+.nav-item .nav-item-description{margin-left:10px;font-weight:normal;font-style:italic;color:#868686}input[type="radio"]+.nav-item:first-of-type{background-color:#4c4f58;color:white}input[type="radio"]+.nav-item:first-of-type:hover{background-color:#5DB75D}input[type="radio"]:checked+.nav-item{background-color:#5DB75D;color:white}input[type="radio"]:checked+.nav-item .nav-item-description{color:white}main{position:relative;display:block;min-height:100vh}article{position:relative;margin-top:50px;padding-bottom:60px}header,.content>section{padding:20px;width:100%}.jump-right,.jump-left{display:none}footer{position:absolute;bottom:0;width:100%;padding:10px;background-color:white;border-top:1px solid #f2f2f2;text-align:center}.scene{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;display:none}.c{position:absolute;width:0;height:0;top:20%;left:70%;transform:rotateZ(-25deg) rotateX(-15deg) rotateY(-15deg) translate3d(-50%, -50%, 600px);perspective:800px;perspective-origin:50% 50%;transform-style:preserve-3d}.w{width:0;height:0;transform-style:preserve-3d;transform-origin:50% 50%;animation:rotateGroups 60s infinite linear}.g{transform-style:preserve-3d;transform-origin:50% 50%;transition:all 1000ms ease-in-out}.g:nth-child(1){transform:rotateX(0deg) rotateY(181deg)}.g:nth-child(2){transform:rotateX(180deg) rotateY(10deg)}.g:nth-child(3){transform:rotateX(0deg) rotateY(141deg)}.g:nth-child(4){transform:rotateX(180deg) rotateY(219deg)}.g:nth-child(5){transform:rotateX(0deg) rotateY(258deg)}.g:nth-child(6){transform:rotateX(180deg) rotateY(43deg)}.g:nth-child(7){transform:rotateX(0deg) rotateY(56deg)}.g:nth-child(8){transform:rotateX(180deg) rotateY(229deg)}.g p{position:absolute;top:0;left:0;transform:translate3d(0, 0, 0);display:block;margin:0;padding:0;width:3vw;height:3vw;transform:skewX(-45deg);transform-origin:100% 0;overflow:hidden;transition:all 2000ms}.g p::before{content:"";position:absolute;top:0;left:0;display:block;width:3vw;height:3vw;transform:skewX(45deg);transform-origin:inherit;background:#e3e3e3;background:#dedede;background:-webkit-gradient(left top, left bottom, color-stop(0%, #dedede), color-stop(100%, #ededed));background:linear-gradient(to bottom, #dedede 0%, #ededed 100%);cursor:pointer;transition:all 300ms}.g p:nth-child(1){transform:translate3d(-498.42112px, -68px, 157.55772px) rotate3d(-.9, .1, -.3, 293deg)}.g p:nth-child(2){transform:translate3d(-217.76701px, 64px, -489.0506px) rotate3d(.7, .5, .5, 202deg)}.g p:nth-child(3){transform:translate3d(390.19019px, -94px, -329.05553px) rotate3d(.6, -.4, -.9, 11deg)}.g p:nth-child(4){transform:translate3d(396.52104px, -96px, 321.49706px) rotate3d(-.3, .4, .8, 158deg)}.g p:nth-child(5){transform:translate3d(-155.06828px, 28px, 557.19021px) rotate3d(-.1, -.8, .9, 142deg)}.g p:nth-child(6){transform:translate3d(-598.41387px, 84px, -19.8582px) rotate3d(.4, .4, -.9, 251deg)}.g p:nth-child(7){transform:translate3d(-133.94657px, -1px, -463.5685px) rotate3d(.1, -.7, .8, 15deg)}.g p:nth-child(8){transform:translate3d(581.09783px, 44px, -206.11386px) rotate3d(-.5, 1, .1, 5deg)}.g p:nth-child(9){transform:translate3d(422.20038px, -27px, 349.13292px) rotate3d(.1, .6, -.1, 320deg)}.g p:nth-child(10){transform:translate3d(-319.46671px, 12px, 480.39239px) rotate3d(1, -.3, -.3, 234deg)}.g p:nth-child(11){transform:translate3d(-561.30105px, 24px, -208.79816px) rotate3d(-.2, .4, .7, 89deg)}.g p:nth-child(12){transform:translate3d(57.35128px, 75px, -541.87178px) rotate3d(.7, -.5, .9, 301deg)}.g p:nth-child(13){transform:translate3d(634.16727px, 64px, -103.8989px) rotate3d(-.5, .8, .3, 219deg)}.g p:nth-child(14){transform:translate3d(259.95704px, -97px, 469.2507px) rotate3d(-.8, .6, -.2, 224deg)}.g p:nth-child(15){transform:translate3d(-489.58434px, -75px, 296.74947px) rotate3d(-.1, .5, .6, 130deg)}.g p:nth-child(16){transform:translate3d(-362.92214px, 77px, -378.82522px) rotate3d(-.3, .2, 1, 129deg)}.g p:nth-child(17){transform:translate3d(195.1947px, 84px, -487.06976px) rotate3d(-.4, 1, -.8, 353deg)}.g p:nth-child(18){transform:translate3d(627.43264px, -87px, 65.37438px) rotate3d(-.8, .3, 1, 105deg)}.g p:nth-child(19){transform:translate3d(53.90132px, 24px, 439.72346px) rotate3d(.2, .7, -.1, 267deg)}.g p:nth-child(20){transform:translate3d(-444.58535px, -8px, 209.37204px) rotate3d(-.7, .1, -.3, 309deg)}.g p:nth-child(21){transform:translate3d(-345.49967px, 22px, -365.08166px) rotate3d(-.8, -.2, .6, 288deg)}.g p:nth-child(22){transform:translate3d(393.91729px, -79px, -479.81814px) rotate3d(-.4, -.4, 1, 233deg)}.g p:nth-child(23){transform:translate3d(427.84876px, 44px, 257.57265px) rotate3d(-.1, .7, -.4, 341deg)}.g p:nth-child(24){transform:translate3d(-92.95226px, -54px, 434.11244px) rotate3d(-.5, .7, .9, 186deg)}.g p:nth-child(25){transform:translate3d(-489.52782px, 42px, 49.83277px) rotate3d(-.7, .1, .1, 151deg)}.g p:nth-child(26){transform:translate3d(-147.5983px, -1px, -592.78488px) rotate3d(.7, -.1, -.1, 119deg)}.g p:nth-child(27){transform:translate3d(515.61993px, 37px, -252.30032px) rotate3d(.4, -.7, .9, 206deg)}.g p:nth-child(28){transform:translate3d(442.60916px, 27px, 303.4466px) rotate3d(-.2, .9, .5, 272deg)}.g p:nth-child(29){transform:translate3d(-206.51467px, -65px, 526.289px) rotate3d(-.3, .4, -.5, 77deg)}.g p:nth-child(30){transform:translate3d(-441.96158px, -93px, -127.25812px) rotate3d(-.7, -.2, 0, 19deg)}.g p:nth-child(31){transform:translate3d(-18.29835px, -62px, -555.69332px) rotate3d(-.3, -.9, -.8, 298deg)}.g p:nth-child(32){transform:translate3d(522.60907px, 35px, -137.0228px) rotate3d(1, -.3, -.5, 272deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1){transform:translateY(-33.94113vw) rotateY(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3){transform:translateY(0) rotateY(0deg)}input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1){transform:translateY(-50.91169vw) rotateY(0deg)}input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3){transform:translateY(16.97056vw) rotateY(0deg)}input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1){transform:translateY(-50.91169vw) rotateY(0deg)}input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3){transform:translateY(16.97056vw) rotateY(0deg)}input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5){transform:translateY(-16.97056vw) rotateY(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p::before,input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p::before,input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p::before,input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p::before,input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p::before,input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p::before,input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p::before{background:#5DB75D;background:-webkit-gradient(left top, left bottom, color-stop(0%, #4f9e4f), color-stop(100%, #5db75d));background:linear-gradient(to bottom, #4f9e4f 0%, #5db75d 100%)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(1),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(1),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(1),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(1),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(1),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(1),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(1){transform:none;transform:translate3d(1.6554vw, 0vw, 8.32224vw) rotateY(11.25deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(2),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(2),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(2),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(2),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(2),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(2),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(2){transform:none;transform:translate3d(3.24718vw, 2.12132vw, 7.83938vw) rotateY(22.5deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(3),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(3),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(3),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(3),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(3),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(3),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(3){transform:none;transform:translate3d(4.71417vw, 4.24264vw, 7.05525vw) rotateY(33.75deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(4),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(4),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(4),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(4),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(4),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(4),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(4){transform:none;transform:translate3d(6vw, 6.36396vw, 6vw) rotateY(45deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(5),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(5),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(5),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(5),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(5),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(5),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(5){transform:none;transform:translate3d(7.05525vw, 8.48528vw, 4.71417vw) rotateY(56.25deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(6),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(6),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(6),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(6),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(6),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(6),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(6){transform:none;transform:translate3d(7.83938vw, 10.6066vw, 3.24718vw) rotateY(67.5deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(7),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(7),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(7),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(7),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(7),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(7),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(7){transform:none;transform:translate3d(8.32224vw, 12.72792vw, 1.6554vw) rotateY(78.75deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(8),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(8),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(8),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(8),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(8),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(8),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(8){transform:none;transform:translate3d(8.48528vw, 14.84924vw, 0vw) rotateY(90deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(9),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(9),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(9),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(9),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(9),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(9),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(9){transform:none;transform:translate3d(8.32224vw, 16.97056vw, -1.6554vw) rotateY(101.25deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(10),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(10),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(10),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(10),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(10),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(10),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(10){transform:none;transform:translate3d(7.83938vw, 19.09188vw, -3.24718vw) rotateY(112.5deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(11),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(11),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(11),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(11),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(11),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(11),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(11){transform:none;transform:translate3d(7.05525vw, 21.2132vw, -4.71417vw) rotateY(123.75deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(12),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(12),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(12),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(12),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(12),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(12),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(12){transform:none;transform:translate3d(6vw, 23.33452vw, -6vw) rotateY(135deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(13),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(13),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(13),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(13),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(13),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(13),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(13){transform:none;transform:translate3d(4.71417vw, 25.45584vw, -7.05525vw) rotateY(146.25deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(14),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(14),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(14),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(14),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(14),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(14),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(14){transform:none;transform:translate3d(3.24718vw, 27.57716vw, -7.83938vw) rotateY(157.5deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(15),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(15),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(15),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(15),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(15),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(15),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(15){transform:none;transform:translate3d(1.6554vw, 29.69848vw, -8.32224vw) rotateY(168.75deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(16),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(16),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(16),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(16),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(16),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(16),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(16){transform:none;transform:translate3d(0vw, 31.81981vw, -8.48528vw) rotateY(180deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(17),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(17),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(17),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(17),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(17),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(17),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(17){transform:none;transform:translate3d(-1.6554vw, 33.94113vw, -8.32224vw) rotateY(191.25deg) rotateZ(3deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(17),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(17),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(17),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(17),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(17),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(17),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(17){transform:none;transform:translate3d(-1.6554vw, 0vw, -8.32224vw) rotateY(191.25deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(18),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(18),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(18),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(18),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(18),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(18),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(18){transform:none;transform:translate3d(-3.24718vw, 2.12132vw, -7.83938vw) rotateY(202.5deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(19),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(19),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(19),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(19),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(19),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(19),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(19){transform:none;transform:translate3d(-4.71417vw, 4.24264vw, -7.05525vw) rotateY(213.75deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(20),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(20),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(20),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(20),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(20),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(20),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(20){transform:none;transform:translate3d(-6vw, 6.36396vw, -6vw) rotateY(225deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(21),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(21),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(21),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(21),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(21),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(21),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(21){transform:none;transform:translate3d(-7.05525vw, 8.48528vw, -4.71417vw) rotateY(236.25deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(22),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(22),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(22),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(22),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(22),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(22),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(22){transform:none;transform:translate3d(-7.83938vw, 10.6066vw, -3.24718vw) rotateY(247.5deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(23),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(23),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(23),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(23),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(23),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(23),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(23){transform:none;transform:translate3d(-8.32224vw, 12.72792vw, -1.6554vw) rotateY(258.75deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(24),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(24),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(24),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(24),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(24),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(24),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(24){transform:none;transform:translate3d(-8.48528vw, 14.84924vw, 0vw) rotateY(270deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(25),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(25),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(25),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(25),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(25),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(25),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(25){transform:none;transform:translate3d(-8.32224vw, 16.97056vw, 1.6554vw) rotateY(281.25deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(26),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(26),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(26),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(26),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(26),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(26),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(26){transform:none;transform:translate3d(-7.83938vw, 19.09188vw, 3.24718vw) rotateY(292.5deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(27),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(27),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(27),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(27),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(27),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(27),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(27){transform:none;transform:translate3d(-7.05525vw, 21.2132vw, 4.71417vw) rotateY(303.75deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(28),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(28),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(28),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(28),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(28),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(28),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(28){transform:none;transform:translate3d(-6vw, 23.33452vw, 6vw) rotateY(315deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(29),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(29),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(29),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(29),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(29),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(29),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(29){transform:none;transform:translate3d(-4.71417vw, 25.45584vw, 7.05525vw) rotateY(326.25deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(30),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(30),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(30),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(30),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(30),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(30),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(30){transform:none;transform:translate3d(-3.24718vw, 27.57716vw, 7.83938vw) rotateY(337.5deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(31),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(31),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(31),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(31),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(31),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(31),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(31){transform:none;transform:translate3d(-1.6554vw, 29.69848vw, 8.32224vw) rotateY(348.75deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-child(32),input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(3) p:nth-child(32),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(1) p:nth-child(32),input[type="radio"]:nth-of-type(3):checked ~ .scene .g:nth-child(3) p:nth-child(32),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(1) p:nth-child(32),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(3) p:nth-child(32),input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p:nth-child(32){transform:none;transform:translate3d(0vw, 31.81981vw, 8.48528vw) rotateY(360deg) rotateZ(0deg)}input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-last-child(1)::before,input[type="radio"]:nth-of-type(2):checked ~ .scene .g:nth-child(1) p:nth-last-child(17)::before{animation:glowTrigs 1000ms 3000ms infinite alternate ease-in-out}input[type="radio"]:nth-of-type(4):checked ~ .scene .g:nth-child(5) p::before{background:#6474b3;background:-webkit-gradient(left top, left bottom, color-stop(0%, #6474b3), color-stop(100%, #505a99));background:linear-gradient(to bottom, #6474b3 0%, #505a99 100%);animation:mergeTrigs 1000ms 3000ms 1 forwards ease-in-out}@keyframes rotateGroups{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}@keyframes glowTrigs{0%{background:#5DB75D}100%{background:#EF6063}}@keyframes mergeTrigs{0%{background:#6474b3}100%{background:#5DB75D}}@media (min-width: 992px){.top{display:block}h1{font-size:100px}article{margin-top:50px;margin-left:50px;width:50%;overflow:hidden}article>header{padding:15px}.content{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;transition:all 500ms ease-in-out}.content>section{padding:15px;-ms-flex:1 0 auto;flex:1 0 auto;transition:all 200ms}.jump-right,.jump-left{font-family:"Times New Roman", Times, serif;display:inline-block;margin-top:10px;float:right;font-size:20px;line-height:.5;font-style:italic;text-transform:uppercase;position:relative;cursor:pointer}.jump-right::after,.jump-left::after{content:"";display:block;width:100%;height:7px;background-color:rgba(93,183,93,0.68);z-index:1000;position:relative;left:.2em;transform-origin:50% 100%;transition:all 200ms}.jump-right:hover::after,.jump-left:hover::after{transform:scaleY(2)}.jump-left{float:left}input[type="radio"]+.nav-item{display:inline-block}input[type="radio"]+.nav-item .nav-item-description{display:inline-block}input[type="radio"]:nth-of-type(1):checked ~ article .content{transform:translate3d(0, 0, 0)}input[type="radio"]:nth-of-type(2):checked ~ article .content{transform:translate3d(-100%, 0, 0)}input[type="radio"]:nth-of-type(3):checked ~ article .content{transform:translate3d(-200%, 0, 0)}input[type="radio"]:nth-of-type(4):checked ~ article .content{transform:translate3d(-300%, 0, 0)}.scene{display:block}}@media (min-width: 1280px){article{margin-top:50px;margin-left:50px;width:40%;overflow:hidden}article>header{padding:15px}}
</style>
</head>
<body>
<main>
<div class="top"></div>
<input type="radio" id="step-intro" name="steps" value="" checked>
<label class="nav-item" for="step-intro" tabindex="1">Start</label><!--
--><input type="radio" id="step1" name="steps" value=""><!--
--><label class="nav-item" for="step1" tabindex="2">
Step 1.<span class="nav-item-description">Finding the right spot</span>
</label><!--
--><input type="radio" id="step2" name="steps" value=""><!--
--><label class="nav-item" for="step2" tabindex="3">
Step 2.<span class="nav-item-description">Cutting the genome</span>
</label><!--
--><input type="radio" id="step3" name="steps" value=""><!--
--><label class="nav-item" for="step3" tabindex="4">
Step 3.<span class="nav-item-description">Repairing the DNA</span>
</label>
<div class="scene">
<div class="c">
<div class="w">
<div class="g"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div class="g"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div class="g"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div class="g"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div class="g"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div class="g"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div class="g"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div class="g"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
</div>
</div>
</div>
<article>
<header>
<h1>
CRISPR/Cas9
</h1><br>
<!-- <em class="subline">Clustered regularly interspaced short palindromic repeats</em>
--> </header>
<div class="content">
<section>
<h2>Crispr revolutions</h2>
<hr>
<p>
(<strong><abbr title="Clustered regularly interspaced short palindromic repeats">CRISPR</abbr></strong>, pronounced crisper) is a revolutionary technic that enables researchers to edit parts of the DNA by removing, replacing or adding parts to the DNA sequence. It enables changes on living cells so for example one can test which part of the DNA is malfunctioning and repair it.
</p>
<p>
This system consists of two key molecules:
</p>
<ul>
<li>
An enzyme called Cas9. It acts as a pair of <em>"molecular scissors"</em> which can cut the two strands of DNA at a specific location in the genome so that bits of DNA can then be added or removed.
</li>
<li>
A piece of RNA called guide RNA. It consists of a small piece of pre-designed RNA sequence. This sequence is what <em>"guides"</em> Cas9 to the right part of the genome to make the cut.
</li>
</ul>
<hr>
<label class="jump-right" for="step1" tabindex="5">Next</label>
</section>
<section>
<h2>Finding the right spot</h2>
<hr>
<p>
The guide RNA is designed to match a unique sequence in the DNA. The Crispr/Cas9 complex is injected into the cell and finds it's way to the DNA. <br>
Cas9 will cut the DNA anywhere you want by selecting the sequence of the guide RNA. It is like String.replace() but way cooler!
</p>
<hr>
<label class="jump-left" for="step-intro" tabindex="6">Previous</label>
<label class="jump-right" for="step2" tabindex="7">Next</label>
</section>
<section>
<h2>Cutting the genome</h2>
<hr>
<p>
The guide RNA leads it's Cas9 protein to the target sequence in the DNA. Once there, the guide RNA will pair with a complementary DNA sequence allowing Cas9 to make a precise cut across both strands.
</p>
<hr>
<label class="jump-left" for="step1" tabindex="8">Previous</label>
<label class="jump-right" for="step3" tabindex="9">Next</label>
</section>
<section>
<h2>Repairing the DNA</h2>
<hr>
<p>
After cutting the DNA, the job isn't done yet!
</p>
<p>
Here the repair machinery of the cell kick's in and tries to fix the broken DNA strand.<br>
To do that, the cell will try to glue both sides with random bases. This will most of the time create a gene knockout.<br>
Alternatively, one can insert DNA patches to the newly cut DNA strand and leave the cell glue both parts together.
</p>
<hr>
<label class="jump-left" for="step2" tabindex="10">Previous</label>
</section>
</div>
</article>
<footer>
<small>
Made by <a href="https://brunofenzl.com" title="Bruno Fenzl">Bruno Fenzl</a> || Source code availble at <a href="https://github.com/BrunoFenzl/10kApart" title="this entry's repository">Github</a>
</small>
</footer>
</main>
</body>
</html>