p {font-size: 1vw;}
p.medium {font-size: 1.35vw;}

h1, h2, h3, h4, h5 {font-family: 'NB Architekt Std'; line-height: 1;}

.head {position: relative;}
.head .arkitect {font-size: clamp(-14px,0.7vw,14px);}
.head .line {margin-left: -3%;}
.head .square {left: -5%; top: 30%;}

#hero .inside {position: absolute; top: 24vh; width: 100%; text-align: center; }
#hero .inside .line {position: static; width: 100%;}
#hero h1 {color: #FFF; position: static; font-size: clamp(-230px,11.5vw,230px); white-space: nowrap; line-height: 1; font-family: 'NB Architekt Light'}
#hero h3 {color: #FFF; font-family: 'Telegraf'; text-transform: uppercase; padding-bottom: 3%; font-size: clamp(-32px,1.6vw,32px)}
#hero .arkitect {margin-right: 10%;}
#hero p {text-transform: none; font-size: clamp(-24px,1.2vw,24px);}
#hero .lower {top: 71vh;}
#hero .slashes {width: 90%;}



#default {background: #000000;}


#section-1 {padding: clamp(-20px,5vw,20px) 0 0;}
#section-1 .head {width: 160%; margin-left: -60%}
#section-1 .title {font-size: clamp(-140px,7vw,140px); line-height: 0.9;  font-family: 'NB Architekt Light'}
#section-1 .globe {width: 155%; max-width: 200%; margin: -8% 0 0 0; right: -18%; position: relative;}
#section-1 .plus.a {top: 12%;}
#section-1 .plus.b {margin-left: -12%; margin-top: -1%; bottom: clamp(-300px,-15vw,300px); position: absolute;}
#section-1 p {max-width: 80%}
#section-1 .disc {margin-left: -22%}

#section-1 .logo {width: clamp(-260px,13vw,260px);}
#section-1 .img-1 {width: clamp(-840px,42vw,840px); margin-right: clamp(-400px,-19vw,400px); max-width: 200%; display: block; margin-bottom: -3px}
#section-1 .img-2 {position: absolute; z-index: 5; width: clamp(-500px,25vw,500px); bottom: clamp(-100px,-5vw,100px); left:clamp(-36px,1.8vw,36px);}



#section-2 {background: #000; background-size: cover; color: #FFF; padding: clamp(-60px,3vw,60px) clamp(-100px,5vw,100px); position: relative; overflow: hidden;}
#section-2 h3 {color: #FFF; font-size: clamp(10px,8vw,160px); font-family: 'NB Architekt Std'; line-height: 2.4;}
#section-2 .text-a {position: absolute; top: 12%; left: 55%; width: 30%;}
#section-2 .text-b {position: absolute; top: 66%; left: 55%; width: 30%;}
#section-2 .text-b p {font-size: clamp(10px,1.3vw,26px); line-height: 1.2;}
#section-2 .timeline-dots {position: absolute; top: 67%; width: 40%;}
#section-2 .text-c {position: absolute; top: 37%;}
#section-2 .text-d {position: absolute; bottom: 7%; left: 3%; text-transform: uppercase; transform: rotate(90deg);}
#section-2 .plus.a {position: absolute; right: 5%; top: 15%;}
#section-2 .plus.b {position: absolute; right: 5%; bottom: 15%;}
#section-2 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 135%; object-fit: cover;}
#section-2 .text-e {position: absolute; left: 0; top: clamp(-100px,5vw,100px); transform:rotate(90deg)}
#section-2 .hspacer-sm {width: clamp(-200px,10vw,200px)}

#section-10 h2 {font-size: clamp(-140px,7vw,140px); font-family: 'NB Architekt Light'; padding-left: clamp(-140px,7vw,140px)}
#section-10 {background: url(img/abstract-bg-achievements.webp) no-repeat center top; background-size: 100% auto; padding: 20% 0 5%; margin-top: clamp(-340px,-17vw,0px);}
#section-10 .text-1 {line-height: 0.9;}
#section-10 .graph {position: relative; white-space: nowrap;}
#section-10 .graph img {width: 110%; max-width: 200%; position: absolute; top: 18%;}
#section-10 .achievement {display: inline-block; width: 14.9%; vertical-align:top; white-space: normal;}
#section-10 .achievement .year { font-family: 'NB Architekt Std'; font-size: clamp(-42px,2.1vw,42px); margin-bottom: 60%;}
#section-10 .achievement p {max-width: 60%; font-size: clamp(10px,0.9vw,18px);}

#section-10 .award {width: 18%; display: inline-block; vertical-align: top; margin-bottom: 2%; margin-right: 1.5%;}
#section-10 .award .year {font-family: 'NB Architekt Std'; font-size: clamp(10px,1.5vw,30px);  margin-bottom: 5%; }
#section-10 .award p {font-size: clamp(10px,0.9vw,18px);}
#section-10 small {font-size: clamp(-28px,1.4vw,28px); font-family: telegraf}

#section-10 .stats {max-width: 80%; margin: 0 auto; text-align: center;}
#section-10 .stats .stat {font-size: clamp(-160px,8vw,160px); font-family: 'NB Architekt Light'; line-height: 0.7}
#section-10 .stats .borders {border-left: 1px solid #000; border-right: 1px solid #000}
#section-10 .stats p {font-size: clamp(-30px,1.5vw,30px); padding: 0; margin: clamp(-30px,1.5vw,30px) 0 0}
#section-10 p.large {font-size: clamp(-54px,2.7vw,54px)}

#section-3 {padding: 0 0 clamp(-60px,3vw,60px);}

#section-4 {position: relative; padding-bottom: clamp(-100px,5vw,100px);}
#section-4 h3 {font-family: 'Telegraf'; text-transform: uppercase; font-size: clamp(10px,5.5vw,120px); line-height: 0.9; 
	background: #DF3EBB;
	background: -webkit-linear-gradient(to top left, #DF3EBB 0%, #7DB539 100%);
	background: -moz-linear-gradient(to top left, #DF3EBB 0%, #7DB539 100%);
	background: linear-gradient(to top left, #DF3EBB 0%, #7DB539 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#section-4 p {}
#section-4 .sqaure {}
#section-4  .plus {position: absolute; bottom: 0;}
#section-4 .dna {width: 100%; position: absolute; bottom: 33%; mix-blend-mode: difference;}
#section-4 .cell {width: 115%; max-width: 130%;}





.quote-1 {position: relative; padding-bottom: 5%;}
.quote-1 .container-fluid {position: relative; z-index: 10;}
.quote-1 .bg {position: absolute; background: 0; bottom: 0; left: 0; width: 100%;} 
.quote-1 .inside {max-width: 90%; position: relative; background: #FFF; padding: 0 10% 5% 0;}
.quote-1 .inside .mask {position: absolute; left: -50%; width: 100%; height: 100%; top: 0; background: #FFF;}
.quote-1 .inside .adjuster {position: relative; z-index: 5;}
.quote-1 .author {font-size: clamp(10px,1.8vw,36px); font-family: 'NB Architekt Std'; color: #FFF; margin: 3% 0 0; position: relative;}
.quote-1 .author .plus {right: 0;  top: 35%;}
.quote-1 .auth-title {color: #FFF; max-width: 50%;}
.quote-1 .dot {right: -14%; bottom:-13%;}




#section-6 {background: #030303 url(img/cell-3.webp) no-repeat center top; background-size: 100% auto; color: #FFF;}
#section-6 h3 {font-size:clamp(10px, 9.6vw,180px); font-family: 'NB Architekt Std'; line-height: 0.9; margin: -8% 0 0;  white-space: nowrap;}
#section-6 .square.a {position: absolute; right: 0; top: 0;}

#section-6 .definition {padding: 7% 0 10% 7%; position: relative;}
#section-6 .definition .inside {padding: 0 12% 20%;}
#section-6 .definition p {color: #838383; font-size: clamp(10px,0.8vw,20px); line-height: 1.8;}
#section-6 .definition .title {color: #FFF; line-height: clamp(10px,3vw,60px); padding-bottom: clamp(10px,1vw,20px); font-size: clamp(10px,1.6vw,32px); border-bottom: 1px solid #FFF; position: relative; margin-bottom: 15%;}
#section-6 .definition .title img {position: absolute; right: 0; height: 48%; margin-top: 3%;}
#section-6 .definition .plus {right: 15%}
#section-6 .definition .disc {position: absolute; left: 0;}
#section-6 .definition .mark {background: transparent; margin-top: -25%;}



#section-7 {background: #fe7433; padding-bottom: 15%;}
#section-7 h3 {color: #FFF; font-family: 'NB Architekt Std'; font-size: clamp(10px,6.5vw,120px); line-height: 1; margin-top: -20%;}
#section-7 p {max-width: 70%;}
#section-7 .outline {position: absolute; z-index: 5; left: 0; width: 110%; max-width: 150%; left: -5%; top: -4%;}
#section-7 .plus {position: static;}
#section-7 h4 {font-family: 'NB Architekt Std'; font-size: clamp(10px,3.72vw,60px);}
#section-7 .arkitect {font-size: clamp(10px,1.2vw,24px); font-family: 'NB Architekt Std';}


#section-7 .timeline-item {padding:0 0 4% 0; position: relative; width: clamp(10px,20vw,400px); margin-right: clamp(10px,7vw,140px); margin-top: 3%; display: inline-block; overflow-x: hidden; vertical-align: top;}
#section-7 #timeline .inside {white-space: nowrap;}
#section-7 #timeline {overflow: scroll; width: 110%;}
#section-7 .timeline-item .plus {right: 0; position: absolute; top: 5%;}
#section-7 .timeline-item .year {font-size: clamp(10px,6vw,120px); font-family: 'NB Architekt Light'; line-height: 1.1; letter-spacing: clamp(-2px,-0.1vw,2px); border-bottom: 1px solid #000; margin-bottom: 5%;}
#section-7 .timeline-item p {text-transform: uppercase; font-size: clamp(7px,0.9vw,18px); line-height: 1.3em; max-width: 100% !important; margin-bottom: 15%; white-space: normal; height: clamp(10px,11vw,220px);}
#section-7 .timeline-item img {mix-blend-mode: multiply; width: 80%; filter: saturate(0%); height: clamp(10px,9vw,180px); object-fit: cover;}
#section-7 .timeline-item .small {font-size: clamp(10px,0.6vw,12px); margin-top: clamp(10px,1vw,20px);}




#section-8 {padding-bottom: 7%;}
#section-8 h2 {font-size: clamp(10px,14vw,280px); line-height: 0.8; margin-top: -7%; margin-bottom: 7%;}
#section-8 p.large {border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 5% 0; margin-bottom: 10%}
#section-8 p:not(.large) {padding: 0 5%;}
#section-8	.crispr {width: 120%; max-width: 130%; left: -24%; position: relative;}
#section-8 .petri-dish {position: absolute; bottom: 0; left: 5%; width: 70%; margin-bottom: -12%;}
#section-8 .crispr-squence {width: 111%; max-width: 210%; margin-left: -15%;}
#section-8 h4 {text-align: center; font-size: clamp(10px,3vw,60px);}
#section-8 .slashes {display: block; margin: 0 auto 3%;}
#section-8 .num {font-size:clamp(10px, 1.5vw,30px); font-family: 'NB Architekt Std';}
#section-8 .plus.b {bottom: 3%; left: 5%;}
#section-8 .plus.c {bottom: 3%; right: 5%;}


.quote-2 {position: relative; padding: 3% 0; background: #000; color: #FFF}
.quote-2 .bg {position: absolute; width: 103%; top: 0; left:-2%; max-width: 110%;}
.quote-2 .quote {font-family: 'Telegraf'; color: #FFF; text-transform: uppercase; font-size:clamp(10px,2vw,40px); line-height: 1.4; margin: 10% 0;}
.quote-2 .square.a {position: absolute; left: 15px; top: 0;}
.quote-2 .square.b {position: absolute; left: 7%; bottom:10%;}
.quote-2 .plus.c {position: absolute; right: 8%; bottom: 4%;}
.quote-2 .plus.a {right: 0; top: 0;}
/*.quote-2 .plus.b {right: 0; bottom: 0;}*/
.quote-2 .portrait {max-width: 94%;}
.quote-2 .author {font-size: clamp(10px,1.7vw,34px); font-family: 'NB Architekt Std'; margin-bottom: 2%;}

#section-11 {background: #000; color: #FFF; padding-bottom: 15vw}
#section-11 h2 {font-size: clamp(10px,12vw,240px); font-family: 'NB Architekt Std'; line-height: 0.8; margin-bottom: 0; white-space: nowrap;}
#section-11 .img-1 {max-width: 130%; width: 120%; margin-left: -25%;}
#section-11 #lower {padding: 8% 6% 0;}


#book .book {margin-top: clamp(-300px,-15vw,300px)}
#book p {max-width: 80%; margin-bottom: clamp(-40px,2vw,40px)}
#book .arkitect .square {margin-right:clamp(-70px, 3.5vw,70px); display: inline-block; position: relative;}
#book .medium-large {font-size: clamp(-40px,2vw,40px); max-width: 100%; line-height: 1.2}
#book p.grey {max-width: 100%}


#news {background: #FFF; color: #000}
#news .news-item {color: #000; border-top: 2px solid #000}
#news .plus.white {color: #000}
#news .line {border-bottom-color: #000}
#news .line .inner {position: absolute; border: 3px solid #000; width: 15%; top: -2.5px}
#news h2 {font-size: clamp(-80px,4vw,80px); font-family: 'NB Architekt Light'; margin-bottom: clamp(-20px,1vw,20px)}
#news .item {padding-left: clamp(-40px,2vw,40px); padding-right: clamp(-40px,2vw,40px); }
#news .news-row {margin-left: clamp(-40px,-2vw,40px); margin-right: clamp(-40px,-2vw,40px)}
#news .news-item h4 {color: #555; font-size: clamp(-16px,0.8vw,16px); font-weight: 700}

@media only screen and (max-width:767px) {

	p {font-size: 3.5vw;}
	p.medium {font-size: 4vw;}
	p.large {font-size: 6vw;}

	.head .arkitect {font-size: 2vw;}
	.head .square {left: 2%;}

	#hero .plus.a {top: 20vh; left: 6.5vw;}
	#hero h1 {font-size: 12vw;}
	#hero .arkitect {text-align: left !important; font-size: 2.5vw;}
	#hero .lower {left: 6vw; top: 65vh; width: 90%;}
	#hero p {font-size: 3.3vw; line-height: 1.2;}
	#hero h3 {font-size: 5vw;}
	#hero h3 br {display: none;}
	#hero .circles {display: none;}
	#hero .bg {object-position: right top}

	#section-1 {padding: 5vw 0 6vw;}
	#section-1 .img-1 {display: none;}
	#section-1 .img-2 {display: none;}
	#section-1 .logo {display: none;}
	#section-1 .spacer-lg {height: 3vw;}
	#section-1 .topper {display: none}
	#section-1 .spacer-md {display: none}
	#section-1 .head {width: 100%; margin: 0}

	#section-2 {padding: 8vw 0}
	#section-2 .text-a {position: static; width: 100%;}
	#section-2 h3 {font-size: 12vw; line-height: 1.5;}
	#section-2 .plus.a {top: 10vw;}
	#section-2 .text-c {display: none;}
	#section-2 .text-d {left: 0; bottom: auto; top: 10vw; font-size: 3vw; display: none}
	#section-2 .text-b {position: static; font-size: 3vw; width: 100%;}
	#section-2 .text-b p {font-size: 3.5vw; line-height: 1.5; width: 100%;}



	#section-10 .graph {overflow-x: scroll; position: relative; width: 110%;}
	#section-10 .graph .inner {}
	#section-10 .achievement {width: 43%;}
	#section-10 .achievement p {font-size: 3.5vw;}
	#section-10 .achievement .year {font-size: 10vw; margin-bottom: 50%;}
	#section-10 .graph img {width: 320%; max-width: 10000%;}
	#section-10 .award {width: 47%;}
	#section-10 .award .year {font-size: 6vw;}
	#section-10 .award p {font-size: 3.4vw;}
	#section-10 {background-size: auto 100%;}
	#section-10 h2 { margin:0; padding:0; font-size:11vw }
	#section-10 h2 small {font-size: 3vw; display: block; padding-top: 3vw}
	#section-10 p.large {font-size: 5vw; padding-top: 5vw}
	#section-10 .stats .borders {border: none}
	#section-10 .stats .stat {font-size: 19vw}
	#section-10 .stats p {font-size: 4vw; color: #FFF; margin-bottom: 10vw}


	#section-3 {padding: 3vw 0;}

	#section-4 {position: relative; padding-bottom: 5vw;}
	#section-4 h3 {font-family: 'Telegraf'; text-transform: uppercase; font-size: clamp(10px,5.5vw,120px); line-height: 0.9; 
		background: #DF3EBB;
		background: -webkit-linear-gradient(to top left, #DF3EBB 0%, #7DB539 100%);
		background: -moz-linear-gradient(to top left, #DF3EBB 0%, #7DB539 100%);
		background: linear-gradient(to top left, #DF3EBB 0%, #7DB539 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	#section-4 p {}
	#section-4 .sqaure {}
	#section-4  .plus {position: absolute; bottom: 0;}
	#section-4 .dna {width: 100%; position: absolute; bottom: 33%; mix-blend-mode: difference;}
	#section-4 .cell {width: 115%; max-width: 130%;}


	.quote-1 .bg {height: 60%; object-fit: cover;}
	.quote-1 .author {font-size: 6vw;}
	.quote-1 {padding-bottom: 15vw;}


	#section-6 {padding-bottom: 30vw;}
	#section-6 h3 {font-size: 15vw;}
	#section-6 .title-area {font-size: 2.5vw; text-align: center !important;}
	#section-6 .definition {padding: 0;}
	#section-6 .definition .disc {display: none;}
	#section-6 .definition .inside {padding: 10% 0 0;}
	#section-6 .definition .title {font-size: 4.3vw; line-height: 2;}
	#section-6 .definition .plus {left: 8%; top: 0%}
	#section-6 .definition p {font-size: 3.3vw; line-height: 1.2;}
	#section-6 .definition .mark {margin: 0; width: 250%; max-width: 300%; margin-left: -50%;}


	#section-7 h3 {font-size: 12vw; margin-top: -28%;}
	#section-7 h3 br {display: none;}
	#section-7 p {max-width: 100%; line-height: 1.2;}
	#section-7 .scientists,
	#section-7 .outline {width: 220%; max-width: 200%;}
	#section-7 h4 {font-size: 7vw; padding-top: 4vw;}

	#section-7 .timeline-item {width: 45vw; margin-top: 10%; margin-bottom: 5%;}
	#section-7 .timeline-item .year {font-size: 10vw;}
	#section-7 .timeline-item p {white-space: normal;}



	#section-8 h2 {font-size: 26vw;}
	#section-8 p.large {font-size: 6.4vw;}
	#section-8 .crispr {width: 90%; height: 80vw; object-fit:cover; object-position: top right;}
	#section-8 .petri-dish {left: auto; right: 0; margin-bottom: 30%; width: 50%;}

	#section-8 .crispr-squence {margin-left: -7%; width: 114%;}
	#section-8 .slashes {margin: 4vw 0;}
	#section-8 h4 {font-size: 13vw; line-height: 1;}
	#section-8 .sub {font-size: 4.8vw;}
	#section-8 .num {font-size: 7vw;}
	#section-8 .plus.c {display: none;}





	.quote-2 .bg {width: 150%; max-width: 300%; left: -50%; top: -5%; padding: 5vw 0;}
	.quote-2 .portrait {max-width: 60%;}
	.quote-2 .quote {font-size: 4vw; color: #FFF; margin: 3vw 0;}
	.quote-2 .author {font-size: 6vw;}

	#book p {max-width: 91%}
	#book .medium-large {font-size: 5vw}



	#section-11 h2 {font-size: 15vw; margin-left: -4%;}
	#section-11 .img-1 {margin-left: -20%; height: 38vw; object-fit: cover;}
	#section-11 #lower {padding: 8% 0;}

	#news {padding-bottom: 24vw;}

	
}