Difference between revisions of "Team:Leiden/css/main css"

Revision as of 10:23, 30 July 2018 (view source) ChielvanAmstel (Talk | contribs) ← Older edit		Latest revision as of 23:30, 8 November 2018 (view source) ChielvanAmstel (Talk | contribs)
(71 intermediate revisions by the same user not shown)
Line 9:		Line 9:
	--background: #D3D1BE;		--background: #D3D1BE;
	--accent4: #B2B09B;		--accent4: #B2B09B;
		+	--accentRed: #F86767;
		+	--accentCyan: #5FC8D8;
	}		}
−
−	/* Font things */
	@font-face {		@font-face {
Line 22:		Line 22:
	font-family: UnderTitle;		font-family: UnderTitle;
	src: url('https://static.igem.org/mediawiki/2018/d/d6/T--Leiden--YuGothicLight.ttf');		src: url('https://static.igem.org/mediawiki/2018/d/d6/T--Leiden--YuGothicLight.ttf');
−	/* src: url('../webfonts/yugothil.ttf'); */	+	/* src: url('../webfonts/YuGothic-Light-reduced.ttf'); */
	}		}
Line 45:		Line 45:
	}		}
−	/* Correct iGEM shit... */	+	@font-face {
		+	font-family: 'iGEMLeidenIcons';
		+	src: url('https://static.igem.org/mediawiki/2018/5/54/T--Leiden--iGEMLeidenIcons.eot?43u2u1');
		+	/* src: url('../webfonts/iGEMLeidenIcons.eot?43u2u1'); */
		+	src: url('https://static.igem.org/mediawiki/2018/5/54/T--Leiden--iGEMLeidenIcons.eot?43u2u1#iefix') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2018/e/e4/T--Leiden--iGEMLeidenIconsttf.ttf?43u2u1') format('truetype'), url('https://static.igem.org/mediawiki/2018/8/89/T--Leiden--iGEMLeidenIconswoff.woff?43u2u1') format('woff'), url('https://static.igem.org/mediawiki/2018/d/d1/T--Leiden--iGEMLeidenIconssvg.svg') format('svg');
		+	/* src: url('../webfonts/iGEMLeidenIcons.eot?43u2u1#iefix') format('embedded-opentype'), url('../webfonts/iGEMLeidenIcons.ttf?43u2u1') format('truetype'), url('../webfonts/iGEMLeidenIcons.woff?43u2u1') format('woff'), url('../webfonts/iGEMLeidenIcons.svg?43u2u1#iGEMLeidenIcons') format('svg'); */
		+	font-weight: normal;
		+	font-style: normal;
		+	}
		+	/* Correct iGEM shit... */
	#Global p, p {		#Global p, p {
	padding: 0;		padding: 0;
Line 53:		Line 62:
	line-height: 1.4;		line-height: 1.4;
	position: relative;		position: relative;
−	z-index: 1;	+	z-index: 50;
	}		}
Line 60:		Line 69:
	margin: 0;		margin: 0;
	}		}
−
−	/* #Global {
−	width: 100%;
−	position: absolute;
−	background-color: var(--whiteish);
−	color: var(--blackish);
−	font-family: Body, sans-serif;
−	} */
	#globalWrapper {		#globalWrapper {
Line 91:		Line 92:
	}		}
−	/***********************************************************************************************************************************************************/	+	#globalWrapper #content #top_title div.logo_2018 a img {
		+	content: url('https://static.igem.org/mediawiki/2018/c/c8/T--Leiden--LogoLeidenV1.png')
		+	}
		+	/***********************************************************************************************************************************************************/
	/* Global styles */		/* Global styles */
−		+	sup, sub {
−	sup {	+
	font-size: 60%;		font-size: 60%;
		+	}
		+
		+	b, #body b {
		+	font-family: Kopje;
		+	}
		+
		+	b.highlightBlue {
		+	color: var(--accent1);
		+	}
		+
		+	b.highlightOrange {
		+	color: var(--main);
	}		}
Line 110:		Line 125:
	h1.SectionTitle {		h1.SectionTitle {
−	font-size: 3em;	+	font-size: 3rem;
		+	z-index: 50;
		+	position: relative;
		+	padding-top: 60px;
		+	}
		+
		+	h2.SectionTitle {
		+	font-size: 2.4rem;
		+	}
		+
		+	.container-text h1.SectionTitle {
		+	text-align: left;
	}		}
	h1 {		h1 {
−	font-size: 2em;	+	font-size: 2rem;
	}		}
	h2 {		h2 {
−	font-size: 1.5em;	+	font-size: 1.5rem;
	}		}
	h3 {		h3 {
−	font-size: 1.17em;	+	font-size: 1.17rem;
	}		}
	h4 {		h4 {
−	font-size: 1.12em;	+	font-size: 1.12rem;
	}		}
	h5 {		h5 {
−	font-size: .83em;	+	font-size: .83rem;
	}		}
	h6 {		h6 {
−	font-size: .75em;	+	font-size: .75rem;
	}		}
Line 156:		Line 182:
	color: var(--blackish);		color: var(--blackish);
	font-family: Body, sans-serif;		font-family: Body, sans-serif;
−	overflow-x: hidden;	+	z-index: -5;
	}		}
−	li, ul {	+	ul li, ul {
	margin: 0;		margin: 0;
	line-height: normal;		line-height: normal;
Line 186:		Line 212:
	margin: auto;		margin: auto;
	padding: 60px 0 40px 0;		padding: 60px 0 40px 0;
		+	text-align: justify;
		+	text-align-last: start;
	}		}
Line 191:		Line 219:
	color: inherit;		color: inherit;
	text-decoration: none;		text-decoration: none;
		+	}
		+
		+	a.colouredlink, span.colouredlink {
		+	color: var(--main);
		+	font-family: Kopje;
		+	cursor: pointer;
		+	}
		+
		+	a.colouredlink.Blue {
		+	color: var(--accent1);
		+	}
		+
		+	a.wrap {
		+	display: block;
		+	}
		+
		+	code {
		+	text-align: left;
		+	display: block;
		+	padding-left: 20px;
	}		}
Line 198:		Line 246:
	/* References */		/* References */
−
	.smaller {		.smaller {
	font-size: 0.75em;		font-size: 0.75em;
	}		}
−	/***********************************************************************************************************************************************************/	+	.popout .refs p, .refs p, .projectDescription .refs p {
		+	padding: 0 0 5px 0;
		+	}
−	/* Homepage */	+	.center {
		+	text-align: center;
		+	text-align-last: center;
		+	}
−	.circles {	+	.caption {
−	background: url('https://static.igem.org/mediawiki/2018/3/3a/T--Leiden--circles1200pxplus.png') no-repeat;	+	font-size: 0.9em;
−	background-position: 50% 50%;	+	text-align: justify;
−	background-size: cover;	+	}
		+
		+	span.grouped {
		+	display: inline-block;
		+	position: relative;
		+	}
		+
		+	/* Custom scrollbar (chrome & IE/Edge) */
		+	/* width */
		+	::-webkit-scrollbar {
		+	width: 10px;
		+	height: 10px;
		+	}
		+
		+	::-webkit-scrollbar-track {
		+	background: #efefef;
		+	-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
		+	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
		+	}
		+
		+	::-webkit-scrollbar-thumb {
		+	border-radius: 5px;
		+	background: var(--accent1);
		+	}
		+
		+	/*********************** Blobs ***************************/
		+	.blobs {
		+	background: var(--main);
		+	margin: 0 -2px;
		+	padding: 2px 7px;
		+	-webkit-filter: url("#goo");
		+	filter: url("#goo");
		+	cursor: default;
		+	position: relative;
		+	display: inline-block;
		+	border: solid transparent;
		+	border-width: 0px;
		+	-webkit-transition: all 0.5s;
		+	transition: all 0.5s;
		+	background-clip: padding-box;
		+	-webkit-box-sizing: content-box;
		+	box-sizing: content-box;
		+	z-index: 52;
		+	}
		+
		+	.blobs:hover {
		+	border-width: 10px;
		+	margin: -10px -12px;
		+	}
		+
		+	.blobs .popoutBlob {
		+	position: absolute;
		+	z-index: -1;
		+	display: block;
		+	width: 20px;
	height: -webkit-max-content;		height: -webkit-max-content;
	height: -moz-max-content;		height: -moz-max-content;
	height: max-content;		height: max-content;
−	min-height: calc(70vh - 10px);	+	max-height: 20px;
−	position: relative;	+	bottom: 3px;
−	top: 0;	+	left: calc(50% - 10px);
−	z-index: 3;	+	background: var(--main);
		+	padding: 0px;
		+	border-radius: 50%;
		+	color: var(--main);
		+	font-size: 0px;
		+	border: solid transparent;
		+	border-width: 0px;
		+	-webkit-transition: all 0.5s cubic-bezier(0.72, 0.01, 0.6, 0.84);
		+	transition: all 0.5s cubic-bezier(0.72, 0.01, 0.6, 0.84);
		+	background-clip: padding-box;
		+	-webkit-box-sizing: content-box;
		+	box-sizing: content-box;
	}		}
−	div#headercontent {	+	.blobs.bottom .popoutBlob {
		+	bottom: auto;
		+	top: 3px;
		+	}
		+
		+	.blobs:hover .popoutBlob {
		+	left: calc(50% - 135px);
		+	border-radius: 10px;
		+	width: 200px;
		+	height: -webkit-max-content;
		+	height: -moz-max-content;
		+	height: max-content;
		+	max-height: 300px;
		+	font-size: 1em;
		+	bottom: 25px;
		+	padding: 15px;
		+	border-width: 20px;
		+	-webkit-transition: all 0.5s cubic-bezier(0.72, 0.01, 0.6, 0.84);
		+	transition: all 0.5s cubic-bezier(0.72, 0.01, 0.6, 0.84);
		+	cursor: pointer;
		+	-webkit-animation: textappear 0.9s forwards;
		+	animation: textappear 0.9s forwards;
		+	/* z-index: 99999; */
		+	}
		+
		+	#iHP .blobs .popoutBlob {
		+	cursor: default;
		+	}
		+
		+	#iHP .blobs.Clickable .popoutBlob {
		+	cursor: pointer;
		+	}
		+
		+	.blobs.XXL:hover .popoutBlob {
		+	left: calc(50% - 185px);
		+	width: 300px;
		+	}
		+
		+	.blobs.bottom .popoutBlob {
		+	bottom: auto;
		+	top: 25px;
		+	}
		+
		+	.blobs .wobblybobbly {
	position: absolute;		position: absolute;
		+	z-index: -1;
		+	width: 30%;
		+	background: var(--main);
		+	height: 70%;
		+	border-radius: 50%;
		+	left: 35%;
		+	bottom: 4px;
		+	}
		+
		+	.blobs:hover .wobblybobbly {
		+	-webkit-animation: wobble 1.7s 0.2s;
		+	animation: wobble 1.7s 0.2s;
		+	}
		+
		+	@-webkit-keyframes wobble {
		+	0% {
		+	bottom: 4px
		+	}
		+
		+	15% {
		+	bottom: 14px
		+	}
		+
		+	42% {
		+	bottom: -4px
		+	}
		+
		+	67% {
		+	bottom: 11px
		+	}
		+
		+	90% {
		+	bottom: -2px
		+	}
		+
		+	100% {
		+	bottom: 4px
		+	}
		+	}
		+
		+	@keyframes wobble {
		+	0% {
		+	bottom: 4px
		+	}
		+
		+	15% {
		+	bottom: 14px
		+	}
		+
		+	42% {
		+	bottom: -4px
		+	}
		+
		+	67% {
		+	bottom: 11px
		+	}
		+
		+	90% {
		+	bottom: -2px
		+	}
		+
		+	100% {
		+	bottom: 4px
		+	}
		+	}
		+
		+	@-webkit-keyframes textappear {
		+	0% {
		+	color: var(--main);
		+	}
		+
		+	60% {
		+	color: var(--main);
		+	}
		+
		+	100% {
		+	color: var(--blackish);
		+	}
		+	}
		+
		+	@keyframes textappear {
		+	0% {
		+	color: var(--main);
		+	}
		+
		+	60% {
		+	color: var(--main);
		+	}
		+
		+	100% {
		+	color: var(--blackish);
		+	}
		+	}
		+
		+	a.ref {
		+	display: inline;
		+	}
		+
		+	/*********************** Navigation boxes at bottom of page ***************************/
		+	.UnderPageNav {
		+	width: 90%;
		+	position: relative;
		+	max-width: 1100px;
		+	margin: 50px auto;
	display: -webkit-box;		display: -webkit-box;
	display: -ms-flexbox;		display: -ms-flexbox;
	display: flex;		display: flex;
−	-webkit-box-orient: vertical;	+	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;		-webkit-box-direction: normal;
−	-ms-flex-direction: column;	+	-ms-flex-flow: row wrap;
−	flex-direction: column;	+	flex-flow: row wrap;
		+	-webkit-box-pack: space-evenly;
		+	-ms-flex-pack: space-evenly;
		+	justify-content: space-evenly;
		+	/* -webkit-box-align: center;
		+	-ms-flex-align: center;
		+	align-items: center;
		+	-ms-flex-line-pack: center;
		+	align-content: center; */
		+	}
		+
		+	.UnderPageNav.crowdfunding {
		+	position: absolute;
		+	bottom: 0;
		+	left: 50%;
		+	-webkit-transform: translate(-50%, 0);
		+	transform: translate(-50%, 0);
		+	}
		+
		+	.donors.static~.UnderPageNav.crowdfunding {
		+	position: relative;
		+	left: auto;
		+	-webkit-transform: translate(0, 0);
		+	transform: translate(0, 0);
		+	}
		+
		+	/* .UnderPageNav.crowdfunding .NavBlockIcon {
		+	margin-top: 40px
		+	} */
		+	.NavBlock {
		+	width: 200px;
		+	height: 200px;
		+	background: var(--main);
		+	display: block;
		+	border-radius: 20px;
		+	padding: 20px;
		+	overflow: hidden;
		+	position: relative;
		+	cursor: pointer;
		+	-webkit-box-shadow: 2px 2px 10px 0px grey;
		+	box-shadow: 2px 2px 10px 0px grey;
		+	-webkit-transition: all 0.5s;
		+	transition: all 0.5s;
		+	margin: 10px;
		+	}
		+
		+	.NavBlock:hover {
		+	-webkit-box-shadow: 2px 2px 2px -2px grey;
		+	box-shadow: 2px 2px 2px -2px grey;
		+	-webkit-transform: translate(3px, 3px);
		+	transform: translate(3px, 3px);
		+	}
		+
		+	.NavBlockIcon {
		+	color: #f7f7f7;
		+	font-size: 70px;
		+	width: -webkit-max-content;
		+	width: -moz-max-content;
		+	width: max-content;
		+	margin: auto;
	height: -webkit-max-content;		height: -webkit-max-content;
	height: -moz-max-content;		height: -moz-max-content;
	height: max-content;		height: max-content;
−	width: 100%;	+	position: relative;
	top: 50%;		top: 50%;
	-webkit-transform: translateY(-50%);		-webkit-transform: translateY(-50%);
	transform: translateY(-50%);		transform: translateY(-50%);
		+	-webkit-transition: all 0.5s;
		+	transition: all 0.5s;
	}		}
−	div.logo {	+	.NavBlock:hover .NavBlockIcon {
−	background: url('https://static.igem.org/mediawiki/2018/c/c8/T--Leiden--LogoLeidenV1.png');	+	font-size: 30px;
−	height: calc(0.9 * 50vw);	+	top: 10%;
−	max-height: 300px;	+
−	width: 50%;	+
−	margin: auto;	+
−	background-size: contain;	+
−	background-repeat: no-repeat;	+
−	background-position: center bottom;	+
	}		}
−	div#Fsos {	+	.NavBlockText {
	color: var(--blackish);		color: var(--blackish);
−	font-size: 50px;	+	text-align: center;
−	font-family: ProjectTitle;	+	font-size: 15px;
		+	overflow: hidden;
		+	-webkit-transition: all 0.5s;
		+	transition: all 0.5s;
		+	opacity: 0;
		+	position: relative;
		+	top: 60px;
		+	}
		+
		+	.NavBlockText span {
	display: block;		display: block;
−	width: -webkit-max-content;	+	color: var(--whiteish);
−	width: -moz-max-content;	+	font-family: Kopje;
−	width: max-content;	+	font-size: 16px;
−	margin: auto;	+
	text-align: center;		text-align: center;
−	padding-top: 20px;	+	text-align-last: center;
−	background: rgba(222, 217, 208, 0.7);	+	padding-bottom: 10px;
−	-webkit-box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);	+
−	box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);	+
−	border-radius: 50px;	+
	}		}
−	div#UnderTitle {	+	.NavBlock:hover .NavBlockText {
		+	opacity: 1;
		+	top: 0px;
		+	}
		+
		+	/*********************** Timeline Concept ***************************/
		+	.popout p.introTextTimeline {
		+	border-bottom: 3px solid var(--main);
		+	padding-bottom: 25px;
		+	margin: 0px auto 30px;
		+	width: 90%;
		+	}
		+
		+	.timeline li.timelineUnit {
		+	list-style-type: none;
		+	position: relative;
		+	width: 100%;
		+	margin-top: 50px;
		+	}
		+
		+	.timeline li.timelineUnit:first-of-type {
		+	padding-top: 50px;
		+	}
		+
		+	.timeline li.timelineUnit:first-of-type i.iHPicon {
		+	top: 150px;
		+	}
		+
		+	.timeline li.timelineUnit:first-of-type .linesegment::before {
		+	content: '';
		+	position: absolute;
		+	top: 0;
		+	height: 100px;
		+	width: 100%;
		+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(253, 253, 253, 1)), to(rgba(253, 253, 253, 0)));
		+	background: linear-gradient(rgba(253, 253, 253, 1), rgba(253, 253, 253, 0));
		+	}
		+
		+	.timeline li.timelineUnit:last-of-type {
		+	margin-bottom: 25px;
		+	}
		+
		+	.timeline li.timelineUnit:last-of-type .linesegment::before {
		+	content: '';
		+	position: absolute;
		+	bottom: 0;
		+	height: 100px;
		+	width: 100%;
		+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(253, 253, 253, 0)), to(rgba(253, 253, 253, 1)));
		+	background: linear-gradient(rgba(253, 253, 253, 0), rgba(253, 253, 253, 1));
		+	}
		+
		+	.timeline li.timelineUnit .timelineContent {
		+	position: relative;
		+	width: calc(90% - 50px);
	color: var(--blackish);		color: var(--blackish);
−	font-size: 21.62px;	+	border-radius: 20px;
−	font-family: UnderTitle;	+	opacity: 0;
		+	-webkit-transition: all 0.5s, opacity 1s;
		+	transition: all 0.5s, opacity 1s;
		+	}
		+
		+	.timeline li.timelineUnit.conclusion .timelineContent {
		+	padding: 0;
		+	}
		+
		+	.timelineContent .title {
		+	font-family: Kopje;
		+	padding: 7px 25px 7px;
		+	background: var(--main);
		+	}
		+
		+	.right .timelineContent .title {
		+	border-radius: 0 20px 0 0;
		+	}
		+
		+	.left .timelineContent .title {
		+	border-radius: 20px 0 0 0;
		+	}
		+
		+	.popout .timelineContent p.text, #Global .popout .timelineContent p.text {
		+	background: var(--whiteish);
		+	padding: 15px 25px 20px;
		+	border: 1px solid #aaa;
		+	border-top: 0px;
		+	border-radius: 0 0 20px 20px;
		+	}
		+
		+	.timelineUnit.right .timelineContent {
		+	left: calc(10% + 70px)
		+	}
		+
		+	.timeline li.timelineUnit.right .timelineContent.revealed {
		+	left: calc(10% + 50px);
		+	opacity: 1;
		+	}
		+
		+	.timelineUnit.left .timelineContent {
		+	left: -20px;
		+	}
		+
		+	.timeline li.timelineUnit.left .timelineContent.revealed {
		+	left: 0;
		+	opacity: 1;
		+	}
		+
		+	.timeline li.timelineUnit.conclusion {
		+	margin: 0 auto;
		+	padding: 30px 0;
		+	}
		+
		+	.timelineUnit.conclusion .timelineContent.revealed {
		+	opacity: 1;
		+	}
		+
		+	.conclusion .timelineContent {
		+	border-radius: 20px;
		+	}
		+
		+	.conclusion .timelineContent .title {
		+	border-radius: 15px 15px 0 0;
		+	padding: 7px 25px 7px;
		+	background: var(--main);
		+	text-align: center;
		+	}
		+
		+	.popout .conclusion .timelineContent p.text, #Global .popout .conclusion .timelineContent p.text {
		+	border: none;
		+	padding: 10px 25px 20px;
		+	}
		+
		+	.timeline li.timelineUnit.conclusion .linesegment {
		+	left: calc(50% - 4px);
		+	}
		+
		+	.timeline li.timelineUnit.conclusion .timelineContent {
		+	width: 100%;
		+	border: 3px solid var(--main);
		+	}
		+
		+	.timeline li.timelineUnit .linesegment {
		+	position: absolute;
	display: block;		display: block;
		+	width: 8px;
		+	top: 0;
		+	bottom: 0;
		+	background: var(--main);
		+	border-radius: 4px;
		+	}
		+
		+	.timeline li.timelineUnit.left .linesegment {
		+	right: calc(10% - 4px);
		+	}
		+
		+	.timeline li.timelineUnit.right .linesegment {
		+	left: calc(10% - 4px);
		+	}
		+
		+	.timeline li.timelineUnit i.iHPicon {
		+	position: absolute;
		+	font-size: 30px;
		+	border-radius: 50%;
		+	width: 60px;
		+	height: 60px;
		+	background: var(--main);
		+	color: white;
		+	top: 100px;
		+	}
		+
		+	.timeline li.timelineUnit.left i.iHPicon {
		+	right: 10%;
		+	-webkit-transform: translateX(50%);
		+	transform: translateX(50%);
		+	}
		+
		+	.timeline li.timelineUnit.right i.iHPicon {
		+	left: 10%;
		+	-webkit-transform: translateX(-50%);
		+	transform: translateX(-50%);
		+	}
		+
		+	.timeline li.timelineUnit i.iHPicon::before {
		+	position: absolute;
		+	left: 50%;
		+	top: 50%;
		+	-webkit-transform: translate(-50%, -50%);
		+	transform: translate(-50%, -50%);
		+	}
		+
		+	.timeline li.timelineUnit .arrow {
		+	-webkit-box-sizing: content-box;
		+	box-sizing: content-box;
		+	position: absolute;
		+	top: 0px;
		+	width: 48px;
		+	height: 50px;
		+	border-top: 42px solid var(--main);
		+	}
		+
		+	.timeline li.timelineUnit.left .arrow {
		+	left: 100%;
		+	border-radius: 0 100% 0 0;
		+	}
		+
		+	.timeline li.timelineUnit.right .arrow {
		+	right: 100%;
		+	border-radius: 100% 0 0 0;
		+	}
		+
		+	.timeline li.timelineUnit.semiconclusion .timelineContent {
		+	padding-top: 50px;
		+	}
		+
		+	.timeline li.timelineUnit.semiconclusion.right .arrow {
		+	border-top: 0;
		+	border-bottom: 42px solid var(--main);
		+	border-radius: 0 0 0 100%;
		+	}
		+
		+	.timeline li.timelineUnit.semiconclusion.left .arrow {
		+	border-top: 0;
		+	border-bottom: 42px solid var(--main);
		+	border-radius: 0 0 100% 0;
		+	}
		+
		+	.timeline li.timelineUnit.Mid {
		+	margin: auto;
		+	width: 100%;
		+	padding-top: 70px;
		+	}
		+
		+	.timeline li.timelineUnit.Mid .linesegment {
		+	left: calc(50% - 4px);
		+	)
		+	}
		+
		+	.timeline .conclusion .flowIn, .timeline .conclusion .flowOut {
		+	position: absolute;
		+	background: var(--main);
		+	left: calc(50% - 42px);
		+	width: 84px;
		+	height: 38px;
		+	}
		+
		+	.timeline .conclusion .flowIn {
		+	bottom: calc(100% + 3px);
		+	}
		+
		+	.timeline .conclusion .flowOut {
		+	top: calc(100% + 3px);
		+	}
		+
		+	.flowIn::before, .flowIn::after, .flowOut::before, .flowOut::after {
		+	content: '';
		+	position: absolute;
		+	height: 38px;
		+	width: 38px;
		+	background: #fdfdfd;
		+	}
		+
		+	.flowIn::before {
		+	top: 0;
		+	left: 0;
		+	border-radius: 0 0 100% 0;
		+	}
		+
		+	.flowIn::after {
		+	top: 0;
		+	right: 0;
		+	border-radius: 0 0 0 100%;
		+	}
		+
		+	.flowOut::before {
		+	bottom: 0;
		+	left: 0;
		+	border-radius: 0 100% 0 0;
		+	}
		+
		+	.flowOut::after {
		+	bottom: 0;
		+	right: 0;
		+	border-radius: 100% 0 0 0;
		+	}
		+
		+	.timeline li.link {
		+	position: relative;
		+	border-style: solid;
		+	border-color: var(--main);
		+	height: 50px;
		+	}
		+
		+	.timeline li.link.LeftRight1 {
		+	width: calc(40% + 5px);
		+	border-width: 0 0 8px 8px;
		+	left: calc(10% - 4px);
		+	-webkit-transform: skewY(10deg);
		+	transform: skewY(10deg);
		+	-webkit-transform-origin: 100% 0;
		+	transform-origin: 100% 0;
		+	border-radius: 0 0 0 30px;
		+	margin-top: 33px;
		+	}
		+
		+	.timeline li.link.LeftRight2 {
		+	width: calc(40% + 4px);
		+	margin-top: -8px;
		+	margin-bottom: -18px;
		+	border-width: 8px 8px 0 0;
		+	left: 50%;
		+	-webkit-transform: skewY(10deg);
		+	transform: skewY(10deg);
		+	-webkit-transform-origin: 0 0;
		+	transform-origin: 0 0;
		+	border-radius: 0 30px 0 0;
		+	}
		+
		+	.timeline li.link.RightLeft1 {
		+	width: calc(40% + 4px);
		+	border-width: 0 8px 8px 0px;
		+	left: 50%;
		+	-webkit-transform: skewY(-10deg);
		+	transform: skewY(-10deg);
		+	-webkit-transform-origin: 0 100%;
		+	transform-origin: 0 100%;
		+	border-radius: 0 0 30px 0;
		+	margin-top: 33px;
		+	}
		+
		+	.timeline li.link.RightLeft2 {
		+	width: calc(40% + 5px);
		+	margin-top: -8px;
		+	margin-bottom: -18px;
		+	border-width: 8px 0 0 8px;
		+	left: calc(10% - 4px);
		+	-webkit-transform: skewY(-10deg);
		+	transform: skewY(-10deg);
		+	-webkit-transform-origin: 100% 0;
		+	transform-origin: 100% 0;
		+	border-radius: 30px 0 0 0;
		+	}
		+
		+	.timeline li.link.LeftMid1 {
		+	width: calc(20% + 4px);
		+	border-width: 0 0 8px 8px;
		+	left: calc(10% - 4px);
		+	-webkit-transform: skewY(10deg);
		+	transform: skewY(10deg);
		+	-webkit-transform-origin: 100% 0;
		+	transform-origin: 100% 0;
		+	border-radius: 0 0 0 30px;
		+	margin-top: 4px;
		+	}
		+
		+	.timeline li.link.LeftMid2 {
		+	width: calc(20% + 5px);
		+	margin-top: -8px;
		+	margin-bottom: 15px;
		+	border-width: 8px 8px 0 0;
		+	left: calc(30% - 1px);
		+	-webkit-transform: skewY(10deg);
		+	transform: skewY(10deg);
		+	-webkit-transform-origin: 0 0;
		+	transform-origin: 0 0;
		+	border-radius: 0 30px 0 0;
		+	}
		+
		+	.timeline li.link.MidRight1 {
		+	width: calc(20% + 5px);
		+	border-width: 0 0 8px 8px;
		+	left: calc(50% - 4px);
		+	-webkit-transform: skewY(10deg);
		+	transform: skewY(10deg);
		+	-webkit-transform-origin: 100% 0;
		+	transform-origin: 100% 0;
		+	border-radius: 0 0 0 30px;
		+	margin-top: 15px;
		+	}
		+
		+	.timeline li.link.MidRight2 {
		+	width: calc(20% + 4px);
		+	margin-top: -8px;
		+	margin-bottom: -45px;
		+	border-width: 8px 8px 0 0;
		+	left: 70%;
		+	-webkit-transform: skewY(10deg);
		+	transform: skewY(10deg);
		+	-webkit-transform-origin: 0 0;
		+	transform-origin: 0 0;
		+	border-radius: 0 30px 0 0;
		+	}
		+
		+	.timeline li.link.RightMid1 {
		+	width: calc(20% + 4px);
		+	border-width: 0 8px 8px 0px;
		+	left: 70%;
		+	-webkit-transform: skewY(-10deg);
		+	transform: skewY(-10deg);
		+	-webkit-transform-origin: 0 100%;
		+	transform-origin: 0 100%;
		+	border-radius: 0 0 30px 0;
		+	margin-top: 4px;
		+	}
		+
		+	.timeline li.link.RightMid2 {
		+	width: calc(20% + 5px);
		+	margin-top: -8px;
		+	margin-bottom: 15px;
		+	border-width: 8px 0 0 8px;
		+	left: calc(50% - 4px);
		+	-webkit-transform: skewY(-10deg);
		+	transform: skewY(-10deg);
		+	-webkit-transform-origin: 100% 0;
		+	transform-origin: 100% 0;
		+	border-radius: 30px 0 0 0;
		+	}
		+
		+	.timeline li.link.MidLeft1 {
		+	width: calc(20% + 4px);
		+	border-width: 0 8px 8px 0px;
		+	left: calc(30% - 0px);
		+	-webkit-transform: skewY(-10deg);
		+	transform: skewY(-10deg);
		+	-webkit-transform-origin: 0 100%;
		+	transform-origin: 0 100%;
		+	border-radius: 0 0 30px 0;
		+	margin-top: 15px;
		+	}
		+
		+	.timeline li.link.MidLeft2 {
		+	width: calc(20% + 5px);
		+	margin-top: -8px;
		+	margin-bottom: -45px;
		+	border-width: 8px 0 0 8px;
		+	left: calc(10% - 4px);
		+	-webkit-transform: skewY(-10deg);
		+	transform: skewY(-10deg);
		+	-webkit-transform-origin: 100% 0;
		+	transform-origin: 100% 0;
		+	border-radius: 30px 0 0 0;
		+	}
		+
		+	.popout .PicCaroussel {
		+	display: block;
		+	margin: 25px auto;
		+	position: relative;
		+	}
		+
		+	.popout .PicCaroussel.horizontal {
		+	width: 80%;
		+	}
		+
		+	.popout .PicCaroussel.vertical {
		+	width: 40%;
		+	}
		+
		+	.PicCaroussel img:first-child {
		+	position: relative;
		+	width: 100%;
		+	height: auto;
		+	}
		+
		+	.PicCaroussel img {
		+	width: auto;
		+	height: 100%;
		+	position: absolute;
		+	top: 0;
		+	left: 50%;
		+	-webkit-transform: translateX(-50%);
		+	transform: translateX(-50%);
		+	-webkit-transition: opacity 1s;
		+	transition: opacity 1s;
		+	opacity: 0;
		+	border: 2px solid var(--main);
		+	}
		+
		+	.PicCaroussel img.active {
		+	opacity: 1;
		+	}
		+
		+	.PicCaroussel .SlideNav {
		+	display: block;
		+	position: absolute;
		+	bottom: 15px;
	width: -webkit-max-content;		width: -webkit-max-content;
	width: -moz-max-content;		width: -moz-max-content;
	width: max-content;		width: max-content;
−	margin: auto;	+	left: 0;
−	text-align: center;	+	right: 0;
−	padding-left: 2px;	+	margin: 0 auto;
−	background: rgba(222, 217, 208, 0.7);	+	}
−	-webkit-box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);	+
−	box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);	+	.PicCaroussel .SlideNav span {
−	border-radius: 20px;	+	display: inline-block;
		+	width: 15px;
		+	height: 15px;
		+	border-radius: 50%;
		+	color: var(--whiteish);
		+	/* background: rgba(17, 17, 17, 0.5); */
		+	background: rgba(69, 105, 144, 0.7);
		+	border: 2px solid currentColor;
		+	margin: 0 3px;
		+	-webkit-transition: all 1s;
		+	transition: all 1s;
		+	position: relative;
		+	-webkit-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.5);
		+	box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.5);
		+	}
		+
		+	.PicCaroussel .SlideNav span:hover {
		+	background: currentColor;
		+	cursor: pointer;
		+	}
		+
		+	.PicCaroussel .SlideNav span.active {
		+	background: currentColor;
		+	}
		+
		+	.popout .SubSectionTitle, .projectDescription .SubSectionTitle {
		+	border-bottom: 3px solid var(--main);
		+	width: 90%;
		+	margin-left: auto;
		+	margin-right: auto;
		+	}
		+
		+	.projectDescription .SubSectionTitle {
		+	width: 100%
		+	}
		+
		+	#animation50SOS {
		+	width: 100%;
		+	height: auto;
		+	-webkit-box-shadow: 0 0 40px 5px var(--whiteish);
		+	box-shadow: 0 0 40px 5px var(--whiteish);
		+	margin: 5px auto;
		+	border: 3px solid var(--main);
	}		}
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
		+	/* Homepage */
		+	#loader-wrapper {
		+	position: fixed;
		+	width: 100vw;
		+	height: 100vh;
		+	top: 0;
		+	left: 0;
		+	background: white;
		+	z-index: 99999999;
		+	overflow: hidden;
		+	}
−	/* Eventpage */	+	#loader {
		+	display: block;
		+	position: absolute;
		+	left: 50%;
		+	top: 50%;
		+	width: 150px;
		+	height: 150px;
		+	margin: -75px 0 0 -75px;
		+	border-radius: 50%;
		+	border: 4px solid transparent;
		+	border-top-color: var(--main);
		+	-webkit-animation: spin 2s linear infinite;
		+	animation: spin 2s linear infinite;
		+	}
		+	#loader:before {
		+	content: "";
		+	position: absolute;
		+	top: 6px;
		+	left: 6px;
		+	right: 6px;
		+	bottom: 6px;
		+	border-radius: 50%;
		+	border: 4px solid transparent;
		+	border-top-color: var(--accent2);
		+	-webkit-animation: spin 3s linear infinite;
		+	animation: spin 3s linear infinite;
		+	}
		+
		+	#loader:after {
		+	content: "";
		+	position: absolute;
		+	top: 17px;
		+	left: 17px;
		+	right: 17px;
		+	bottom: 17px;
		+	border-radius: 50%;
		+	border: 4px solid transparent;
		+	border-top-color: var(--accent1);
		+	-webkit-animation: spin 1.5s linear infinite;
		+	animation: spin 1.5s linear infinite;
		+	}
		+
		+	#loader-wrapper #BestOnLargeScreens, #loader-wrapper #BadonEdge {
		+	display: none;
		+	padding: 0 10px;
		+	font-size: 20px;
		+	max-width: 90%;
		+	margin: 0 auto;
		+	text-align: center;
		+	position: relative;
		+	top: 80vh;
		+	}
		+
		+	#loader-wrapper #BadonEdge {
		+	display: block;
		+	}
		+
		+	/* if javascript is not enabled, remove loader */
		+	.no-js#loader-wrapper, .no-js#loader-wrapper #loader {
		+	display: none;
		+	}
		+
		+	@-webkit-keyframes spin {
		+	0% {
		+	-webkit-transform: rotate(0deg);
		+	transform: rotate(0deg);
		+	}
		+
		+	100% {
		+	-webkit-transform: rotate(360deg);
		+	transform: rotate(360deg);
		+	}
		+	}
		+
		+	@keyframes spin {
		+	0% {
		+	-webkit-transform: rotate(0deg);
		+	transform: rotate(0deg);
		+	}
		+
		+	100% {
		+	-webkit-transform: rotate(360deg);
		+	transform: rotate(360deg);
		+	}
		+	}
		+
		+	.largerText {
		+	font-size: 30px;
		+	position: relative;
		+	width: 100%;
		+	overflow: hidden;
		+	}
		+
		+	.popout object {
		+	display: block;
		+	margin: 10px auto;
		+	width: 100%;
		+	}
		+
		+	.popout object.small {
		+	height: 30vh;
		+	min-height: 200px;
		+	}
		+
		+	.popout object.large {
		+	height: 50vh;
		+	min-height: 300px;
		+	}
		+
		+	.popout object.notebook {
		+	height: 80vh;
		+	min-height: 600px;
		+	}
		+
		+	.popout.Parts {
		+	width: 90%;
		+	max-width: 1000px;
		+	}
		+
		+	.popout.Parts.chapter.revealed {
		+	max-width: 1100px;
		+	}
		+
		+	.popout.Parts.revealed .collapsibleContent {
		+	padding: 20px 30px 0px;
		+	}
		+
		+	table.PartTable, table.ResultTable {
		+	border-collapse: collapse;
		+	border-spacing: 0;
		+	width: 95%;
		+	/* max-width: 900px; */
		+	margin: 0 auto;
		+	table-layout: fixed;
		+	text-align: center;
		+	}
		+
		+	table.PartTable tr:first-of-type {
		+	border-bottom: 1px solid grey;
		+	}
		+
		+	table.PartTable tr:nth-child(even), table.ResultTable tr:nth-child(even) {
		+	background: rgba(255, 179, 117, 0.5);
		+	}
		+
		+	table.PartTable td, table.PartTable th, table.ResultTable td, table.ResultTable th {
		+	padding: 10px 5px;
		+	}
		+
		+	table.PartTable.primers td:nth-child(2) {
		+	word-break: break-all;
		+	}
		+
		+	table.ResultTable {
		+	text-align: left;
		+	}
		+
		+	/***********************************************************************************************************************************************************/
		+	/* Eventpage */
	.title {		.title {
	display: block;		display: block;
Line 371:		Line 1,384:
	-webkit-box-sizing: border-box;		-webkit-box-sizing: border-box;
	box-sizing: border-box;		box-sizing: border-box;
		+	}
		+
		+	.halfcircle {
		+	border-top-left-radius: 105px;
		+	border-bottom-left-radius: 105px;
		+	border-top-right-radius: 0;
		+	border-bottom-right-radius: 0;
	}		}
Line 381:		Line 1,401:
	height: 100px;		height: 100px;
	width: 100px;		width: 100px;
		+	}
		+
		+	.halfcircle.halflarge {
		+	height: 150px;
		+	width: 75px;
		+	}
		+
		+	.circle.halfcircle.circle1 {
		+	border-right: 0;
	}		}
Line 428:		Line 1,457:
	}		}
−	.circle.circle1 {	+	.parallaxCircles .circle.circle1 {
	top: 320px;		top: 320px;
−	right: -60px;	+	right: 0px;
	}		}
−	.circle.circle2 {	+	.parallaxCircles .circle.circle2 {
	top: 600px;		top: 600px;
	right: 170px;		right: 170px;
	}		}
−	.circle.circle3 {	+	.parallaxCircles .circle.circle3 {
	top: 150px;		top: 150px;
	right: 50px;		right: 50px;
	}		}
−	.circle.circle4 {	+	.parallaxCircles .circle.circle4 {
	top: 900px;		top: 900px;
	right: 50px;		right: 50px;
	}		}
−	.circle.circle5 {	+	.parallaxCircles .circle.circle5 {
	top: 650px;		top: 650px;
	right: 150px;		right: 150px;
	}		}
−	.circle.circle6 {	+	.parallaxCircles .circle.circle6 {
	top: 820px;		top: 820px;
	left: -40px;		left: -40px;
	}		}
−	.circle.circle7 {	+	.parallaxCircles .circle.circle7 {
	top: 300px;		top: 300px;
	left: 50px;		left: 50px;
	}		}
−	.circle.circle8 {	+	.parallaxCircles .circle.circle8 {
	top: 750px;		top: 750px;
	left: 150px;		left: 150px;
	}		}
−	.circle.circle9 {	+	.parallaxCircles .circle.circle9 {
	top: 850px;		top: 850px;
	left: 250px;		left: 250px;
	}		}
−	.circle.circle10 {	+	.parallaxCircles .circle.circle10 {
	top: 370px;		top: 370px;
	left: 120px;		left: 120px;
Line 509:		Line 1,538:
	opacity: 1;		opacity: 1;
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(4deg) translateY(-25px) scale(1);		-webkit-transform: rotate(4deg) translateY(-25px) scale(1);
Line 522:		Line 1,552:
	opacity: 1;		opacity: 1;
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(4deg) translateY(-25px) scale(1);		-webkit-transform: rotate(4deg) translateY(-25px) scale(1);
Line 535:		Line 1,566:
	opacity: 1;		opacity: 1;
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(-2deg) translateY(-30px) scale(1);		-webkit-transform: rotate(-2deg) translateY(-30px) scale(1);
Line 548:		Line 1,580:
	opacity: 1;		opacity: 1;
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(-2deg) translateY(-30px) scale(1);		-webkit-transform: rotate(-2deg) translateY(-30px) scale(1);
Line 563:		Line 1,596:
	filter: blur(10px);		filter: blur(10px);
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(0deg) translateY(-50px) scale(1);		-webkit-transform: rotate(0deg) translateY(-50px) scale(1);
Line 580:		Line 1,614:
	filter: blur(10px);		filter: blur(10px);
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(0deg) translateY(-50px) scale(1);		-webkit-transform: rotate(0deg) translateY(-50px) scale(1);
Line 590:		Line 1,625:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* Sponsorpage */		/* Sponsorpage */
−
	.SponsorFlexBox {		.SponsorFlexBox {
−	padding: 50px 0;	+	padding: 25px 0;
	display: -webkit-box;		display: -webkit-box;
	display: -ms-flexbox;		display: -ms-flexbox;
Line 626:		Line 1,659:
	.container-text.sponsorPossibility {		.container-text.sponsorPossibility {
	text-align: center;		text-align: center;
		+	text-align-last: center;
	}		}
−	/***********************************************************************************************************************************************************/	+	div.highlight {
		+	background: rgba(178, 176, 155, 0.5);
		+	margin: 25px auto 0;
		+	}
		+	/***********************************************************************************************************************************************************/
	/* Teampage */		/* Teampage */
−
	header.white-out {		header.white-out {
	position: relative;		position: relative;
Line 657:		Line 1,694:
	}		}
−	div.flexbox {	+	div.TeamFlexbox {
		+	display: -webkit-box;
		+	display: -ms-flexbox;
	display: flex;		display: flex;
		+	-webkit-box-orient: horizontal;
		+	-webkit-box-direction: normal;
		+	-ms-flex-flow: row wrap;
	flex-flow: row wrap;		flex-flow: row wrap;
		+	-webkit-box-pack: space-evenly;
		+	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;		justify-content: space-evenly;
		+	-webkit-box-align: center;
		+	-ms-flex-align: center;
	align-items: center;		align-items: center;
		+	-ms-flex-line-pack: center;
	align-content: center;		align-content: center;
	}		}
Line 707:		Line 1,754:
	top: 49%;		top: 49%;
	left: 48%;		left: 48%;
		+	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);		transform: translate(-50%, -50%);
	}		}
Line 717:		Line 1,765:
	h2.MemberName, p.MemberFunction {		h2.MemberName, p.MemberFunction {
	text-align: center;		text-align: center;
		+	text-align-last: center;
	padding: 0;		padding: 0;
	margin: 0;		margin: 0;
Line 727:		Line 1,776:
	.underlined {		.underlined {
	display: block;		display: block;
−	width: max-content;
	margin: auto;		margin: auto;
		+	padding: 0 20px;
		+	}
		+
		+	.underlined::after {
		+	content: "";
		+	display: block;
		+	margin: 0 auto;
	border-bottom: var(--main) solid 5px;		border-bottom: var(--main) solid 5px;
		+	padding-top: 5px;
		+	width: 825px;
	}		}
	/* Change colors of each circle/member */		/* Change colors of each circle/member */
−
	.TeamMemberBox:nth-child(8n+1) {		.TeamMemberBox:nth-child(8n+1) {
	color: var(--main);		color: var(--main);
Line 767:		Line 1,823:
	/* Change order of text-picture */		/* Change order of text-picture */
−
	.TeamMemberBox:nth-child(2n+1) .PicBox {		.TeamMemberBox:nth-child(2n+1) .PicBox {
	grid-row: 1;		grid-row: 1;
Line 785:		Line 1,840:
	/* Change config of icon */		/* Change config of icon */
−
	.TeamMemberBox:nth-child(4n+1) div.iconBox {		.TeamMemberBox:nth-child(4n+1) div.iconBox {
	right: -25px;		right: -25px;
Line 807:		Line 1,861:
	/* add some padding to the MemberDescription to align to the bottom/top */		/* add some padding to the MemberDescription to align to the bottom/top */
−
	.TeamMemberBox:nth-child(2n+1) .MemberDescription {		.TeamMemberBox:nth-child(2n+1) .MemberDescription {
		+	-ms-flex-item-align: start;
	align-self: start;		align-self: start;
	padding-top: 20px;		padding-top: 20px;
Line 814:		Line 1,868:
	.TeamMemberBox:nth-child(2n+2) .MemberDescription {		.TeamMemberBox:nth-child(2n+2) .MemberDescription {
		+	-ms-flex-item-align: end;
	align-self: end;		align-self: end;
	padding-bottom: 20px;		padding-bottom: 20px;
		+	}
		+
		+	.modal {
		+	position: fixed;
		+	width: 100vw;
		+	height: 100vh;
		+	left: 0;
		+	top: 0;
		+	display: none;
		+	opacity: 0;
		+	background: rgb(0, 0, 0);
		+	background: rgba(0, 0, 0, 0.5);
		+	z-index: 2000;
		+	-webkit-transition: all 0.5s;
		+	transition: all 0.5s;
		+	color: var(--blackish);
		+	}
		+
		+	span.close {
		+	position: absolute;
		+	right: 20px;
		+	top: 20px;
		+	font-size: 30px;
		+	color: #888;
		+	padding: 0 10px;
		+	}
		+
		+	span.close:hover, span.close:active {
		+	color: #444;
		+	cursor: pointer;
		+	}
		+
		+	.modalContent {
		+	background: var(--whiteish);
		+	width: 80%;
		+	max-width: 800px;
		+	height: 95vh;
		+	max-height: 711px;
		+	position: absolute;
		+	top: 0;
		+	bottom: 0;
		+	left: 0;
		+	right: 0;
		+	margin: auto;
		+	overflow: auto;
		+	padding: 20px;
		+	text-align: center;
		+	text-align-last: center;
		+	border-radius: 20px;
		+	-webkit-box-shadow: 1px 1px 20px 1px #222;
		+	box-shadow: 1px 1px 20px 1px #222;
		+	}
		+
		+	.ModalMemberName {
		+	font-family: Kopje;
		+	font-size: 1.5rem;
		+	width: 90%;
		+	margin: auto;
		+	}
		+
		+	div.separator {
		+	display: block;
		+	background: var(--main);
		+	width: 55%;
		+	min-width: 200px;
		+	height: 2px;
		+	margin: 5px auto 0;
		+	}
		+
		+	.ModalMemberFunction {
		+	font-size: 1.5rem;
		+	width: 90%;
		+	display: block;
		+	margin: 0 auto 10px;
		+	}
		+
		+	.CasualPic {
		+	width: 80%;
		+	max-width: 450px;
		+	margin: 20px auto;
		+	}
		+
		+	.CasualPic img {
		+	width: 100%;
		+	height: auto;
		+	}
		+
		+	.ModalStudy {
		+	font-family: Kopje;
		+	font-size: 1.1rem;
		+	}
		+
		+	.ModalDescription {
		+	width: 82%;
		+	margin: 10px auto;
		+	}
		+
		+	.ModalFunFact {
		+	font-style: italic;
		+	width: 82%;
		+	margin: auto;
		+	/* padding-bottom: 10px; */
		+	}
		+
		+	.TeamFlexbox.Members .PicBox, .TeamFlexbox.Members .MemberDescription {
		+	cursor: pointer;
	}		}
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
		+	div.CF {
		+	margin: 0px auto 50px;
		+	background: rgba(247, 247, 247, 0.9);
		+	border-radius: 50px;
		+	border: 1px solid #cecdc0;
		+	/* padding-bottom: 0; */
		+	}
−	/* Responsiveness*/	+	#Global div.CF p.crowdfundingtext, div.CF p.crowdfundingtext {
		+	font-size: 1.4rem;
		+	padding: 20px 50px 10px;
		+	}
−	/* Global */	+	#DonateButton {
		+	display: block;
		+	margin: 25px auto 0;
		+	width: -webkit-max-content;
		+	width: -moz-max-content;
		+	width: max-content;
		+	border: 2px solid var(--main);
		+	background: rgba(255, 179, 117, 0.4);
		+	border-radius: 15px;
		+	padding: 30px 25px;
		+	text-align: center;
		+	text-align-last: center;
		+	font-size: 35px;
		+	/* margin-top: 150px; */
		+	}
		+	/* static-dynamic switch */
		+	div.StatDynSwitch {
		+	position: fixed;
		+	display: block;
		+	bottom: 30px;
		+	right: 40px;
		+	}
		+
		+	.switch {
		+	position: relative;
		+	display: inline-block;
		+	width: 60px;
		+	height: 34px;
		+	margin: -10px 10px;
		+	}
		+
		+	.switch input {
		+	display: none
		+	}
		+
		+	.slider {
		+	position: absolute;
		+	cursor: pointer;
		+	top: 0;
		+	left: 0;
		+	right: 0;
		+	bottom: 0;
		+	background-color: var(--accent2);
		+	-webkit-transition: .4s;
		+	transition: .4s;
		+	-webkit-box-shadow: 0px 0px 5px #f7f7f7;
		+	box-shadow: 0px 0px 5px #f7f7f7;
		+	}
		+
		+	.slider:before {
		+	position: absolute;
		+	content: "";
		+	height: 26px;
		+	width: 26px;
		+	left: 4px;
		+	bottom: 4px;
		+	background-color: #f7f7f7;
		+	-webkit-transition: .4s;
		+	transition: .4s;
		+	}
		+
		+	input:checked+.slider {
		+	background-color: var(--accent3);
		+	}
		+
		+	input:checked+.slider:before {
		+	-webkit-transform: translateX(26px);
		+	transform: translateX(26px);
		+	}
		+
		+	.slider {
		+	border-radius: 34px;
		+	}
		+
		+	.slider:before {
		+	border-radius: 50%;
		+	}
		+
		+	.StatDynSwitch>span {
		+	display: inline-block;
		+	font-size: 20px;
		+	text-shadow: 0px 0px 5px #f7f7f7;
		+	}
		+
		+	/***********************************************************************************************************************************************************/
		+	/* InterLab */
		+	ul#DeviceList li {
		+	display: list-item;
		+	list-style-type: disc;
		+	list-style-position: inside;
		+	}
		+
		+	div.InterLabFigureBox {
		+	width: 80%;
		+	max-width: 600px;
		+	padding: 10px 0 25px;
		+	margin: auto;
		+	}
		+
		+	img.InterLabFigure {
		+	width: 100%;
		+	display: block;
		+	margin: auto;
		+	}
		+
		+	/***********************************************************************************************************************************************************/
		+	/* Featured */
		+	.FeaturedFlexbox {
		+	display: -webkit-box;
		+	display: -ms-flexbox;
		+	display: flex;
		+	-webkit-box-orient: horizontal;
		+	-webkit-box-direction: normal;
		+	-ms-flex-flow: row wrap;
		+	flex-flow: row wrap;
		+	-webkit-box-pack: space-evenly;
		+	-ms-flex-pack: space-evenly;
		+	justify-content: space-evenly;
		+	-webkit-box-align: center;
		+	-ms-flex-align: center;
		+	align-items: center;
		+	-ms-flex-line-pack: center;
		+	align-content: center;
		+	}
		+
		+	div.featuredBox {
		+	display: -webkit-box;
		+	display: -ms-flexbox;
		+	display: flex;
		+	-webkit-box-orient: vertical;
		+	-webkit-box-direction: normal;
		+	-ms-flex-direction: column;
		+	flex-direction: column;
		+	min-height: 0;
		+	margin: 50px 20px;
		+	min-width: 450px;
		+	width: 45%;
		+	max-width: 800px;
		+	height: 90vh;
		+	}
		+
		+	.Feature {
		+	display: -webkit-box;
		+	display: -ms-flexbox;
		+	display: flex;
		+	-webkit-box-orient: horizontal;
		+	-webkit-box-direction: normal;
		+	-ms-flex-direction: row;
		+	flex-direction: row;
		+	/* firefox correction */
		+	min-width: 0;
		+	-webkit-box-align: center;
		+	-ms-flex-align: center;
		+	align-items: center;
		+	min-height: -webkit-max-content;
		+	min-height: -moz-max-content;
		+	min-height: max-content;
		+	}
		+
		+	.Feature h3 {
		+	min-width: -webkit-max-content;
		+	min-width: -moz-max-content;
		+	min-width: max-content;
		+	padding: 0px 20px;
		+	}
		+
		+	.Feature h2 {
		+	padding: 0 20px;
		+	margin-left: auto;
		+	width: -webkit-max-content;
		+	width: -moz-max-content;
		+	width: max-content;
		+	}
		+
		+	div.ScrollBox {
		+	margin-top: 10px;
		+	display: inline-block;
		+	-webkit-box-flex: 1;
		+	-ms-flex-positive: 1;
		+	flex-grow: 1;
		+	max-height: -webkit-max-content;
		+	max-height: -moz-max-content;
		+	max-height: max-content;
		+	border: 2px solid var(--main);
		+	overflow-y: scroll;
		+	width: 100%;
		+	}
		+
		+	div.ScrollBox a img {
		+	width: 100%;
		+	margin-top: auto;
		+	}
		+
		+	div.ScrollBox a {
		+	display: block;
		+	}
		+
		+	/***********************************************************************************************************************************************************/
		+	/* Newsletter */
		+	/* correction */
		+	.collapsibleContent div {
		+	line-height: 150%;
		+	}
		+
		+	table {
		+	background: none;
		+	}
		+
		+	/* other styling for Newsletter */
		+	.popout {
		+	display: block;
		+	width: 80%;
		+	max-width: 900px;
		+	margin: 15px auto;
		+	position: relative;
		+	z-index: 10;
		+	-webkit-transition: all 0s;
		+	transition: all 0s;
		+	}
		+
		+	.popout:last-of-type, .popout.protocols:last-of-type, .popout.chapter:last-of-type {
		+	margin-bottom: 75px;
		+	}
		+
		+	.popout.revealed {
		+	background: #fdfdfd;
		+	margin: 30px auto;
		+	-webkit-box-shadow: 2px 2px 15px 0px gray;
		+	box-shadow: 2px 2px 15px 0px gray;
		+	padding-bottom: 20px;
		+	-webkit-transition: all 0.7s;
		+	transition: all 0.7s;
		+	}
		+
		+	.popout.revealed .collapsibleContent {
		+	padding: 20px 75px 0px;
		+	opacity: 1;
		+	}
		+
		+	.collapsible {
		+	display: block;
		+	text-align: center;
		+	text-align-last: center;
		+	font-family: Body;
		+	font-size: 50px;
		+	padding: 17px 50px;
		+	width: 100%;
		+	position: relative;
		+	z-index: 15;
		+	color: rgb(235, 235, 235);
		+	}
		+
		+	.collapsible::before {
		+	position: absolute;
		+	content: '';
		+	top: 0;
		+	left: 0;
		+	height: 100%;
		+	width: 10px;
		+	background: var(--accent2);
		+	-webkit-transition: all 0.2s ease-in-out;
		+	transition: all 0.2s ease-in-out;
		+	z-index: 11;
		+	}
		+
		+	.collapsible::after {
		+	position: absolute;
		+	content: '';
		+	top: 0;
		+	left: 0;
		+	right: 0;
		+	width: 100%;
		+	background: var(--accent1);
		+	height: 100%;
		+	z-index: -1;
		+	}
		+
		+	.collapsible:hover {
		+	cursor: pointer;
		+	}
		+
		+	.collapsible:hover::before {
		+	width: 50px;
		+	}
		+
		+	.collapsibleContent {
		+	position: relative;
		+	max-height: 0;
		+	overflow-y: hidden;
		+	margin: auto;
		+	padding: 0px 75px 0;
		+	-webkit-transition: all 0s;
		+	transition: all 0s;
		+	opacity: 0;
		+	}
		+
		+	.collapsibleContent.revealed {
		+	-webkit-transition: all 0.7s;
		+	transition: all 0.7s;
		+	}
		+
		+	/***********************************************************************************************************************************************************/
		+	/* Attributions */
		+	li.description {
		+	margin-bottom: 15px;
		+	font-style: italic;
		+	padding-left: 12px;
		+	/* font-size: 0.95rem; */
		+	}
		+
		+	h2.SubSectionTitle {
		+	margin-top: 10px;
		+	}
		+
		+	ul.bullet li {
		+	list-style-type: disc;
		+	display: list-item;
		+	list-style-position: inside;
		+	}
		+
		+	ul.bullet li.description {
		+	padding-left: 37px;
		+	list-style-type: none;
		+	}
		+
		+	ul.bullet li ul {
		+	-webkit-padding-start: 40px;
		+	padding-inline-start: 40px;
		+	}
		+
		+	ul.dashed li {
		+	list-style-type: none;
		+	display: list-item;
		+	list-style-position: inside;
		+	padding-bottom: 10px;
		+	padding-left: 25px;
		+	text-indent: -25px;
		+	}
		+
		+	ul.dashed li::before {
		+	content: '-';
		+	margin-right: 20px
		+	}
		+
		+	.popout p, .projectDescription p, #Global .popout p, #Global .projectDescription p {
		+	padding: 10px 0;
		+	}
		+
		+	/* .popout ul {
		+	padding-bottom: 20px;
		+	} */
		+	/***********************************************************************************************************************************************************/
		+	/* Protocols */
		+	.popout.protocols {
		+	margin: 5px auto;
		+	-webkit-transition: all 0.4s;
		+	transition: all 0.4s;
		+	}
		+
		+	.popout.protocols.revealed {
		+	max-width: 930px;
		+	margin: 15px auto;
		+	}
		+
		+	.popout.protocols .collapsible {
		+	font-size: 30px;
		+	}
		+
		+	.popout.protocols .collapsibleContent.revealed {
		+	-webkit-transition: all 0.4s;
		+	transition: all 0.4s;
		+	}
		+
		+	ol li {
		+	display: list-item;
		+	padding-left: 15px;
		+	}
		+
		+	ol {
		+	padding-left: 20px;
		+	}
		+
		+	ul.indented li {
		+	padding-left: 5px;
		+	list-style-position: inside;
		+	display: list-item;
		+	list-style-type: disc;
		+	}
		+
		+	ul.indented li span.indent {
		+	padding-left: 10px;
		+	}
		+
		+	.protocols table {
		+	margin: 10px 0 10px 13px;
		+	}
		+
		+	.protocols th {
		+	text-align: left;
		+	}
		+
		+	table .top {
		+	vertical-align: top;
		+	}
		+
		+	.protocols table tr th:first-child, .protocols table tr td:first-child {
		+	padding-right: 20px;
		+	}
		+
		+	/***********************************************************************************************************************************************************/
		+	/* Model */
		+	.popout.chapter {
		+	margin: 5px auto;
		+	-webkit-transition: all 0.6s;
		+	transition: all 0.6s;
		+	text-align: justify;
		+	}
		+
		+	.popout.chapter.revealed {
		+	max-width: 930px;
		+	margin: 15px auto;
		+	}
		+
		+	.popout.chapter .collapsible {
		+	font-size: 35px;
		+	}
		+
		+	.popout.chapter .collapsibleContent.revealed {
		+	-webkit-transition: all 0.6s;
		+	transition: all 0.6s;
		+	overflow-x: hidden;
		+	}
		+
		+	span.eq span.katex-display {
		+	/* margin-bottom: 25px; */
		+	}
		+
		+	span.inline-eq {
		+	font-size: 0.9em;
		+	}
		+
		+	div#plot1 {
		+	height: 500px;
		+	margin: 0 auto;
		+	}
		+
		+	figure.resultfig {
		+	width: 100%;
		+	margin: 40px auto;
		+	padding: 0 40px;
		+	overflow-y: hidden;
		+	}
		+
		+	figure.resultfig.vertical {
		+	width: 50%;
		+	}
		+
		+	figure.resultfig.horizontal {
		+	width: 80%;
		+	}
		+
		+	figure.resultfig.wide {
		+	padding: 0;
		+	}
		+
		+	figure.resultfig img {
		+	width: 100%;
		+	}
		+
		+	figure#realisationPic {
		+	position: relative;
		+	width: 100%;
		+	height: 400px;
		+	overflow-x: auto;
		+	background-image:
		+	-webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(70%, #fdfdfd)),
		+	-webkit-gradient(linear, right top, left top, color-stop(30%, #fdfdfd), to(rgba(255, 255, 255, 0))),
		+	radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), rgba(255, 255, 255, 0)),
		+	radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(255, 255, 255, 0));
		+	background-image:
		+	linear-gradient(to left, rgba(255, 255, 255, 0), #fdfdfd 70%),
		+	linear-gradient(to left, #fdfdfd 30%, rgba(255, 255, 255, 0)),
		+	radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), rgba(255, 255, 255, 0)),
		+	radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(255, 255, 255, 0));
		+	background-position: 0 50%, 100% 50%, 0 50%, 100% 50%;
		+	background-repeat: no-repeat;
		+	background-color: #fdfdfd;
		+	background-size: 50px 400px, 50px 400px, 15px 400px, 15px 400px;
		+	background-attachment: local, local, scroll, scroll;
		+	}
		+
		+	figure#realisationPic>img {
		+	height: 100%;
		+	width: auto;
		+	}
		+
		+	div.FigFlexbox {
		+	display: -webkit-box;
		+	display: -ms-flexbox;
		+	display: flex;
		+	-webkit-box-orient: horizontal;
		+	-webkit-box-direction: normal;
		+	-ms-flex-flow: row wrap;
		+	flex-flow: row wrap;
		+	-webkit-box-pack: center;
		+	-ms-flex-pack: center;
		+	justify-content: center;
		+	}
		+
		+	.FigFlexbox .flexfig {
		+	width: 50%;
		+	}
		+
		+	.FigFlexbox .flexfig.smallSize {
		+	width: 50%;
		+	min-width: 200px;
		+	max-width: 259px;
		+	}
		+
		+	.FigFlexbox .flexText {
		+	width: 50%;
		+	min-width: 250px;
		+	}
		+
		+	.FigFlexbox .flexText {
		+	padding: 0 10px;
		+	border-bottom: 1px solid grey;
		+	}
		+
		+	figcaption, caption {
		+	font-size: 0.8em;
		+	text-align: justify;
		+	padding-top: 10px;
		+	}
		+
		+	table caption {
		+	padding-bottom: 10px;
		+	padding-top: 0;
		+	}
		+
		+	figcaption b, caption b {
		+	font-family: Kopje;
		+	}
		+
		+	figure div.plot-container.plotly div.svg-container {
		+	margin-top: -70px;
		+	}
		+
		+	/***********************************************************************************************************************************************************/
		+	/* Custom-made igem icons */
		+	.icon {
		+	/* use !important to prevent issues with browser extensions that change fonts */
		+	font-family: 'iGEMLeidenIcons' !important;
		+	speak: none;
		+	display: inline-block;
		+	font-style: normal;
		+	font-weight: normal;
		+	font-variant: normal;
		+	text-transform: none;
		+	line-height: 1;
		+	/* Better Font Rendering =========== */
		+	-webkit-font-smoothing: antialiased;
		+	-moz-osx-font-smoothing: grayscale;
		+	}
		+
		+	.icon.Applied-design:before {
		+	content: "\e90a";
		+	}
		+
		+	.icon.Attributions:before {
		+	content: "\e900";
		+	}
		+
		+	.icon.Demonstration:before {
		+	content: "\e901";
		+	}
		+
		+	.icon.Entrepreneurship:before {
		+	content: "\e902";
		+	}
		+
		+	.icon.Home-iGEM:before {
		+	content: "\e903";
		+	}
		+
		+	.icon.Model:before {
		+	content: "\e904";
		+	}
		+
		+	.icon.Notebook:before {
		+	content: "\e905";
		+	}
		+
		+	.icon.PE-E:before {
		+	content: "\e906";
		+	}
		+
		+	.icon.Project-description:before {
		+	content: "\e907";
		+	}
		+
		+	.icon.Protocols:before {
		+	content: "\e908";
		+	}
		+
		+	.icon.Results:before {
		+	content: "\e909";
		+	}
		+
		+	/***********************************************************************************************************************************************************/
		+	/* Responsiveness*/
		+	/* Global */
	@media (max-width: 768px) {		@media (max-width: 768px) {
		+	#loader-wrapper #BestOnLargeScreens {
		+	display: block;
		+	}
		+
		+	#loader-wrapper #BadonEdge {
		+	display: none;
		+	}
		+
	body, #body {		body, #body {
	font-size: calc(100vw * 0.0058 + 12.5292px);		font-size: calc(100vw * 0.0058 + 12.5292px);
	}		}
		+
	.container {		.container {
	width: 100%;		width: 100%;
	padding: 0 20px;		padding: 0 20px;
		+	}
		+
		+	.NavBlockIcon {
		+	font-size: 30px;
		+	top: 10%;
		+	}
		+
		+	.NavBlock .NavBlockText {
		+	opacity: 1;
		+	top: 0px;
	}		}
	}		}
Line 846:		Line 2,647:
	margin: auto;		margin: auto;
	}		}
		+
	div#UnderTitle {		div#UnderTitle {
	font-size: calc(100vw * 0.0288 + 1.437px);		font-size: calc(100vw * 0.0288 + 1.437px);
	width: 90%;		width: 90%;
−	margin: auto;
−	padding: 0;
−	}
−	}
−
−	/* Homepage */
−
−	@media (max-width: 470px) {
−	div#Fsos {
−	font-size: 35px;
−	width: 95%;
−	margin: auto;
−	}
−	div#UnderTitle {
−	font-size: 15px;
−	width: 95%;
	margin: auto;		margin: auto;
	padding: 0;		padding: 0;
Line 871:		Line 2,657:
	/* Eventpage */		/* Eventpage */
−
	@media (max-width:768px) {		@media (max-width:768px) {
	.card {		.card {
	width: 95%;		width: 95%;
	}		}
		+
	.card:first-child {		.card:first-child {
	margin-top: 20px;		margin-top: 20px;
	}		}
		+
	.card:nth-child(3n+1) {		.card:nth-child(3n+1) {
	-webkit-transform: rotate(0) translateY(0);		-webkit-transform: rotate(0) translateY(0);
Line 887:		Line 2,674:
	animation: none;		animation: none;
	}		}
		+
	.card:nth-child(3n+2) {		.card:nth-child(3n+2) {
	-webkit-transform: rotate(0) translateY(0);		-webkit-transform: rotate(0) translateY(0);
Line 895:		Line 2,683:
	animation: none;		animation: none;
	}		}
		+
	.card:nth-child(3n+0) {		.card:nth-child(3n+0) {
	-webkit-transform: translateY(0);		-webkit-transform: translateY(0);
Line 903:		Line 2,692:
	animation: none;		animation: none;
	}		}
		+
	.cardtextfull {		.cardtextfull {
	grid-column: 1;		grid-column: 1;
	}		}
		+
	.title {		.title {
	grid-column: 1;		grid-column: 1;
	grid-row: 1;		grid-row: 1;
	}		}
		+
	.images {		.images {
	grid-row: 3;		grid-row: 3;
	}		}
		+
	.images.special {		.images.special {
	grid-row: 4;		grid-row: 4;
	}		}
		+
	.cardcontent {		.cardcontent {
	grid-row: 2;		grid-row: 2;
	}		}
−	.circle {	+
−	display: block;	+	.parallaxCircles.circle {
		+	display: none;
	}		}
	}		}
Line 932:		Line 2,727:
	z-index: 99;		z-index: 99;
	}		}
		+
	.card.links:nth-child(3n+2) img:hover {		.card.links:nth-child(3n+2) img:hover {
	-webkit-transform: scale(1.7) rotate(2deg) translateX(100px);		-webkit-transform: scale(1.7) rotate(2deg) translateX(100px);
Line 939:		Line 2,735:
	z-index: 99;		z-index: 99;
	}		}
		+
	.card.links:nth-child(3n+0) img:hover {		.card.links:nth-child(3n+0) img:hover {
	-webkit-transform: scale(1.7) translateX(100px);		-webkit-transform: scale(1.7) translateX(100px);
Line 946:		Line 2,743:
	z-index: 99;		z-index: 99;
	}		}
		+
	.card.rechts:nth-child(3n+1) img:hover {		.card.rechts:nth-child(3n+1) img:hover {
	-webkit-transform: scale(1.7) rotate(-4deg) translateX(-100px);		-webkit-transform: scale(1.7) rotate(-4deg) translateX(-100px);
Line 953:		Line 2,751:
	z-index: 99;		z-index: 99;
	}		}
		+
	.card.rechts:nth-child(3n+2) img:hover {		.card.rechts:nth-child(3n+2) img:hover {
	-webkit-transform: scale(1.7) rotate(2deg) translateX(-100px);		-webkit-transform: scale(1.7) rotate(2deg) translateX(-100px);
Line 960:		Line 2,759:
	z-index: 99;		z-index: 99;
	}		}
		+
	.card.rechts:nth-child(3n+0) img:hover {		.card.rechts:nth-child(3n+0) img:hover {
	-webkit-transform: scale(1.7) translateX(-100px);		-webkit-transform: scale(1.7) translateX(-100px);
Line 970:		Line 2,770:
	/**************** sponsorpage *********************/		/**************** sponsorpage *********************/
−
	@media (max-width:849px) {		@media (max-width:849px) {
	.SponsorFlexBox {		.SponsorFlexBox {
	padding: 20px 0;		padding: 20px 0;
	}		}
		+
	a.sponsor {		a.sponsor {
	margin: 20px 10px;		margin: 20px 10px;
	}		}
		+
	img.sponsorLogo {		img.sponsorLogo {
	width: 60vw;		width: 60vw;
Line 984:		Line 2,785:
	/**************** teampage *********************/		/**************** teampage *********************/
		+	@media (max-width:1083px) {
		+	.underlined::after {
		+	width: 615px;
		+	}
		+	}
		+
		+	@media (max-width:673px) {
		+	.underlined::after {
		+	width: 500px;
		+	}
		+	}
		+
		+	@media (max-width:549px) {
		+	.underlined::after {
		+	width: 90%;
		+	}
		+	}
		+
		+	@media (max-width:421px) {
		+	.underlined::after {
		+	width: 270px;
		+	}
		+	}
	@media (max-width:768px) {		@media (max-width:768px) {
Line 989:		Line 2,813:
	content: url("https://static.igem.org/mediawiki/2018/0/04/T--Leiden--group_cropped_square.jpg")		content: url("https://static.igem.org/mediawiki/2018/0/04/T--Leiden--group_cropped_square.jpg")
	}		}
		+
	.TeamMemberBox:nth-child(2n+2) .PicBox {		.TeamMemberBox:nth-child(2n+2) .PicBox {
	grid-row: 1;		grid-row: 1;
	}		}
		+
	.TeamMemberBox:nth-child(2n+2) .MemberDescription {		.TeamMemberBox:nth-child(2n+2) .MemberDescription {
	grid-row: 2;		grid-row: 2;
	}		}
		+
	.TeamMemberBox:nth-child(2n+1) .MemberDescription {		.TeamMemberBox:nth-child(2n+1) .MemberDescription {
		+	-ms-flex-item-align: start;
	align-self: start;		align-self: start;
	padding-top: 15px;		padding-top: 15px;
	}		}
		+
	.TeamMemberBox:nth-child(2n+2) .MemberDescription {		.TeamMemberBox:nth-child(2n+2) .MemberDescription {
		+	-ms-flex-item-align: start;
	align-self: start;		align-self: start;
	padding-top: 15px;		padding-top: 15px;
	}		}
		+
	.TeamMemberBox {		.TeamMemberBox {
	margin: 30px 0;		margin: 30px 0;
	height: auto;		height: auto;
	}		}
		+
		+	.modalContent {
		+	width: calc(100% - 40px);
		+	height: calc(100% - 40px);
		+	border-radius: 10px;
		+	max-height: none;
		+	margin: 20px;
		+	}
		+	}
		+
		+	@media (max-width:425px) {
		+	.modalContent {
		+	width: 100%;
		+	height: 100%;
		+	border-radius: 0;
		+	margin: 0;
		+	}
		+
		+	.ModalFunFact {
		+	padding-bottom: 5px;
		+	}
		+
		+	span.close {
		+	right: 10px;
		+	top: 10px;
		+	}
		+	}
		+
		+	/**************** crowdfundingpage *********************/
		+	@media (max-width:768px) {
		+	#excessive {
		+	display: none;
		+	}
		+
		+	div.bubbles span.circle.right, div.bubbles span.circle.left {
		+	-webkit-animation: none;
		+	animation: none;
		+	display: none;
		+	}
		+	}
		+
		+	@media (max-width:450px) {
		+	.countdown {
		+	display: block;
		+	width: 200px;
		+	margin: auto;
		+	}
		+
		+	#DonateButton {
		+	margin-top: 0px;
		+	}
		+	}
		+
		+	/**************** InterLab *********************/
		+	@media (max-width: 768px) {
		+	div.InterLabFigureBox {
		+	width: 100%;
		+	}
		+	}
		+
		+	/**************** Featured *********************/
		+	@media (max-width: 1000px) {
		+	div.featuredBox {
		+	width: 70%;
		+	}
		+	}
		+
		+	@media (max-width: 768px) {
		+	div.featuredBox {
		+	width: 90%;
		+	min-width: inherit;
		+	margin: 15px 0;
		+	}
		+
		+	.Feature {
		+	-webkit-box-orient: vertical;
		+	-webkit-box-direction: normal;
		+	-ms-flex-direction: column;
		+	flex-direction: column;
		+	}
		+
		+	.Feature h2 {
		+	width: auto;
		+	text-align: center;
		+	margin-left: 0;
		+	}
		+	}
		+
		+	/**************** Newsletter *********************/
		+	@media (max-width: 768px) {
		+	.collapsibleContent {
		+	padding: 0px 20px;
		+	}
		+
		+	.popout.revealed .collapsibleContent {
		+	padding: 20px;
		+	}
		+
		+	.popout.revealed {
		+	padding: 0;
		+	}
		+
		+	.collapsible {
		+	font-size: 35px;
		+	}
		+
		+	.popout {
		+	width: 90%;
		+	}
		+
		+	/* .collapsible::before {
		+	height: 100%;
		+	} */
		+	}
		+
		+	@media (max-width: 425px) {
		+	.popout.revealed .collapsibleContent {
		+	padding: 20px;
		+	padding-top: 20px;
		+	}
		+
		+	.popout, .popout.chapter, .popout.protocols {
		+	width: calc(100vw - 40px);
		+	margin-left: 20px;
		+	margin-right: 20px;
		+	}
		+	}
		+
		+	/**************** Model *********************/
		+	@media (max-width: 950px) {
		+	.FigFlexbox .flexfig {
		+	width: 400px;
		+	}
		+
		+	.FigFlexbox .flexfig.smallSize {
		+	width: 80%;
		+	max-width: none;
		+	}
		+
		+	figure.resultfig {
		+	width: 100%;
		+	margin: 40px auto;
		+	padding: 0;
		+	overflow-y: hidden;
		+	}
		+	}
		+
		+	/**************** Timeline *********************/
		+	@media (max-width: 768px) {
		+	figure.resultfig.vertical {
		+	width: 60%;
		+	}
		+
		+	figure.resultfig.horizontal {
		+	width: 90%;
		+	}
		+
		+	.timeline li.timelineUnit {
		+	margin-top: -5px;
		+	padding-bottom: 50px;
		+	}
		+
		+	.timeline li.timelineUnit .timelineContent {
		+	width: calc(95% - 50px);
		+	}
		+
		+	.timelineUnit.right .timelineContent, .timelineUnit.left .timelineContent {
		+	left: calc(5% + 70px)
		+	}
		+
		+	.timeline li.timelineUnit.right .timelineContent.revealed, .timeline li.timelineUnit.left .timelineContent.revealed {
		+	left: calc(5% + 50px);
		+	right: auto;
		+	opacity: 1;
		+	}
		+
		+	.left .timelineContent .title {
		+	border-radius: 0 20px 0 0;
		+	}
		+
		+	.timeline li.timelineUnit .linesegment {
		+	position: absolute;
		+	display: block;
		+	width: 8px;
		+	top: 0;
		+	bottom: 0;
		+	background: var(--main);
		+	border-radius: 4px;
		+	}
		+
		+	.timeline li.timelineUnit.left .linesegment, .timeline li.timelineUnit.right .linesegment {
		+	left: calc(5% - 4px);
		+	right: auto;
		+	}
		+
		+	.timeline li.timelineUnit.left i.iHPicon, .timeline li.timelineUnit.right i.iHPicon {
		+	left: 5%;
		+	right: auto;
		+	-webkit-transform: translateX(-50%);
		+	transform: translateX(-50%);
		+	}
		+
		+	.timeline li.timelineUnit.right .arrow, .timeline li.timelineUnit.left .arrow {
		+	right: 100%;
		+	left: auto;
		+	border-radius: 100% 0 0 0;
		+	}
		+
		+	.link.LeftRight1, .link.LeftRight2, .link.RightLeft1, .link.RightLeft2 {
		+	display: none;
		+	}
		+
		+	.timeline li.timelineUnit.semiconclusion.left .arrow {
		+	border-top: 0;
		+	border-bottom: 42px solid var(--main);
		+	border-radius: 0 0 0 100%;
		+	}
		+
		+	/* .timeline li.timelineUnit.semiconclusion.left .arrow {
		+	border-top: 0;
		+	border-bottom: 42px solid var(--main);
		+	border-radius: 0 0 100% 0;
		+	} */
		+	.timeline li.link.LeftMid1, .timeline li.link.RightMid1 {
		+	width: calc(25% + 4px);
		+	border-width: 0 0 8px 8px;
		+	left: calc(5% - 4px);
		+	-webkit-transform: skewY(10deg);
		+	transform: skewY(10deg);
		+	-webkit-transform-origin: 100% 0;
		+	transform-origin: 100% 0;
		+	border-radius: 0 0 0 30px;
		+	margin-top: 4px;
		+	}
		+
		+	.timeline li.link.LeftMid2, .timeline li.link.RightMid2 {
		+	width: calc(20% + 5px);
		+	margin-top: -8px;
		+	margin-bottom: 5px;
		+	border-width: 8px 8px 0 0;
		+	left: calc(30% - 0px);
		+	-webkit-transform: skewY(10deg);
		+	transform: skewY(10deg);
		+	-webkit-transform-origin: 0 0;
		+	transform-origin: 0 0;
		+	border-radius: 0 30px 0 0;
		+	}
		+
		+	.timeline li.link.MidLeft1, .timeline li.link.MidRight1 {
		+	width: calc(20% + 4px);
		+	border-width: 0 8px 8px 0px;
		+	left: calc(30% + 1px);
		+	-webkit-transform: skewY(-10deg);
		+	transform: skewY(-10deg);
		+	-webkit-transform-origin: 0 100%;
		+	transform-origin: 0 100%;
		+	border-radius: 0 0 30px 0;
		+	margin-top: 4px;
		+	}
		+
		+	.timeline li.link.MidLeft2, .timeline li.link.MidRight2 {
		+	width: calc(25% + 5px);
		+	margin-top: -8px;
		+	margin-bottom: 0px;
		+	border-width: 8px 0 0 8px;
		+	left: calc(5% - 4px);
		+	-webkit-transform: skewY(-10deg);
		+	transform: skewY(-10deg);
		+	-webkit-transform-origin: 100% 0;
		+	transform-origin: 100% 0;
		+	border-radius: 30px 0 0 0;
		+	}
		+
		+	.popout .PicCaroussel.vertical {
		+	width: 60%;
		+	}
		+
		+	.popout .PicCaroussel.horizontal {
		+	width: 100%;
		+	}
		+	}
		+
		+	.AchievementBox1 {
		+	height: 290px;
		+	width: 290px;
		+	background-color: var(--whiteish);
		+	border: 20px solid currentColor;
		+	border-radius: 50%;
		+	position: relative;
		+	margin: 25px;
		+	padding:10px;
		+	}
		+
		+	.Achievement {
		+	width: 100%;
		+	height: 100%;
		+	}
		+
		+	.AchievementBox1:nth-child(5n+1) {
		+	color: var(--main);
		+	}
		+	.AchievementBox1:nth-child(5n+2) {
		+	color: var(--accent1);
		+	}
		+	.AchievementBox1:nth-child(5n+3) {
		+	color: var(--accent2);
		+	}
		+	.AchievementBox1:nth-child(5n+4) {
		+	color: var(--accent3);
		+	}
		+	.AchievementBox1:nth-child(5n+5) {
		+	color: var(--accent4);
		+	}
		+	.AchievementBox1  p {
		+	display: block;
		+	position: relative;
		+	top: 50%;
		+	transform: translateY(-50%);
		+	text-align: center;
		+	color: var(--blackish);
		+	font-size: 25px;
		+
		+	}
		+	.AchievementBox1:nth-child(4n+1) div.iconBox {
		+	right: -15px;
		+	bottom: -15px;
		+	}
		+
		+	.AchievementBox1:nth-child(4n+2) div.iconBox {
		+	top: -15px;
		+	left: -15px;
		+	}
		+
		+	.AchievementBox1:nth-child(4n+3) div.iconBox {
		+	bottom: -15px;
		+	left: -15px;
		+	}
		+
		+	.AchievementBox1:nth-child(4n+4) div.iconBox {
		+	top: -15px;
		+	right: -15px;
		+	}
		+
		+	.padding-top {
		+	padding-top:20px;
		+	}
		+
		+	@media (max-width: 420px) {
		+	.padding-top{
		+	padding-top:0;
		+	}
		+	.AchievementBox1{
		+	width:240px;
		+	height:240px;
		+	margin-left:0;
		+	margin-right:0;
		+	}
		+	.AchievementBox1 p {
		+	font-size:20px;
		+	}
		+	.AchievementBox1:nth-child(4n+1) div.iconBox {
		+	right: -25px;
		+	bottom: -25px;
		+	}
		+
		+	.AchievementBox1:nth-child(4n+2) div.iconBox {
		+	top: -25px;
		+	left: -25px;
		+	}
		+
		+	.AchievementBox1:nth-child(4n+3) div.iconBox {
		+	bottom: -25px;
		+	left: -25px;
		+	}
		+
		+	.AchievementBox1:nth-child(4n+4) div.iconBox {
		+	top: -25px;
		+	right: -25px;
		+	}
	}		}

---

Latest revision as of 23:30, 8 November 2018

root {

 --whiteish: #F7F7F7;
 --blackish: #111;
 --main: #FFB375;
 --main_darker: #FFA666;
 --accent1: #456990;
 --accent2: #49BEAA;
 --accent3: #49DCB1;
 --background: #D3D1BE;
 --accent4: #B2B09B;
 --accentRed: #F86767;
 --accentCyan: #5FC8D8;

}

@font-face {

 font-family: ProjectTitle;
 src: url('https://static.igem.org/mediawiki/2018/b/b7/T--Leiden--copperplatelightssilight.ttf');
 /* src: url('../webfonts/copperplatelightssilight.ttf'); */

}

@font-face {

 font-family: UnderTitle;
 src: url('https://static.igem.org/mediawiki/2018/d/d6/T--Leiden--YuGothicLight.ttf');
 /* src: url('../webfonts/YuGothic-Light-reduced.ttf'); */

}

@font-face {

 font-family: Kopje;
 src: url('https://static.igem.org/mediawiki/2018/c/ca/T--Leiden--Roboto-Medium.ttf');
 /* src: url('../webfonts/Roboto-Medium.ttf'); */
 font-weight: bold;

}

@font-face {

 font-family: Body;
 src: url('https://static.igem.org/mediawiki/2018/0/0d/T--Leiden--Roboto-Light.ttf');
 /* src: url('../webfonts/Roboto-Light.ttf'); */

}

@font-face {

 font-family: Body;
 src: url('https://static.igem.org/mediawiki/2018/b/bb/T--Leiden--Roboto-LightItalic.ttf');
 /* src: url('../webfonts/Roboto-LightItalic.ttf'); */
 font-style: italic;

}

@font-face {

 font-family: 'iGEMLeidenIcons';
 src: url('https://static.igem.org/mediawiki/2018/5/54/T--Leiden--iGEMLeidenIcons.eot?43u2u1');
 /* src: url('../webfonts/iGEMLeidenIcons.eot?43u2u1'); */
 src: url('https://static.igem.org/mediawiki/2018/5/54/T--Leiden--iGEMLeidenIcons.eot?43u2u1#iefix') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2018/e/e4/T--Leiden--iGEMLeidenIconsttf.ttf?43u2u1') format('truetype'), url('https://static.igem.org/mediawiki/2018/8/89/T--Leiden--iGEMLeidenIconswoff.woff?43u2u1') format('woff'), url('https://static.igem.org/mediawiki/2018/d/d1/T--Leiden--iGEMLeidenIconssvg.svg') format('svg');
 /* src: url('../webfonts/iGEMLeidenIcons.eot?43u2u1#iefix') format('embedded-opentype'), url('../webfonts/iGEMLeidenIcons.ttf?43u2u1') format('truetype'), url('../webfonts/iGEMLeidenIcons.woff?43u2u1') format('woff'), url('../webfonts/iGEMLeidenIcons.svg?43u2u1#iGEMLeidenIcons') format('svg'); */
 font-weight: normal;
 font-style: normal;

}

/* Correct iGEM shit... */

1. Global p, p {

 padding: 0;
 padding-bottom: 5px;
 margin: 0px;
 line-height: 1.4;
 position: relative;
 z-index: 50;

}

1. Global p.meta {

 padding: 0;
 margin: 0;

}

1. globalWrapper {

 font-size: 100%;
 padding: 0;

}

1. top_menu_under, #top_menu_14, #top_menu_inside {

 -webkit-box-sizing: content-box;
 box-sizing: content-box;

}

1. top_menu_under {

 height: 0px;

}

a[href ^="https://"] {

 padding: 0;

}

1. top_menu_inside ul a, #top_menu_inside ul li.has_submenu {

 line-height: 1.5em;

}

1. globalWrapper #content #top_title div.logo_2018 a img {

 content: url('https://static.igem.org/mediawiki/2018/c/c8/T--Leiden--LogoLeidenV1.png')

}

/***********************************************************************************************************************************************************/ /* Global styles */ sup, sub {

 font-size: 60%;

}

b, #body b {

 font-family: Kopje;

}

b.highlightBlue {

 color: var(--accent1);

}

b.highlightOrange {

 color: var(--main);

}

h1, h2, h3, h4, h5, h6 {

 font-family: Kopje, sans-serif;
 margin: 0;
 padding: 0;
 padding-top: 15px;
 border: none;
 font-weight: bold;
 overflow: visible;

}

h1.SectionTitle {

 font-size: 3rem;
 z-index: 50;
 position: relative;
 padding-top: 60px;

}

h2.SectionTitle {

 font-size: 2.4rem;

}

.container-text h1.SectionTitle {

 text-align: left;

}

h1 {

 font-size: 2rem;

}

h2 {

 font-size: 1.5rem;

}

h3 {

 font-size: 1.17rem;

}

h4 {

 font-size: 1.12rem;

}

h5 {

 font-size: .83rem;

}

h6 {

 font-size: .75rem;

}

.submenu div {

 line-height: 1.5em;

}

body, #body {

 /* target body and the alternative body tag in iGEM terms (see Javascript-script) */
 width: 100%;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 padding: 0;
 margin: 0;
 line-height: normal;
 position: absolute;
 top: 9px;
 background-color: var(--whiteish);
 font-size: 17px;
 color: var(--blackish);
 font-family: Body, sans-serif;
 z-index: -5;

}

ul li, ul {

 margin: 0;
 line-height: normal;
 list-style-type: none;
 list-style-image: none;
 display: block;

}

• {

 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 text-decoration: none;
 line-height: normal;

}

.container {

 width: 80%;
 margin: auto;

}

.container-text {

 width: 80%;
 max-width: 800px;
 margin: auto;
 padding: 60px 0 40px 0;
 text-align: justify;
 text-align-last: start;

}

a, a:active, a:visited, a:hover {

 color: inherit;
 text-decoration: none;

}

a.colouredlink, span.colouredlink {

 color: var(--main);
 font-family: Kopje;
 cursor: pointer;

}

a.colouredlink.Blue {

 color: var(--accent1);

}

a.wrap {

 display: block;

}

code {

 text-align: left;
 display: block;
 padding-left: 20px;

}

.hidden {

 display: none;

}

/* References */ .smaller {

 font-size: 0.75em;

}

.popout .refs p, .refs p, .projectDescription .refs p {

 padding: 0 0 5px 0;

}

.center {

 text-align: center;
 text-align-last: center;

}

.caption {

 font-size: 0.9em;
 text-align: justify;

}

span.grouped {

 display: inline-block;
 position: relative;

}

/* Custom scrollbar (chrome & IE/Edge) */ /* width */

-webkit-scrollbar {

 width: 10px;
 height: 10px;

}

-webkit-scrollbar-track {

 background: #efefef;
 -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
 box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);

}

-webkit-scrollbar-thumb {

 border-radius: 5px;
 background: var(--accent1);

}

/*********************** Blobs ***************************/ .blobs {

 background: var(--main);
 margin: 0 -2px;
 padding: 2px 7px;
 -webkit-filter: url("#goo");
 filter: url("#goo");
 cursor: default;
 position: relative;
 display: inline-block;
 border: solid transparent;
 border-width: 0px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 background-clip: padding-box;
 -webkit-box-sizing: content-box;
 box-sizing: content-box;
 z-index: 52;

}

.blobs:hover {

 border-width: 10px;
 margin: -10px -12px;

}

.blobs .popoutBlob {

 position: absolute;
 z-index: -1;
 display: block;
 width: 20px;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 max-height: 20px;
 bottom: 3px;
 left: calc(50% - 10px);
 background: var(--main);
 padding: 0px;
 border-radius: 50%;
 color: var(--main);
 font-size: 0px;
 border: solid transparent;
 border-width: 0px;
 -webkit-transition: all 0.5s cubic-bezier(0.72, 0.01, 0.6, 0.84);
 transition: all 0.5s cubic-bezier(0.72, 0.01, 0.6, 0.84);
 background-clip: padding-box;
 -webkit-box-sizing: content-box;
 box-sizing: content-box;

}

.blobs.bottom .popoutBlob {

 bottom: auto;
 top: 3px;

}

.blobs:hover .popoutBlob {

 left: calc(50% - 135px);
 border-radius: 10px;
 width: 200px;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 max-height: 300px;
 font-size: 1em;
 bottom: 25px;
 padding: 15px;
 border-width: 20px;
 -webkit-transition: all 0.5s cubic-bezier(0.72, 0.01, 0.6, 0.84);
 transition: all 0.5s cubic-bezier(0.72, 0.01, 0.6, 0.84);
 cursor: pointer;
 -webkit-animation: textappear 0.9s forwards;
 animation: textappear 0.9s forwards;
 /* z-index: 99999; */

}

1. iHP .blobs .popoutBlob {

 cursor: default;

}

1. iHP .blobs.Clickable .popoutBlob {

 cursor: pointer;

}

.blobs.XXL:hover .popoutBlob {

 left: calc(50% - 185px);
 width: 300px;

}

.blobs.bottom .popoutBlob {

 bottom: auto;
 top: 25px;

}

.blobs .wobblybobbly {

 position: absolute;
 z-index: -1;
 width: 30%;
 background: var(--main);
 height: 70%;
 border-radius: 50%;
 left: 35%;
 bottom: 4px;

}

.blobs:hover .wobblybobbly {

 -webkit-animation: wobble 1.7s 0.2s;
 animation: wobble 1.7s 0.2s;

}

@-webkit-keyframes wobble {

 0% {
   bottom: 4px
 }

 15% {
   bottom: 14px
 }

 42% {
   bottom: -4px
 }

 67% {
   bottom: 11px
 }

 90% {
   bottom: -2px
 }

 100% {
   bottom: 4px
 }

}

@keyframes wobble {

 0% {
   bottom: 4px
 }

 15% {
   bottom: 14px
 }

 42% {
   bottom: -4px
 }

 67% {
   bottom: 11px
 }

 90% {
   bottom: -2px
 }

 100% {
   bottom: 4px
 }

}

@-webkit-keyframes textappear {

 0% {
   color: var(--main);
 }

 60% {
   color: var(--main);
 }

 100% {
   color: var(--blackish);
 }

}

@keyframes textappear {

 0% {
   color: var(--main);
 }

 60% {
   color: var(--main);
 }

 100% {
   color: var(--blackish);
 }

}

a.ref {

 display: inline;

}

/*********************** Navigation boxes at bottom of page ***************************/ .UnderPageNav {

 width: 90%;
 position: relative;
 max-width: 1100px;
 margin: 50px auto;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap;
 -webkit-box-pack: space-evenly;
 -ms-flex-pack: space-evenly;
 justify-content: space-evenly;
 /* -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -ms-flex-line-pack: center;
 align-content: center; */

}

.UnderPageNav.crowdfunding {

 position: absolute;
 bottom: 0;
 left: 50%;
 -webkit-transform: translate(-50%, 0);
 transform: translate(-50%, 0);

}

.donors.static~.UnderPageNav.crowdfunding {

 position: relative;
 left: auto;
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);

}

/* .UnderPageNav.crowdfunding .NavBlockIcon {

 margin-top: 40px

} */ .NavBlock {

 width: 200px;
 height: 200px;
 background: var(--main);
 display: block;
 border-radius: 20px;
 padding: 20px;
 overflow: hidden;
 position: relative;
 cursor: pointer;
 -webkit-box-shadow: 2px 2px 10px 0px grey;
 box-shadow: 2px 2px 10px 0px grey;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 margin: 10px;

}

.NavBlock:hover {

 -webkit-box-shadow: 2px 2px 2px -2px grey;
 box-shadow: 2px 2px 2px -2px grey;
 -webkit-transform: translate(3px, 3px);
 transform: translate(3px, 3px);

}

.NavBlockIcon {

 color: #f7f7f7;
 font-size: 70px;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 margin: auto;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 -webkit-transition: all 0.5s;
 transition: all 0.5s;

}

.NavBlock:hover .NavBlockIcon {

 font-size: 30px;
 top: 10%;

}

.NavBlockText {

 color: var(--blackish);
 text-align: center;
 font-size: 15px;
 overflow: hidden;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 opacity: 0;
 position: relative;
 top: 60px;

}

.NavBlockText span {

 display: block;
 color: var(--whiteish);
 font-family: Kopje;
 font-size: 16px;
 text-align: center;
 text-align-last: center;
 padding-bottom: 10px;

}

.NavBlock:hover .NavBlockText {

 opacity: 1;
 top: 0px;

}

/*********************** Timeline Concept ***************************/ .popout p.introTextTimeline {

 border-bottom: 3px solid var(--main);
 padding-bottom: 25px;
 margin: 0px auto 30px;
 width: 90%;

}

.timeline li.timelineUnit {

 list-style-type: none;
 position: relative;
 width: 100%;
 margin-top: 50px;

}

.timeline li.timelineUnit:first-of-type {

 padding-top: 50px;

}

.timeline li.timelineUnit:first-of-type i.iHPicon {

 top: 150px;

}

.timeline li.timelineUnit:first-of-type .linesegment::before {

 content: ;
 position: absolute;
 top: 0;
 height: 100px;
 width: 100%;
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(253, 253, 253, 1)), to(rgba(253, 253, 253, 0)));
 background: linear-gradient(rgba(253, 253, 253, 1), rgba(253, 253, 253, 0));

}

.timeline li.timelineUnit:last-of-type {

 margin-bottom: 25px;

}

.timeline li.timelineUnit:last-of-type .linesegment::before {

 content: ;
 position: absolute;
 bottom: 0;
 height: 100px;
 width: 100%;
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(253, 253, 253, 0)), to(rgba(253, 253, 253, 1)));
 background: linear-gradient(rgba(253, 253, 253, 0), rgba(253, 253, 253, 1));

}

.timeline li.timelineUnit .timelineContent {

 position: relative;
 width: calc(90% - 50px);
 color: var(--blackish);
 border-radius: 20px;
 opacity: 0;
 -webkit-transition: all 0.5s, opacity 1s;
 transition: all 0.5s, opacity 1s;

}

.timeline li.timelineUnit.conclusion .timelineContent {

 padding: 0;

}

.timelineContent .title {

 font-family: Kopje;
 padding: 7px 25px 7px;
 background: var(--main);

}

.right .timelineContent .title {

 border-radius: 0 20px 0 0;

}

.left .timelineContent .title {

 border-radius: 20px 0 0 0;

}

.popout .timelineContent p.text, #Global .popout .timelineContent p.text {

 background: var(--whiteish);
 padding: 15px 25px 20px;
 border: 1px solid #aaa;
 border-top: 0px;
 border-radius: 0 0 20px 20px;

}

.timelineUnit.right .timelineContent {

 left: calc(10% + 70px)

}

.timeline li.timelineUnit.right .timelineContent.revealed {

 left: calc(10% + 50px);
 opacity: 1;

}

.timelineUnit.left .timelineContent {

 left: -20px;

}

.timeline li.timelineUnit.left .timelineContent.revealed {

 left: 0;
 opacity: 1;

}

.timeline li.timelineUnit.conclusion {

 margin: 0 auto;
 padding: 30px 0;

}

.timelineUnit.conclusion .timelineContent.revealed {

 opacity: 1;

}

.conclusion .timelineContent {

 border-radius: 20px;

}

.conclusion .timelineContent .title {

 border-radius: 15px 15px 0 0;
 padding: 7px 25px 7px;
 background: var(--main);
 text-align: center;

}

.popout .conclusion .timelineContent p.text, #Global .popout .conclusion .timelineContent p.text {

 border: none;
 padding: 10px 25px 20px;

}

.timeline li.timelineUnit.conclusion .linesegment {

 left: calc(50% - 4px);

}

.timeline li.timelineUnit.conclusion .timelineContent {

 width: 100%;
 border: 3px solid var(--main);

}

.timeline li.timelineUnit .linesegment {

 position: absolute;
 display: block;
 width: 8px;
 top: 0;
 bottom: 0;
 background: var(--main);
 border-radius: 4px;

}

.timeline li.timelineUnit.left .linesegment {

 right: calc(10% - 4px);

}

.timeline li.timelineUnit.right .linesegment {

 left: calc(10% - 4px);

}

.timeline li.timelineUnit i.iHPicon {

 position: absolute;
 font-size: 30px;
 border-radius: 50%;
 width: 60px;
 height: 60px;
 background: var(--main);
 color: white;
 top: 100px;

}

.timeline li.timelineUnit.left i.iHPicon {

 right: 10%;
 -webkit-transform: translateX(50%);
 transform: translateX(50%);

}

.timeline li.timelineUnit.right i.iHPicon {

 left: 10%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);

}

.timeline li.timelineUnit i.iHPicon::before {

 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);

}

.timeline li.timelineUnit .arrow {

 -webkit-box-sizing: content-box;
 box-sizing: content-box;
 position: absolute;
 top: 0px;
 width: 48px;
 height: 50px;
 border-top: 42px solid var(--main);

}

.timeline li.timelineUnit.left .arrow {

 left: 100%;
 border-radius: 0 100% 0 0;

}

.timeline li.timelineUnit.right .arrow {

 right: 100%;
 border-radius: 100% 0 0 0;

}

.timeline li.timelineUnit.semiconclusion .timelineContent {

 padding-top: 50px;

}

.timeline li.timelineUnit.semiconclusion.right .arrow {

 border-top: 0;
 border-bottom: 42px solid var(--main);
 border-radius: 0 0 0 100%;

}

.timeline li.timelineUnit.semiconclusion.left .arrow {

 border-top: 0;
 border-bottom: 42px solid var(--main);
 border-radius: 0 0 100% 0;

}

.timeline li.timelineUnit.Mid {

 margin: auto;
 width: 100%;
 padding-top: 70px;

}

.timeline li.timelineUnit.Mid .linesegment {

 left: calc(50% - 4px);
 )

}

.timeline .conclusion .flowIn, .timeline .conclusion .flowOut {

 position: absolute;
 background: var(--main);
 left: calc(50% - 42px);
 width: 84px;
 height: 38px;

}

.timeline .conclusion .flowIn {

 bottom: calc(100% + 3px);

}

.timeline .conclusion .flowOut {

 top: calc(100% + 3px);

}

.flowIn::before, .flowIn::after, .flowOut::before, .flowOut::after {

 content: ;
 position: absolute;
 height: 38px;
 width: 38px;
 background: #fdfdfd;

}

.flowIn::before {

 top: 0;
 left: 0;
 border-radius: 0 0 100% 0;

}

.flowIn::after {

 top: 0;
 right: 0;
 border-radius: 0 0 0 100%;

}

.flowOut::before {

 bottom: 0;
 left: 0;
 border-radius: 0 100% 0 0;

}

.flowOut::after {

 bottom: 0;
 right: 0;
 border-radius: 100% 0 0 0;

}

.timeline li.link {

 position: relative;
 border-style: solid;
 border-color: var(--main);
 height: 50px;

}

.timeline li.link.LeftRight1 {

 width: calc(40% + 5px);
 border-width: 0 0 8px 8px;
 left: calc(10% - 4px);
 -webkit-transform: skewY(10deg);
 transform: skewY(10deg);
 -webkit-transform-origin: 100% 0;
 transform-origin: 100% 0;
 border-radius: 0 0 0 30px;
 margin-top: 33px;

}

.timeline li.link.LeftRight2 {

 width: calc(40% + 4px);
 margin-top: -8px;
 margin-bottom: -18px;
 border-width: 8px 8px 0 0;
 left: 50%;
 -webkit-transform: skewY(10deg);
 transform: skewY(10deg);
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
 border-radius: 0 30px 0 0;

}

.timeline li.link.RightLeft1 {

 width: calc(40% + 4px);
 border-width: 0 8px 8px 0px;
 left: 50%;
 -webkit-transform: skewY(-10deg);
 transform: skewY(-10deg);
 -webkit-transform-origin: 0 100%;
 transform-origin: 0 100%;
 border-radius: 0 0 30px 0;
 margin-top: 33px;

}

.timeline li.link.RightLeft2 {

 width: calc(40% + 5px);
 margin-top: -8px;
 margin-bottom: -18px;
 border-width: 8px 0 0 8px;
 left: calc(10% - 4px);
 -webkit-transform: skewY(-10deg);
 transform: skewY(-10deg);
 -webkit-transform-origin: 100% 0;
 transform-origin: 100% 0;
 border-radius: 30px 0 0 0;

}

.timeline li.link.LeftMid1 {

 width: calc(20% + 4px);
 border-width: 0 0 8px 8px;
 left: calc(10% - 4px);
 -webkit-transform: skewY(10deg);
 transform: skewY(10deg);
 -webkit-transform-origin: 100% 0;
 transform-origin: 100% 0;
 border-radius: 0 0 0 30px;
 margin-top: 4px;

}

.timeline li.link.LeftMid2 {

 width: calc(20% + 5px);
 margin-top: -8px;
 margin-bottom: 15px;
 border-width: 8px 8px 0 0;
 left: calc(30% - 1px);
 -webkit-transform: skewY(10deg);
 transform: skewY(10deg);
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
 border-radius: 0 30px 0 0;

}

.timeline li.link.MidRight1 {

 width: calc(20% + 5px);
 border-width: 0 0 8px 8px;
 left: calc(50% - 4px);
 -webkit-transform: skewY(10deg);
 transform: skewY(10deg);
 -webkit-transform-origin: 100% 0;
 transform-origin: 100% 0;
 border-radius: 0 0 0 30px;
 margin-top: 15px;

}

.timeline li.link.MidRight2 {

 width: calc(20% + 4px);
 margin-top: -8px;
 margin-bottom: -45px;
 border-width: 8px 8px 0 0;
 left: 70%;
 -webkit-transform: skewY(10deg);
 transform: skewY(10deg);
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
 border-radius: 0 30px 0 0;

}

.timeline li.link.RightMid1 {

 width: calc(20% + 4px);
 border-width: 0 8px 8px 0px;
 left: 70%;
 -webkit-transform: skewY(-10deg);
 transform: skewY(-10deg);
 -webkit-transform-origin: 0 100%;
 transform-origin: 0 100%;
 border-radius: 0 0 30px 0;
 margin-top: 4px;

}

.timeline li.link.RightMid2 {

 width: calc(20% + 5px);
 margin-top: -8px;
 margin-bottom: 15px;
 border-width: 8px 0 0 8px;
 left: calc(50% - 4px);
 -webkit-transform: skewY(-10deg);
 transform: skewY(-10deg);
 -webkit-transform-origin: 100% 0;
 transform-origin: 100% 0;
 border-radius: 30px 0 0 0;

}

.timeline li.link.MidLeft1 {

 width: calc(20% + 4px);
 border-width: 0 8px 8px 0px;
 left: calc(30% - 0px);
 -webkit-transform: skewY(-10deg);
 transform: skewY(-10deg);
 -webkit-transform-origin: 0 100%;
 transform-origin: 0 100%;
 border-radius: 0 0 30px 0;
 margin-top: 15px;

}

.timeline li.link.MidLeft2 {

 width: calc(20% + 5px);
 margin-top: -8px;
 margin-bottom: -45px;
 border-width: 8px 0 0 8px;
 left: calc(10% - 4px);
 -webkit-transform: skewY(-10deg);
 transform: skewY(-10deg);
 -webkit-transform-origin: 100% 0;
 transform-origin: 100% 0;
 border-radius: 30px 0 0 0;

}

.popout .PicCaroussel {

 display: block;
 margin: 25px auto;
 position: relative;

}

.popout .PicCaroussel.horizontal {

 width: 80%;

}

.popout .PicCaroussel.vertical {

 width: 40%;

}

.PicCaroussel img:first-child {

 position: relative;
 width: 100%;
 height: auto;

}

.PicCaroussel img {

 width: auto;
 height: 100%;
 position: absolute;
 top: 0;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 -webkit-transition: opacity 1s;
 transition: opacity 1s;
 opacity: 0;
 border: 2px solid var(--main);

}

.PicCaroussel img.active {

 opacity: 1;

}

.PicCaroussel .SlideNav {

 display: block;
 position: absolute;
 bottom: 15px;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 left: 0;
 right: 0;
 margin: 0 auto;

}

.PicCaroussel .SlideNav span {

 display: inline-block;
 width: 15px;
 height: 15px;
 border-radius: 50%;
 color: var(--whiteish);
 /* background: rgba(17, 17, 17, 0.5); */
 background: rgba(69, 105, 144, 0.7);
 border: 2px solid currentColor;
 margin: 0 3px;
 -webkit-transition: all 1s;
 transition: all 1s;
 position: relative;
 -webkit-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.5);
 box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.5);

}

.PicCaroussel .SlideNav span:hover {

 background: currentColor;
 cursor: pointer;

}

.PicCaroussel .SlideNav span.active {

 background: currentColor;

}

.popout .SubSectionTitle, .projectDescription .SubSectionTitle {

 border-bottom: 3px solid var(--main);
 width: 90%;
 margin-left: auto;
 margin-right: auto;

}

.projectDescription .SubSectionTitle {

 width: 100%

}

1. animation50SOS {

 width: 100%;
 height: auto;
 -webkit-box-shadow: 0 0 40px 5px var(--whiteish);
 box-shadow: 0 0 40px 5px var(--whiteish);
 margin: 5px auto;
 border: 3px solid var(--main);

}

/***********************************************************************************************************************************************************/ /* Homepage */

1. loader-wrapper {

 position: fixed;
 width: 100vw;
 height: 100vh;
 top: 0;
 left: 0;
 background: white;
 z-index: 99999999;
 overflow: hidden;

}

1. loader {

 display: block;
 position: absolute;
 left: 50%;
 top: 50%;
 width: 150px;
 height: 150px;
 margin: -75px 0 0 -75px;
 border-radius: 50%;
 border: 4px solid transparent;
 border-top-color: var(--main);
 -webkit-animation: spin 2s linear infinite;
 animation: spin 2s linear infinite;

}

1. loader:before {

 content: "";
 position: absolute;
 top: 6px;
 left: 6px;
 right: 6px;
 bottom: 6px;
 border-radius: 50%;
 border: 4px solid transparent;
 border-top-color: var(--accent2);
 -webkit-animation: spin 3s linear infinite;
 animation: spin 3s linear infinite;

}

1. loader:after {

 content: "";
 position: absolute;
 top: 17px;
 left: 17px;
 right: 17px;
 bottom: 17px;
 border-radius: 50%;
 border: 4px solid transparent;
 border-top-color: var(--accent1);
 -webkit-animation: spin 1.5s linear infinite;
 animation: spin 1.5s linear infinite;

}

1. loader-wrapper #BestOnLargeScreens, #loader-wrapper #BadonEdge {

 display: none;
 padding: 0 10px;
 font-size: 20px;
 max-width: 90%;
 margin: 0 auto;
 text-align: center;
 position: relative;
 top: 80vh;

}

1. loader-wrapper #BadonEdge {

 display: block;

}

/* if javascript is not enabled, remove loader */ .no-js#loader-wrapper, .no-js#loader-wrapper #loader {

 display: none;

}

@-webkit-keyframes spin {

 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }

 100% {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@keyframes spin {

 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }

 100% {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

.largerText {

 font-size: 30px;
 position: relative;
 width: 100%;
 overflow: hidden;

}

.popout object {

 display: block;
 margin: 10px auto;
 width: 100%;

}

.popout object.small {

 height: 30vh;
 min-height: 200px;

}

.popout object.large {

 height: 50vh;
 min-height: 300px;

}

.popout object.notebook {

 height: 80vh;
 min-height: 600px;

}

.popout.Parts {

 width: 90%;
 max-width: 1000px;

}

.popout.Parts.chapter.revealed {

 max-width: 1100px;

}

.popout.Parts.revealed .collapsibleContent {

 padding: 20px 30px 0px;

}

table.PartTable, table.ResultTable {

 border-collapse: collapse;
 border-spacing: 0;
 width: 95%;
 /* max-width: 900px; */
 margin: 0 auto;
 table-layout: fixed;
 text-align: center;

}

table.PartTable tr:first-of-type {

 border-bottom: 1px solid grey;

}

table.PartTable tr:nth-child(even), table.ResultTable tr:nth-child(even) {

 background: rgba(255, 179, 117, 0.5);

}

table.PartTable td, table.PartTable th, table.ResultTable td, table.ResultTable th {

 padding: 10px 5px;

}

table.PartTable.primers td:nth-child(2) {

 word-break: break-all;

}

table.ResultTable {

 text-align: left;

}

/***********************************************************************************************************************************************************/ /* Eventpage */ .title {

 display: block;
 grid-column: 1 / span 2;
 border-bottom: 3px solid var(--main);

}

.cardtitle {

 font-family: Kopje;
 display: inline-block;

}

.date {

 font-family: Body;
 font-size: 1.95em;
 display: inline-block;
 width: 165px;
 margin-right: 30px;

}

.cardtext {

 font-family: Body;
 -ms-flex-line-pack: center;
 align-content: center;

}

.cardtextfull {

 grid-column: 1 / span 2;

}

.card {

 opacity: 0;
 width: 85%;
 background: white;
 padding: 40px 40px 80px 40px;
 margin: 20px auto;
 display: grid;
 grid-gap: 20px;
 -webkit-box-shadow: 4px 0px 16px -3px rgba(0, 0, 0, 0.5);
 box-shadow: 4px 0px 16px -3px rgba(0, 0, 0, 0.5);
 border-radius: 10px;
 position: relative;
 z-index: 1;

}

.card.links {

 grid-template-columns: 250px 1fr;

}

.card.rechts {

 grid-template-columns: 1fr 250px;

}

.images {

 width: 100%;
 display: grid;
 grid-gap: 10px;
 -ms-flex-line-pack: center;
 align-content: center;

}

.card .images img {

 width: 100%;
 border: solid 2px var(--main);
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 position: relative;

}

img.scrolldown {

 position: fixed;
 bottom: 10px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 width: 100px;
 height: auto;

}

.circle {

 border-radius: 50%;
 display: block;
 position: absolute;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;

}

.halfcircle {

 border-top-left-radius: 105px;
 border-bottom-left-radius: 105px;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;

}

.circle.small {

 height: 50px;
 width: 50px;

}

.circle.normal {

 height: 100px;
 width: 100px;

}

.halfcircle.halflarge {

 height: 150px;
 width: 75px;

}

.circle.halfcircle.circle1 {

 border-right: 0;

}

.circle.large {

 height: 150px;
 width: 150px;

}

.circle.orange {

 color: var(--main);
 background-color: var(--main);

}

.circle.accent1 {

 color: var(--accent1);
 background-color: var(--accent1);

}

.circle.accent2 {

 color: var(--accent2);
 background-color: var(--accent2);

}

.circle.accent3 {

 color: var(--accent3);
 background-color: var(--accent3);

}

.circle.accent4 {

 color: var(--accent4);
 background-color: var(--accent4);

}

.circle.accent5 {

 color: var(--accent5);
 background-color: var(--accent5);

}

.circle.thick {

 border: 30px solid;
 background-color: transparent;

}

.circle.thin {

 border: 15px solid;
 background-color: transparent;

}

.parallaxCircles .circle.circle1 {

 top: 320px;
 right: 0px;

}

.parallaxCircles .circle.circle2 {

 top: 600px;
 right: 170px;

}

.parallaxCircles .circle.circle3 {

 top: 150px;
 right: 50px;

}

.parallaxCircles .circle.circle4 {

 top: 900px;
 right: 50px;

}

.parallaxCircles .circle.circle5 {

 top: 650px;
 right: 150px;

}

.parallaxCircles .circle.circle6 {

 top: 820px;
 left: -40px;

}

.parallaxCircles .circle.circle7 {

 top: 300px;
 left: 50px;

}

.parallaxCircles .circle.circle8 {

 top: 750px;
 left: 150px;

}

.parallaxCircles .circle.circle9 {

 top: 850px;
 left: 250px;

}

.parallaxCircles .circle.circle10 {

 top: 370px;
 left: 120px;

}

.visible:nth-child(1) {

 margin-top: 100px;
 max-width: 950px;
 -webkit-animation: fly-from-bottom-left 0.8s forwards ease-out;
 animation: fly-from-bottom-left 0.8s forwards ease-out;

}

.visible:nth-child(3n+4) {

 max-width: 950px;
 -webkit-animation: fly-from-bottom-left 0.9s forwards ease-out;
 animation: fly-from-bottom-left 0.9s forwards ease-out;

}

.visible:nth-child(3n+2) {

 max-width: 1000px;
 -webkit-animation: fly-from-bottom-right 0.85s forwards ease-out;
 animation: fly-from-bottom-right 0.85s forwards ease-out;

}

.visible:nth-child(3n+0) {

 max-width: 900px;
 -webkit-animation: fly-from-top-right 0.9s forwards ease-out;
 animation: fly-from-top-right 0.9s forwards ease-out;

}

@-webkit-keyframes fly-from-bottom-left {

 0% {
   -webkit-transform: translate(-100vw, 100vh) rotate(-20deg) scale(3);
   transform: translate(-100vw, 100vh) rotate(-20deg) scale(3);
   opacity: 1;
 }

 100% {
   -webkit-transform: rotate(4deg) translateY(-25px) scale(1);
   transform: rotate(4deg) translateY(-25px) scale(1);
   opacity: 1;
 }

}

@keyframes fly-from-bottom-left {

 0% {
   -webkit-transform: translate(-100vw, 100vh) rotate(-20deg) scale(3);
   transform: translate(-100vw, 100vh) rotate(-20deg) scale(3);
   opacity: 1;
 }

 100% {
   -webkit-transform: rotate(4deg) translateY(-25px) scale(1);
   transform: rotate(4deg) translateY(-25px) scale(1);
   opacity: 1;
 }

}

@-webkit-keyframes fly-from-bottom-right {

 0% {
   -webkit-transform: translate(100vw, 100vh) rotate(20deg) scale(3);
   transform: translate(100vw, 100vh) rotate(20deg) scale(3);
   opacity: 1;
 }

 100% {
   -webkit-transform: rotate(-2deg) translateY(-30px) scale(1);
   transform: rotate(-2deg) translateY(-30px) scale(1);
   opacity: 1;
 }

}

@keyframes fly-from-bottom-right {

 0% {
   -webkit-transform: translate(100vw, 100vh) rotate(20deg) scale(3);
   transform: translate(100vw, 100vh) rotate(20deg) scale(3);
   opacity: 1;
 }

 100% {
   -webkit-transform: rotate(-2deg) translateY(-30px) scale(1);
   transform: rotate(-2deg) translateY(-30px) scale(1);
   opacity: 1;
 }

}

@-webkit-keyframes fly-from-top-right {

 0% {
   -webkit-transform: translate(100vw, -100vh) rotate(45deg) scale(3);
   transform: translate(100vw, -100vh) rotate(45deg) scale(3);
   opacity: 1;
   -webkit-filter: blur(10px);
   filter: blur(10px);
 }

 100% {
   -webkit-transform: rotate(0deg) translateY(-50px) scale(1);
   transform: rotate(0deg) translateY(-50px) scale(1);
   opacity: 1;
   -webkit-filter: blur(0);
   filter: blur(0);
 }

}

@keyframes fly-from-top-right {

 0% {
   -webkit-transform: translate(100vw, -100vh) rotate(45deg) scale(3);
   transform: translate(100vw, -100vh) rotate(45deg) scale(3);
   opacity: 1;
   -webkit-filter: blur(10px);
   filter: blur(10px);
 }

 100% {
   -webkit-transform: rotate(0deg) translateY(-50px) scale(1);
   transform: rotate(0deg) translateY(-50px) scale(1);
   opacity: 1;
   -webkit-filter: blur(0);
   filter: blur(0);
 }

}

/***********************************************************************************************************************************************************/ /* Sponsorpage */ .SponsorFlexBox {

 padding: 25px 0;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap;
 -webkit-box-pack: space-evenly;
 -ms-flex-pack: space-evenly;
 justify-content: space-evenly;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -ms-flex-line-pack: center;
 align-content: center;

}

img.sponsorLogo {

 width: 300px;
 height: auto;
 /* margin: 20px; */

}

a.sponsor {

 display: block;
 margin: 10px;
 padding: 10px;

}

.container-text.sponsorPossibility {

 text-align: center;
 text-align-last: center;

}

div.highlight {

 background: rgba(178, 176, 155, 0.5);
 margin: 25px auto 0;

}

/***********************************************************************************************************************************************************/ /* Teampage */ header.white-out {

 position: relative;
 display: block;

}

header.white-out::after {

 position: absolute;
 content: ;
 display: block;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(255, 255, 255, .5);

}

.headerpic {

 width: 100%;
 height: auto;

}

.team {

 content: url("");

}

div.TeamFlexbox {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap;
 -webkit-box-pack: space-evenly;
 -ms-flex-pack: space-evenly;
 justify-content: space-evenly;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -ms-flex-line-pack: center;
 align-content: center;

}

.TeamMemberBox {

 margin: 50px 25px;
 display: grid;
 justify-items: center;
 grid-template-columns: 1fr;

}

.PicBox {

 position: relative;
 width: 200px;
 height: 200px;

}

img.MemberPic {

 height: auto;
 width: 110%;
 margin-left: -5px;
 margin-top: -25px;

}

.circularPortrait {

 width: 200px;
 height: 200px;
 overflow: hidden;
 position: relative;
 border-radius: 50%;
 border: 25px solid;

}

div.iconBox {

 display: block;
 position: absolute;
 border: solid 30px;
 border-radius: 50%;

}

div.iconBox>i {

 color: var(--blackish);
 font-size: 30px;
 position: absolute;
 top: 49%;
 left: 48%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);

}

.MemberDescription {

 color: var(--blackish);
 width: 250px;

}

h2.MemberName, p.MemberFunction {

 text-align: center;
 text-align-last: center;
 padding: 0;
 margin: 0;

}

p.MemberFunction {

 font-size: 1.3em;

}

.underlined {

 display: block;
 margin: auto;
 padding: 0 20px;

}

.underlined::after {

 content: "";
 display: block;
 margin: 0 auto;
 border-bottom: var(--main) solid 5px;
 padding-top: 5px;
 width: 825px;

}

/* Change colors of each circle/member */ .TeamMemberBox:nth-child(8n+1) {

 color: var(--main);

}

.TeamMemberBox:nth-child(8n+2) {

 color: var(--accent4);

}

.TeamMemberBox:nth-child(8n+3) {

 color: var(--accent1);

}

.TeamMemberBox:nth-child(8n+4) {

 color: var(--accent2);

}

.TeamMemberBox:nth-child(8n+5) {

 color: var(--accent4);

}

.TeamMemberBox:nth-child(8n+6) {

 color: var(--main);

}

.TeamMemberBox:nth-child(8n+7) {

 color: var(--accent2);

}

.TeamMemberBox:nth-child(8n+8) {

 color: var(--accent1);

}

/* Change order of text-picture */ .TeamMemberBox:nth-child(2n+1) .PicBox {

 grid-row: 1;

}

.TeamMemberBox:nth-child(2n+2) .PicBox {

 grid-row: 2;

}

.TeamMemberBox:nth-child(2n+1) .MemberDescription {

 grid-row: 2;

}

.TeamMemberBox:nth-child(2n+2) .MemberDescription {

 grid-row: 1;

}

/* Change config of icon */ .TeamMemberBox:nth-child(4n+1) div.iconBox {

 right: -25px;
 bottom: 0px;

}

.TeamMemberBox:nth-child(4n+2) div.iconBox {

 top: 0px;
 left: -25px;

}

.TeamMemberBox:nth-child(4n+3) div.iconBox {

 bottom: 0px;
 left: -25px;

}

.TeamMemberBox:nth-child(4n+4) div.iconBox {

 top: 0px;
 right: -25px;

}

/* add some padding to the MemberDescription to align to the bottom/top */ .TeamMemberBox:nth-child(2n+1) .MemberDescription {

 -ms-flex-item-align: start;
 align-self: start;
 padding-top: 20px;

}

.TeamMemberBox:nth-child(2n+2) .MemberDescription {

 -ms-flex-item-align: end;
 align-self: end;
 padding-bottom: 20px;

}

.modal {

 position: fixed;
 width: 100vw;
 height: 100vh;
 left: 0;
 top: 0;
 display: none;
 opacity: 0;
 background: rgb(0, 0, 0);
 background: rgba(0, 0, 0, 0.5);
 z-index: 2000;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 color: var(--blackish);

}

span.close {

 position: absolute;
 right: 20px;
 top: 20px;
 font-size: 30px;
 color: #888;
 padding: 0 10px;

}

span.close:hover, span.close:active {

 color: #444;
 cursor: pointer;

}

.modalContent {

 background: var(--whiteish);
 width: 80%;
 max-width: 800px;
 height: 95vh;
 max-height: 711px;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 overflow: auto;
 padding: 20px;
 text-align: center;
 text-align-last: center;
 border-radius: 20px;
 -webkit-box-shadow: 1px 1px 20px 1px #222;
 box-shadow: 1px 1px 20px 1px #222;

}

.ModalMemberName {

 font-family: Kopje;
 font-size: 1.5rem;
 width: 90%;
 margin: auto;

}

div.separator {

 display: block;
 background: var(--main);
 width: 55%;
 min-width: 200px;
 height: 2px;
 margin: 5px auto 0;

}

.ModalMemberFunction {

 font-size: 1.5rem;
 width: 90%;
 display: block;
 margin: 0 auto 10px;

}

.CasualPic {

 width: 80%;
 max-width: 450px;
 margin: 20px auto;

}

.CasualPic img {

 width: 100%;
 height: auto;

}

.ModalStudy {

 font-family: Kopje;
 font-size: 1.1rem;

}

.ModalDescription {

 width: 82%;
 margin: 10px auto;

}

.ModalFunFact {

 font-style: italic;
 width: 82%;
 margin: auto;
 /* padding-bottom: 10px; */

}

.TeamFlexbox.Members .PicBox, .TeamFlexbox.Members .MemberDescription {

 cursor: pointer;

}

/***********************************************************************************************************************************************************/ div.CF {

 margin: 0px auto 50px;
 background: rgba(247, 247, 247, 0.9);
 border-radius: 50px;
 border: 1px solid #cecdc0;
 /* padding-bottom: 0; */

}

1. Global div.CF p.crowdfundingtext, div.CF p.crowdfundingtext {

 font-size: 1.4rem;
 padding: 20px 50px 10px;

}

1. DonateButton {

 display: block;
 margin: 25px auto 0;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 border: 2px solid var(--main);
 background: rgba(255, 179, 117, 0.4);
 border-radius: 15px;
 padding: 30px 25px;
 text-align: center;
 text-align-last: center;
 font-size: 35px;
 /* margin-top: 150px; */

}

/* static-dynamic switch */ div.StatDynSwitch {

 position: fixed;
 display: block;
 bottom: 30px;
 right: 40px;

}

.switch {

 position: relative;
 display: inline-block;
 width: 60px;
 height: 34px;
 margin: -10px 10px;

}

.switch input {

 display: none

}

.slider {

 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: var(--accent2);
 -webkit-transition: .4s;
 transition: .4s;
 -webkit-box-shadow: 0px 0px 5px #f7f7f7;
 box-shadow: 0px 0px 5px #f7f7f7;

}

.slider:before {

 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: #f7f7f7;
 -webkit-transition: .4s;
 transition: .4s;

}

input:checked+.slider {

 background-color: var(--accent3);

}

input:checked+.slider:before {

 -webkit-transform: translateX(26px);
 transform: translateX(26px);

}

.slider {

 border-radius: 34px;

}

.slider:before {

 border-radius: 50%;

}

.StatDynSwitch>span {

 display: inline-block;
 font-size: 20px;
 text-shadow: 0px 0px 5px #f7f7f7;

}

/***********************************************************************************************************************************************************/ /* InterLab */ ul#DeviceList li {

 display: list-item;
 list-style-type: disc;
 list-style-position: inside;

}

div.InterLabFigureBox {

 width: 80%;
 max-width: 600px;
 padding: 10px 0 25px;
 margin: auto;

}

img.InterLabFigure {

 width: 100%;
 display: block;
 margin: auto;

}

/***********************************************************************************************************************************************************/ /* Featured */ .FeaturedFlexbox {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap;
 -webkit-box-pack: space-evenly;
 -ms-flex-pack: space-evenly;
 justify-content: space-evenly;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -ms-flex-line-pack: center;
 align-content: center;

}

div.featuredBox {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 min-height: 0;
 margin: 50px 20px;
 min-width: 450px;
 width: 45%;
 max-width: 800px;
 height: 90vh;

}

.Feature {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 /* firefox correction */
 min-width: 0;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 min-height: -webkit-max-content;
 min-height: -moz-max-content;
 min-height: max-content;

}

.Feature h3 {

 min-width: -webkit-max-content;
 min-width: -moz-max-content;
 min-width: max-content;
 padding: 0px 20px;

}

.Feature h2 {

 padding: 0 20px;
 margin-left: auto;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;

}

div.ScrollBox {

 margin-top: 10px;
 display: inline-block;
 -webkit-box-flex: 1;
 -ms-flex-positive: 1;
 flex-grow: 1;
 max-height: -webkit-max-content;
 max-height: -moz-max-content;
 max-height: max-content;
 border: 2px solid var(--main);
 overflow-y: scroll;
 width: 100%;

}

div.ScrollBox a img {

 width: 100%;
 margin-top: auto;

}

div.ScrollBox a {

 display: block;

}

/***********************************************************************************************************************************************************/ /* Newsletter */ /* correction */ .collapsibleContent div {

 line-height: 150%;

}

table {

 background: none;

}

/* other styling for Newsletter */ .popout {

 display: block;
 width: 80%;
 max-width: 900px;
 margin: 15px auto;
 position: relative;
 z-index: 10;
 -webkit-transition: all 0s;
 transition: all 0s;

}

.popout:last-of-type, .popout.protocols:last-of-type, .popout.chapter:last-of-type {

 margin-bottom: 75px;

}

.popout.revealed {

 background: #fdfdfd;
 margin: 30px auto;
 -webkit-box-shadow: 2px 2px 15px 0px gray;
 box-shadow: 2px 2px 15px 0px gray;
 padding-bottom: 20px;
 -webkit-transition: all 0.7s;
 transition: all 0.7s;

}

.popout.revealed .collapsibleContent {

 padding: 20px 75px 0px;
 opacity: 1;

}

.collapsible {

 display: block;
 text-align: center;
 text-align-last: center;
 font-family: Body;
 font-size: 50px;
 padding: 17px 50px;
 width: 100%;
 position: relative;
 z-index: 15;
 color: rgb(235, 235, 235);

}

.collapsible::before {

 position: absolute;
 content: ;
 top: 0;
 left: 0;
 height: 100%;
 width: 10px;
 background: var(--accent2);
 -webkit-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
 z-index: 11;

}

.collapsible::after {

 position: absolute;
 content: ;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 background: var(--accent1);
 height: 100%;
 z-index: -1;

}

.collapsible:hover {

 cursor: pointer;

}

.collapsible:hover::before {

 width: 50px;

}

.collapsibleContent {

 position: relative;
 max-height: 0;
 overflow-y: hidden;
 margin: auto;
 padding: 0px 75px 0;
 -webkit-transition: all 0s;
 transition: all 0s;
 opacity: 0;

}

.collapsibleContent.revealed {

 -webkit-transition: all 0.7s;
 transition: all 0.7s;

}

/***********************************************************************************************************************************************************/ /* Attributions */ li.description {

 margin-bottom: 15px;
 font-style: italic;
 padding-left: 12px;
 /* font-size: 0.95rem; */

}

h2.SubSectionTitle {

 margin-top: 10px;

}

ul.bullet li {

 list-style-type: disc;
 display: list-item;
 list-style-position: inside;

}

ul.bullet li.description {

 padding-left: 37px;
 list-style-type: none;

}

ul.bullet li ul {

 -webkit-padding-start: 40px;
 padding-inline-start: 40px;

}

ul.dashed li {

 list-style-type: none;
 display: list-item;
 list-style-position: inside;
 padding-bottom: 10px;
 padding-left: 25px;
 text-indent: -25px;

}

ul.dashed li::before {

 content: '-';
 margin-right: 20px

}

.popout p, .projectDescription p, #Global .popout p, #Global .projectDescription p {

 padding: 10px 0;

}

/* .popout ul {

 padding-bottom: 20px;

} */ /***********************************************************************************************************************************************************/ /* Protocols */ .popout.protocols {

 margin: 5px auto;
 -webkit-transition: all 0.4s;
 transition: all 0.4s;

}

.popout.protocols.revealed {

 max-width: 930px;
 margin: 15px auto;

}

.popout.protocols .collapsible {

 font-size: 30px;

}

.popout.protocols .collapsibleContent.revealed {

 -webkit-transition: all 0.4s;
 transition: all 0.4s;

}

ol li {

 display: list-item;
 padding-left: 15px;

}

ol {

 padding-left: 20px;

}

ul.indented li {

 padding-left: 5px;
 list-style-position: inside;
 display: list-item;
 list-style-type: disc;

}

ul.indented li span.indent {

 padding-left: 10px;

}

.protocols table {

 margin: 10px 0 10px 13px;

}

.protocols th {

 text-align: left;

}

table .top {

 vertical-align: top;

}

.protocols table tr th:first-child, .protocols table tr td:first-child {

 padding-right: 20px;

}

/***********************************************************************************************************************************************************/ /* Model */ .popout.chapter {

 margin: 5px auto;
 -webkit-transition: all 0.6s;
 transition: all 0.6s;
 text-align: justify;

}

.popout.chapter.revealed {

 max-width: 930px;
 margin: 15px auto;

}

.popout.chapter .collapsible {

 font-size: 35px;

}

.popout.chapter .collapsibleContent.revealed {

 -webkit-transition: all 0.6s;
 transition: all 0.6s;
 overflow-x: hidden;

}

span.eq span.katex-display {

 /* margin-bottom: 25px; */

}

span.inline-eq {

 font-size: 0.9em;

}

div#plot1 {

 height: 500px;
 margin: 0 auto;

}

figure.resultfig {

 width: 100%;
 margin: 40px auto;
 padding: 0 40px;
 overflow-y: hidden;

}

figure.resultfig.vertical {

 width: 50%;

}

figure.resultfig.horizontal {

 width: 80%;

}

figure.resultfig.wide {

 padding: 0;

}

figure.resultfig img {

 width: 100%;

}

figure#realisationPic {

 position: relative;
 width: 100%;
 height: 400px;
 overflow-x: auto;
 background-image:
   -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(70%, #fdfdfd)),
   -webkit-gradient(linear, right top, left top, color-stop(30%, #fdfdfd), to(rgba(255, 255, 255, 0))),
   radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), rgba(255, 255, 255, 0)),
   radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(255, 255, 255, 0));
 background-image:
   linear-gradient(to left, rgba(255, 255, 255, 0), #fdfdfd 70%),
   linear-gradient(to left, #fdfdfd 30%, rgba(255, 255, 255, 0)),
   radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), rgba(255, 255, 255, 0)),
   radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(255, 255, 255, 0));
 background-position: 0 50%, 100% 50%, 0 50%, 100% 50%;
 background-repeat: no-repeat;
 background-color: #fdfdfd;
 background-size: 50px 400px, 50px 400px, 15px 400px, 15px 400px;
 background-attachment: local, local, scroll, scroll;

}

figure#realisationPic>img {

 height: 100%;
 width: auto;

}

div.FigFlexbox {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;

}

.FigFlexbox .flexfig {

 width: 50%;

}

.FigFlexbox .flexfig.smallSize {

 width: 50%;
 min-width: 200px;
 max-width: 259px;

}

.FigFlexbox .flexText {

 width: 50%;
 min-width: 250px;

}

.FigFlexbox .flexText {

 padding: 0 10px;
 border-bottom: 1px solid grey;

}

figcaption, caption {

 font-size: 0.8em;
 text-align: justify;
 padding-top: 10px;

}

table caption {

 padding-bottom: 10px;
 padding-top: 0;

}

figcaption b, caption b {

 font-family: Kopje;

}

figure div.plot-container.plotly div.svg-container {

 margin-top: -70px;

}

/***********************************************************************************************************************************************************/ /* Custom-made igem icons */ .icon {

 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'iGEMLeidenIcons' !important;
 speak: none;
 display: inline-block;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

}

.icon.Applied-design:before {

 content: "\e90a";

}

.icon.Attributions:before {

 content: "\e900";

}

.icon.Demonstration:before {

 content: "\e901";

}

.icon.Entrepreneurship:before {

 content: "\e902";

}

.icon.Home-iGEM:before {

 content: "\e903";

}

.icon.Model:before {

 content: "\e904";

}

.icon.Notebook:before {

 content: "\e905";

}

.icon.PE-E:before {

 content: "\e906";

}

.icon.Project-description:before {

 content: "\e907";

}

.icon.Protocols:before {

 content: "\e908";

}

.icon.Results:before {

 content: "\e909";

}

/***********************************************************************************************************************************************************/ /* Responsiveness*/ /* Global */ @media (max-width: 768px) {

 #loader-wrapper #BestOnLargeScreens {
   display: block;
 }

 #loader-wrapper #BadonEdge {
   display: none;
 }

 body, #body {
   font-size: calc(100vw * 0.0058 + 12.5292px);
 }

 .container {
   width: 100%;
   padding: 0 20px;
 }

 .NavBlockIcon {
   font-size: 30px;
   top: 10%;
 }

 .NavBlock .NavBlockText {
   opacity: 1;
   top: 0px;
 }

}

@media (max-width: 425px) {

 body, #body {
   font-size: 15px;
 }

}

@media (max-width: 700px) {

 div#Fsos {
   font-size: calc(100vw * 0.0667 + 3.3px);
   width: 90%;
   margin: auto;
 }

 div#UnderTitle {
   font-size: calc(100vw * 0.0288 + 1.437px);
   width: 90%;
   margin: auto;
   padding: 0;
 }

}

/* Eventpage */ @media (max-width:768px) {

 .card {
   width: 95%;
 }

 .card:first-child {
   margin-top: 20px;
 }

 .card:nth-child(3n+1) {
   -webkit-transform: rotate(0) translateY(0);
   transform: rotate(0) translateY(0);
   grid-template-columns: 1fr;
   opacity: 1;
   -webkit-animation: none;
   animation: none;
 }

 .card:nth-child(3n+2) {
   -webkit-transform: rotate(0) translateY(0);
   transform: rotate(0) translateY(0);
   grid-template-columns: 1fr;
   opacity: 1;
   -webkit-animation: none;
   animation: none;
 }

 .card:nth-child(3n+0) {
   -webkit-transform: translateY(0);
   transform: translateY(0);
   grid-template-columns: 1fr;
   opacity: 1;
   -webkit-animation: none;
   animation: none;
 }

 .cardtextfull {
   grid-column: 1;
 }

 .title {
   grid-column: 1;
   grid-row: 1;
 }

 .images {
   grid-row: 3;
 }

 .images.special {
   grid-row: 4;
 }

 .cardcontent {
   grid-row: 2;
 }

 .parallaxCircles.circle {
   display: none;
 }

}

@media (min-width:769px) {

 .card.links:nth-child(3n+1) img:hover {
   -webkit-transform: scale(1.7) rotate(-4deg) translateX(100px);
   transform: scale(1.7) rotate(-4deg) translateX(100px);
   -webkit-box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }

 .card.links:nth-child(3n+2) img:hover {
   -webkit-transform: scale(1.7) rotate(2deg) translateX(100px);
   transform: scale(1.7) rotate(2deg) translateX(100px);
   -webkit-box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }

 .card.links:nth-child(3n+0) img:hover {
   -webkit-transform: scale(1.7) translateX(100px);
   transform: scale(1.7) translateX(100px);
   -webkit-box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }

 .card.rechts:nth-child(3n+1) img:hover {
   -webkit-transform: scale(1.7) rotate(-4deg) translateX(-100px);
   transform: scale(1.7) rotate(-4deg) translateX(-100px);
   -webkit-box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }

 .card.rechts:nth-child(3n+2) img:hover {
   -webkit-transform: scale(1.7) rotate(2deg) translateX(-100px);
   transform: scale(1.7) rotate(2deg) translateX(-100px);
   -webkit-box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }

 .card.rechts:nth-child(3n+0) img:hover {
   -webkit-transform: scale(1.7) translateX(-100px);
   transform: scale(1.7) translateX(-100px);
   -webkit-box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }

}

/**************** sponsorpage *********************/ @media (max-width:849px) {

 .SponsorFlexBox {
   padding: 20px 0;
 }

 a.sponsor {
   margin: 20px 10px;
 }

 img.sponsorLogo {
   width: 60vw;
 }

}

/**************** teampage *********************/ @media (max-width:1083px) {

 .underlined::after {
   width: 615px;
 }

}

@media (max-width:673px) {

 .underlined::after {
   width: 500px;
 }

}

@media (max-width:549px) {

 .underlined::after {
   width: 90%;
 }

}

@media (max-width:421px) {

 .underlined::after {
   width: 270px;
 }

}

@media (max-width:768px) {

 .team {
   content: url("")
 }

 .TeamMemberBox:nth-child(2n+2) .PicBox {
   grid-row: 1;
 }

 .TeamMemberBox:nth-child(2n+2) .MemberDescription {
   grid-row: 2;
 }

 .TeamMemberBox:nth-child(2n+1) .MemberDescription {
   -ms-flex-item-align: start;
   align-self: start;
   padding-top: 15px;
 }

 .TeamMemberBox:nth-child(2n+2) .MemberDescription {
   -ms-flex-item-align: start;
   align-self: start;
   padding-top: 15px;
 }

 .TeamMemberBox {
   margin: 30px 0;
   height: auto;
 }

 .modalContent {
   width: calc(100% - 40px);
   height: calc(100% - 40px);
   border-radius: 10px;
   max-height: none;
   margin: 20px;
 }

}

@media (max-width:425px) {

 .modalContent {
   width: 100%;
   height: 100%;
   border-radius: 0;
   margin: 0;
 }

 .ModalFunFact {
   padding-bottom: 5px;
 }

 span.close {
   right: 10px;
   top: 10px;
 }

}

/**************** crowdfundingpage *********************/ @media (max-width:768px) {

 #excessive {
   display: none;
 }

 div.bubbles span.circle.right, div.bubbles span.circle.left {
   -webkit-animation: none;
   animation: none;
   display: none;
 }

}

@media (max-width:450px) {

 .countdown {
   display: block;
   width: 200px;
   margin: auto;
 }

 #DonateButton {
   margin-top: 0px;
 }

}

/**************** InterLab *********************/ @media (max-width: 768px) {

 div.InterLabFigureBox {
   width: 100%;
 }

}

/**************** Featured *********************/ @media (max-width: 1000px) {

 div.featuredBox {
   width: 70%;
 }

}

@media (max-width: 768px) {

 div.featuredBox {
   width: 90%;
   min-width: inherit;
   margin: 15px 0;
 }

 .Feature {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
 }

 .Feature h2 {
   width: auto;
   text-align: center;
   margin-left: 0;
 }

}

/**************** Newsletter *********************/ @media (max-width: 768px) {

 .collapsibleContent {
   padding: 0px 20px;
 }

 .popout.revealed .collapsibleContent {
   padding: 20px;
 }

 .popout.revealed {
   padding: 0;
 }

 .collapsible {
   font-size: 35px;
 }

 .popout {
   width: 90%;
 }

 /* .collapsible::before {
   height: 100%;
 } */

}

@media (max-width: 425px) {

 .popout.revealed .collapsibleContent {
   padding: 20px;
   padding-top: 20px;
 }

 .popout, .popout.chapter, .popout.protocols {
   width: calc(100vw - 40px);
   margin-left: 20px;
   margin-right: 20px;
 }

}

/**************** Model *********************/ @media (max-width: 950px) {

 .FigFlexbox .flexfig {
   width: 400px;
 }

 .FigFlexbox .flexfig.smallSize {
   width: 80%;
   max-width: none;
 }

 figure.resultfig {
   width: 100%;
   margin: 40px auto;
   padding: 0;
   overflow-y: hidden;
 }

}

/**************** Timeline *********************/ @media (max-width: 768px) {

 figure.resultfig.vertical {
   width: 60%;
 }

 figure.resultfig.horizontal {
   width: 90%;
 }

 .timeline li.timelineUnit {
   margin-top: -5px;
   padding-bottom: 50px;
 }

 .timeline li.timelineUnit .timelineContent {
   width: calc(95% - 50px);
 }

 .timelineUnit.right .timelineContent, .timelineUnit.left .timelineContent {
   left: calc(5% + 70px)
 }

 .timeline li.timelineUnit.right .timelineContent.revealed, .timeline li.timelineUnit.left .timelineContent.revealed {
   left: calc(5% + 50px);
   right: auto;
   opacity: 1;
 }

 .left .timelineContent .title {
   border-radius: 0 20px 0 0;
 }

 .timeline li.timelineUnit .linesegment {
   position: absolute;
   display: block;
   width: 8px;
   top: 0;
   bottom: 0;
   background: var(--main);
   border-radius: 4px;
 }

 .timeline li.timelineUnit.left .linesegment, .timeline li.timelineUnit.right .linesegment {
   left: calc(5% - 4px);
   right: auto;
 }

 .timeline li.timelineUnit.left i.iHPicon, .timeline li.timelineUnit.right i.iHPicon {
   left: 5%;
   right: auto;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }

 .timeline li.timelineUnit.right .arrow, .timeline li.timelineUnit.left .arrow {
   right: 100%;
   left: auto;
   border-radius: 100% 0 0 0;
 }

 .link.LeftRight1, .link.LeftRight2, .link.RightLeft1, .link.RightLeft2 {
   display: none;
 }

 .timeline li.timelineUnit.semiconclusion.left .arrow {
   border-top: 0;
   border-bottom: 42px solid var(--main);
   border-radius: 0 0 0 100%;
 }

 /* .timeline li.timelineUnit.semiconclusion.left .arrow {
   border-top: 0;
   border-bottom: 42px solid var(--main);
   border-radius: 0 0 100% 0;
 } */
 .timeline li.link.LeftMid1, .timeline li.link.RightMid1 {
   width: calc(25% + 4px);
   border-width: 0 0 8px 8px;
   left: calc(5% - 4px);
   -webkit-transform: skewY(10deg);
   transform: skewY(10deg);
   -webkit-transform-origin: 100% 0;
   transform-origin: 100% 0;
   border-radius: 0 0 0 30px;
   margin-top: 4px;
 }

 .timeline li.link.LeftMid2, .timeline li.link.RightMid2 {
   width: calc(20% + 5px);
   margin-top: -8px;
   margin-bottom: 5px;
   border-width: 8px 8px 0 0;
   left: calc(30% - 0px);
   -webkit-transform: skewY(10deg);
   transform: skewY(10deg);
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   border-radius: 0 30px 0 0;
 }

 .timeline li.link.MidLeft1, .timeline li.link.MidRight1 {
   width: calc(20% + 4px);
   border-width: 0 8px 8px 0px;
   left: calc(30% + 1px);
   -webkit-transform: skewY(-10deg);
   transform: skewY(-10deg);
   -webkit-transform-origin: 0 100%;
   transform-origin: 0 100%;
   border-radius: 0 0 30px 0;
   margin-top: 4px;
 }

 .timeline li.link.MidLeft2, .timeline li.link.MidRight2 {
   width: calc(25% + 5px);
   margin-top: -8px;
   margin-bottom: 0px;
   border-width: 8px 0 0 8px;
   left: calc(5% - 4px);
   -webkit-transform: skewY(-10deg);
   transform: skewY(-10deg);
   -webkit-transform-origin: 100% 0;
   transform-origin: 100% 0;
   border-radius: 30px 0 0 0;
 }

 .popout .PicCaroussel.vertical {
   width: 60%;
 }

 .popout .PicCaroussel.horizontal {
   width: 100%;
 }

}

.AchievementBox1 {

 height: 290px;
 width: 290px;
 background-color: var(--whiteish);
 border: 20px solid currentColor;

border-radius: 50%; position: relative; margin: 25px;

   padding:10px;

}

.Achievement {

 width: 100%;
 height: 100%;

}

.AchievementBox1:nth-child(5n+1) {

 color: var(--main);

} .AchievementBox1:nth-child(5n+2) {

 color: var(--accent1);

} .AchievementBox1:nth-child(5n+3) {

 color: var(--accent2);

} .AchievementBox1:nth-child(5n+4) {

 color: var(--accent3);

} .AchievementBox1:nth-child(5n+5) {

 color: var(--accent4);

} .AchievementBox1 p {

 display: block;
 position: relative;
 top: 50%;
 transform: translateY(-50%);
 text-align: center;
 color: var(--blackish);
 font-size: 25px;

} .AchievementBox1:nth-child(4n+1) div.iconBox {

 right: -15px;
 bottom: -15px;

}

.AchievementBox1:nth-child(4n+2) div.iconBox {

 top: -15px;
 left: -15px;

}

.AchievementBox1:nth-child(4n+3) div.iconBox {

 bottom: -15px;
 left: -15px;

}

.AchievementBox1:nth-child(4n+4) div.iconBox {

 top: -15px;
 right: -15px;

}

.padding-top {

 padding-top:20px;

}

@media (max-width: 420px) {

 .padding-top{
   padding-top:0;
 }
 .AchievementBox1{
   width:240px;
   height:240px;

margin-left:0; margin-right:0;

 }
 .AchievementBox1 p {
   font-size:20px;
 }

.AchievementBox1:nth-child(4n+1) div.iconBox {

 right: -25px;
 bottom: -25px;

}

.AchievementBox1:nth-child(4n+2) div.iconBox {

 top: -25px;
 left: -25px;

}

.AchievementBox1:nth-child(4n+3) div.iconBox {

 bottom: -25px;
 left: -25px;

}

.AchievementBox1:nth-child(4n+4) div.iconBox {

 top: -25px;
 right: -25px;

} }