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

Revision as of 13:17, 31 August 2018 (view source) ChielvanAmstel (Talk | contribs) ← Older edit		Revision as of 08:40, 4 September 2018 (view source) ChielvanAmstel (Talk | contribs) Newer edit →
Line 12:		Line 12:
	/* Font things */		/* Font things */
−
	@font-face {		@font-face {
	font-family: ProjectTitle;		font-family: ProjectTitle;
Line 46:		Line 45:
	/* Correct iGEM shit... */		/* Correct iGEM shit... */
−
	#Global p, p {		#Global p, p {
	padding: 0;		padding: 0;
Line 88:		Line 86:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* Global styles */		/* Global styles */
−
	sup, sub {		sup, sub {
	font-size: 60%;		font-size: 60%;
Line 183:		Line 179:
	padding: 60px 0 40px 0;		padding: 60px 0 40px 0;
	text-align: justify;		text-align: justify;
		+	text-align-last: start;
	}		}
Line 195:		Line 192:
	/* References */		/* References */
−
	.smaller {		.smaller {
	font-size: 0.75em;		font-size: 0.75em;
Line 214:		Line 210:
	/* Custom scrollbar (chrome & IE/Edge) */		/* Custom scrollbar (chrome & IE/Edge) */
−
	/* width */		/* width */
−
	::-webkit-scrollbar {		::-webkit-scrollbar {
	width: 10px;		width: 10px;
Line 223:		Line 217:
	::-webkit-scrollbar-track {		::-webkit-scrollbar-track {
	background: #efefef;		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);		box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
	}		}
Line 245:		Line 238:
	height: 15px;		height: 15px;
	} */		} */
−
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* Homepage */		/* Homepage */
−
	.circles {		.circles {
	background: url('https://static.igem.org/mediawiki/2018/3/3a/T--Leiden--circles1200pxplus.png') no-repeat;		background: url('https://static.igem.org/mediawiki/2018/3/3a/T--Leiden--circles1200pxplus.png') no-repeat;
Line 328:		Line 318:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* Eventpage */		/* Eventpage */
−
	.title {		.title {
	display: block;		display: block;
Line 569:		Line 557:
	opacity: 1;		opacity: 1;
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(4deg) translateY(-25px) scale(1);		-webkit-transform: rotate(4deg) translateY(-25px) scale(1);
Line 582:		Line 571:
	opacity: 1;		opacity: 1;
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(4deg) translateY(-25px) scale(1);		-webkit-transform: rotate(4deg) translateY(-25px) scale(1);
Line 595:		Line 585:
	opacity: 1;		opacity: 1;
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(-2deg) translateY(-30px) scale(1);		-webkit-transform: rotate(-2deg) translateY(-30px) scale(1);
Line 608:		Line 599:
	opacity: 1;		opacity: 1;
	}		}
		+
	100% {		100% {
	-webkit-transform: rotate(-2deg) translateY(-30px) scale(1);		-webkit-transform: rotate(-2deg) translateY(-30px) scale(1);
Line 623:		Line 615:
	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 640:		Line 633:
	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 650:		Line 644:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* Sponsorpage */		/* Sponsorpage */
−
	.SponsorFlexBox {		.SponsorFlexBox {
	padding: 25px 0;		padding: 25px 0;
Line 694:		Line 686:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* Teampage */		/* Teampage */
−
	header.white-out {		header.white-out {
	position: relative;		position: relative;
Line 817:		Line 807:
	/* 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 851:		Line 840:
	/* 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 869:		Line 857:
	/* 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 891:		Line 878:
	/* 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;		-ms-flex-item-align: start;
Line 1,010:		Line 996:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	div.CF {		div.CF {
	margin: 0px auto 50px;		margin: 0px auto 50px;
Line 1,038:		Line 1,023:
	/* static-dynamic switch */		/* static-dynamic switch */
−
	div.StatDynSwitch {		div.StatDynSwitch {
	position: fixed;		position: fixed;
Line 1,068:		Line 1,052:
	-webkit-transition: .4s;		-webkit-transition: .4s;
	transition: .4s;		transition: .4s;
−	-webkit-box-shadow: 0px 0px 5px #f7f7f7;
	box-shadow: 0px 0px 5px #f7f7f7;		box-shadow: 0px 0px 5px #f7f7f7;
	}		}
Line 1,090:		Line 1,073:
	input:checked+.slider:before {		input:checked+.slider:before {
	-webkit-transform: translateX(26px);		-webkit-transform: translateX(26px);
		+	-ms-transform: translateX(26px);
	transform: translateX(26px);		transform: translateX(26px);
	}		}
Line 1,108:		Line 1,092:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* InterLab */		/* InterLab */
−
	ul#DeviceList li {		ul#DeviceList li {
	display: list-item;		display: list-item;
Line 1,131:		Line 1,113:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* Featured */		/* Featured */
−
	.FeaturedFlexbox {		.FeaturedFlexbox {
	display: -webkit-box;		display: -webkit-box;
Line 1,227:		Line 1,207:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* correction */		/* correction */
−
	.collapsibleContent div {		.collapsibleContent div {
	line-height: 150%;		line-height: 150%;
Line 1,239:		Line 1,217:
	/* Newsletter */		/* Newsletter */
−
	.popout {		.popout {
	display: block;		display: block;
Line 1,331:		Line 1,308:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* Internal scrollbars in house-style */		/* Internal scrollbars in house-style */
−
	.mCustomScrollbar {		.mCustomScrollbar {
	-ms-touch-action: pinch-zoom;		-ms-touch-action: pinch-zoom;
Line 1,410:		Line 1,385:
	height: 100%;		height: 100%;
	margin: 0 auto;		margin: 0 auto;
		+	-webkit-border-radius: 16px;
		+	-moz-border-radius: 16px;
	border-radius: 16px		border-radius: 16px
	}		}
Line 1,425:		Line 1,402:
	height: 100%;		height: 100%;
	margin: 0 auto;		margin: 0 auto;
		+	-webkit-border-radius: 16px;
		+	-moz-border-radius: 16px;
	border-radius: 16px;		border-radius: 16px;
	text-align: center		text-align: center
Line 1,544:		Line 1,523:
	padding-bottom: 30px;		padding-bottom: 30px;
	-webkit-box-sizing: border-box;		-webkit-box-sizing: border-box;
		+	-moz-box-sizing: border-box;
	box-sizing: border-box		box-sizing: border-box
	}		}
Line 1,595:		Line 1,575:
	.mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {		.mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;		-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		+	-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		+	-o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
	transition: opacity .2s ease-in-out, background-color .2s ease-in-out		transition: opacity .2s ease-in-out, background-color .2s ease-in-out
	}		}
Line 1,600:		Line 1,582:
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {		.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {
	-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;		-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
		+	-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
		+	-o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
	transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out		transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out
	}		}
Line 1,657:		Line 1,641:
	/***********************************************************************************************************************************************************/		/***********************************************************************************************************************************************************/
−
	/* Responsiveness*/		/* Responsiveness*/
−
	/* Global */		/* Global */
−
	@media (max-width: 768px) {		@media (max-width: 768px) {
	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%;
Line 1,684:		Line 1,666:
	margin: auto;		margin: auto;
	}		}
		+
	div#UnderTitle {		div#UnderTitle {
	font-size: calc(100vw * 0.0288 + 1.437px);		font-size: calc(100vw * 0.0288 + 1.437px);
Line 1,693:		Line 1,676:
	/* Homepage */		/* Homepage */
−
	@media (max-width: 470px) {		@media (max-width: 470px) {
	div#Fsos {		div#Fsos {
Line 1,700:		Line 1,682:
	margin: auto;		margin: auto;
	}		}
		+
	div#UnderTitle {		div#UnderTitle {
	font-size: 15px;		font-size: 15px;
Line 1,709:		Line 1,692:
	/* 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 1,725:		Line 1,709:
	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 1,733:		Line 1,718:
	animation: none;		animation: none;
	}		}
		+
	.card:nth-child(3n+0) {		.card:nth-child(3n+0) {
	-webkit-transform: translateY(0);		-webkit-transform: translateY(0);
Line 1,741:		Line 1,727:
	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;
	}		}
		+
	.parallaxCircles.circle {		.parallaxCircles.circle {
	display: none;		display: none;
Line 1,770:		Line 1,762:
	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 1,777:		Line 1,770:
	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 1,784:		Line 1,778:
	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 1,791:		Line 1,786:
	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 1,798:		Line 1,794:
	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 1,808:		Line 1,805:
	/**************** 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 1,822:		Line 1,820:
	/**************** teampage *********************/		/**************** teampage *********************/
−
	@media (max-width:1083px) {		@media (max-width:1083px) {
	.underlined::after {		.underlined::after {
Line 1,851:		Line 1,848:
	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;		-ms-flex-item-align: start;
Line 1,862:		Line 1,862:
	padding-top: 15px;		padding-top: 15px;
	}		}
		+
	.TeamMemberBox:nth-child(2n+2) .MemberDescription {		.TeamMemberBox:nth-child(2n+2) .MemberDescription {
	-ms-flex-item-align: start;		-ms-flex-item-align: start;
Line 1,867:		Line 1,868:
	padding-top: 15px;		padding-top: 15px;
	}		}
		+
	.TeamMemberBox {		.TeamMemberBox {
	margin: 30px 0;		margin: 30px 0;
	height: auto;		height: auto;
	}		}
		+
	.modalContent {		.modalContent {
	width: calc(100% - 40px);		width: calc(100% - 40px);
Line 1,887:		Line 1,890:
	margin: 0;		margin: 0;
	}		}
		+
	.ModalFunFact {		.ModalFunFact {
	padding-bottom: 5px;		padding-bottom: 5px;
	}		}
		+
	span.close {		span.close {
	right: 10px;		right: 10px;
Line 1,897:		Line 1,902:
	/**************** crowdfundingpage *********************/		/**************** crowdfundingpage *********************/
−
	@media (max-width:768px) {		@media (max-width:768px) {
	#excessive {		#excessive {
	display: none;		display: none;
	}		}
		+
	div.bubbles span.circle.right, div.bubbles span.circle.left {		div.bubbles span.circle.right, div.bubbles span.circle.left {
	-webkit-animation: none;		-webkit-animation: none;
Line 1,915:		Line 1,920:
	margin: auto;		margin: auto;
	}		}
		+
	#DonateButton {		#DonateButton {
	margin-top: 0px;		margin-top: 0px;
Line 1,921:		Line 1,927:
	/**************** InterLab *********************/		/**************** InterLab *********************/
−
	@media (max-width: 768px) {		@media (max-width: 768px) {
	div.InterLabFigureBox {		div.InterLabFigureBox {
Line 1,929:		Line 1,934:
	/**************** Featured *********************/		/**************** Featured *********************/
−
	@media (max-width: 1000px) {		@media (max-width: 1000px) {
	div.featuredBox {		div.featuredBox {
Line 1,942:		Line 1,946:
	margin: 15px 0;		margin: 15px 0;
	}		}
		+
	.Feature {		.Feature {
	-webkit-box-orient: vertical;		-webkit-box-orient: vertical;
Line 1,948:		Line 1,953:
	flex-direction: column;		flex-direction: column;
	}		}
		+
	.Feature h2 {		.Feature h2 {
	width: auto;		width: auto;
Line 1,955:		Line 1,961:
	/**************** Newsletter *********************/		/**************** Newsletter *********************/
−
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.collapsibleContent {		.collapsibleContent {
	padding: 0px 20px;		padding: 0px 20px;
	}		}
		+
	.popout.revealed .collapsibleContent {		.popout.revealed .collapsibleContent {
	padding: 20px;		padding: 20px;
	}		}
		+
	.popout.revealed {		.popout.revealed {
	padding: 0;		padding: 0;
	}		}
		+
	.collapsible {		.collapsible {
	font-size: 35px;		font-size: 35px;
	}		}
		+
	.collapsible::before {		.collapsible::before {
	height: 80px;		height: 80px;
Line 1,979:		Line 1,988:
	padding-top: 20px;		padding-top: 20px;
	}		}
		+
	.popout {		.popout {
	width: 100%;		width: 100%;
	}		}
	}		}

---

Revision as of 08:40, 4 September 2018

root {

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

}

/* Font things */ @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;

}

/* 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%;

}

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: 3em;

}

h1 {

 font-size: 2em;

}

h2 {

 font-size: 1.5em;

}

h3 {

 font-size: 1.17em;

}

h4 {

 font-size: 1.12em;

}

h5 {

 font-size: .83em;

}

h6 {

 font-size: .75em;

}

.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;

}

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;

}

.hidden {

 display: none;

}

/* References */ .smaller {

 font-size: 0.75em;

}

.center {

 text-align: center;

}

.caption {

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

}

span.grouped {

 display: inline-block;

}

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

-webkit-scrollbar {

 width: 10px;

}

-webkit-scrollbar-track {

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

}

-webkit-scrollbar-thumb {

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

}

/* .modalContent::-webkit-scrollbar-track {

 background: none;
 box-shadow: none;

}

.modalContent::-webkit-scrollbar-thumb {

 background: var(--main);

}

.modalContent::-webkit-scrollbar-button {

 height: 15px;

} */ /***********************************************************************************************************************************************************/ /* Homepage */ .circles {

 background: url('https://static.igem.org/mediawiki/2018/3/3a/T--Leiden--circles1200pxplus.png') no-repeat;
 /* url('https://static.igem.org/mediawiki/2018/f/f2/T--Leiden--circles1200px.png')  */
 background-position: 50% 50%;
 background-size: cover;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 min-height: calc(70vh - 10px);
 position: relative;
 top: 0;
 z-index: 3;

}

div#headercontent {

 position: absolute;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 width: 100%;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);

}

div.logo {

 background: url('https://static.igem.org/mediawiki/2018/c/c8/T--Leiden--LogoLeidenV1.png');
 height: calc(0.9 * 50vw);
 max-height: 300px;
 width: 50%;
 margin: auto;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center bottom;

}

div#Fsos {

 color: var(--blackish);
 font-size: 50px;
 font-family: ProjectTitle;
 display: block;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 margin: auto;
 text-align: center;
 padding-top: 20px;
 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);
 border-radius: 50px;

}

div#UnderTitle {

 color: var(--blackish);
 font-size: 21.62px;
 font-family: UnderTitle;
 display: block;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 margin: auto;
 text-align: center;
 padding-left: 2px;
 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);
 border-radius: 20px;

}

/***********************************************************************************************************************************************************/ /* 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;

}

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;
 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: 1000;
 -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;
 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 {

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

}

1. DonateButton {

 display: block;
 margin: 25px auto 0;
 width: 250px;
 border: 2px solid var(--main);
 background: rgba(255, 179, 117, 0.4);
 border-radius: 15px;
 padding: 30px 15px;
 text-align: 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;
 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);
 -ms-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 {

 /* flex-grow: 1; */
 padding: 0 20px;
 margin-left: auto;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 /* text-align: right; */

}

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;

}

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

 line-height: 150%;

}

table {

 background: none;

}

/* 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 {

 margin-bottom: 75px;

}

.popout.revealed {

 background: white;
 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;
 font-family: Body;
 font-size: 50px;
 padding-top: 17px;
 padding-bottom: 17px;
 width: 100%;
 position: relative;
 z-index: 15;

}

.collapsible::before {

 position: absolute;
 content: ;
 top: 0;
 left: 0;
 height: 100px;
 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 {

 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;

}

/***********************************************************************************************************************************************************/ /* Internal scrollbars in house-style */ .mCustomScrollbar {

 -ms-touch-action: pinch-zoom;
 touch-action: pinch-zoom

}

.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action {

 -ms-touch-action: auto;
 touch-action: auto

}

.mCustomScrollBox {

 position: relative;
 overflow: hidden;
 height: 100%;
 max-width: 100%;
 outline: 0;
 direction: ltr

}

.mCSB_container {

 overflow: hidden;
 width: auto;
 height: auto

}

.mCSB_inside>.mCSB_container {

 margin-right: 30px

}

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {

 margin-right: 0

}

.mCSB_scrollTools {

 position: absolute;
 width: 16px;
 height: auto;
 left: auto;
 top: 0;
 right: 0;
 bottom: 0;
 opacity: .75;
 filter: "alpha(opacity=75)";
 -ms-filter: "alpha(opacity=75)"

}

.mCSB_outside+.mCSB_scrollTools {

 right: -26px

}

.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools, .mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {

 right: auto;
 left: 0

}

.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {

 left: -26px

}

.mCSB_scrollTools .mCSB_draggerContainer {

 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 height: auto

}

.mCSB_scrollTools a+.mCSB_draggerContainer {

 margin: 20px 0

}

.mCSB_scrollTools .mCSB_draggerRail {

 width: 2px;
 height: 100%;
 margin: 0 auto;
 -webkit-border-radius: 16px;
 -moz-border-radius: 16px;
 border-radius: 16px

}

.mCSB_scrollTools .mCSB_dragger {

 cursor: pointer;
 width: 100%;
 height: 30px;
 z-index: 1

}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {

 position: relative;
 width: 4px;
 height: 100%;
 margin: 0 auto;
 -webkit-border-radius: 16px;
 -moz-border-radius: 16px;
 border-radius: 16px;
 text-align: center

}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {

 width: 12px

}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {

 width: 8px

}

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp {

 display: block;
 position: absolute;
 height: 20px;
 width: 100%;
 overflow: hidden;
 margin: 0 auto;
 cursor: pointer

}

.mCSB_scrollTools .mCSB_buttonDown {

 bottom: 0

}

.mCSB_horizontal.mCSB_inside>.mCSB_container {

 margin-right: 0;
 margin-bottom: 30px

}

.mCSB_horizontal.mCSB_outside>.mCSB_container {

 min-height: 100%

}

.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {

 margin-bottom: 0

}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {

 width: auto;
 height: 16px;
 top: auto;
 right: 0;
 bottom: 0;
 left: 0

}

.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal {

 bottom: -26px

}

.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer {

 margin: 0 20px

}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {

 width: 100%;
 height: 2px;
 margin: 7px 0

}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {

 width: 30px;
 height: 100%;
 left: 0

}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {

 width: 100%;
 height: 4px;
 margin: 6px auto

}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {

 height: 12px;
 margin: 2px auto

}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {

 height: 8px;
 margin: 4px 0

}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {

 display: block;
 position: absolute;
 width: 20px;
 height: 100%;
 overflow: hidden;
 margin: 0 auto;
 cursor: pointer

}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {

 left: 0

}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {

 right: 0

}

.mCSB_container_wrapper {

 position: absolute;
 height: auto;
 width: auto;
 overflow: hidden;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin-right: 30px;
 margin-bottom: 30px

}

.mCSB_container_wrapper>.mCSB_container {

 padding-right: 30px;
 padding-bottom: 30px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box

}

.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical {

 bottom: 20px

}

.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal {

 right: 20px

}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical {

 bottom: 0

}

.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal {

 right: 0

}

.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal {

 left: 20px

}

.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal {

 left: 0

}

.mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper {

 margin-right: 0;
 margin-left: 30px

}

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container {

 padding-right: 0

}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container {

 padding-bottom: 0

}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {

 margin-right: 0;
 margin-left: 0

}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {

 margin-bottom: 0

}

.mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {

 -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
 -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
 -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
 transition: opacity .2s ease-in-out, background-color .2s ease-in-out

}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {

 -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
 -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
 -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
 transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out

}

.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools, .mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools {

 opacity: 0;
 filter: "alpha(opacity=0)";
 -ms-filter: "alpha(opacity=0)"

}

.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools, .mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools, .mCustomScrollBox:hover>.mCSB_scrollTools, .mCustomScrollBox:hover~.mCSB_scrollTools, .mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag {

 opacity: 1;
 filter: "alpha(opacity=100)";
 -ms-filter: "alpha(opacity=100)"

}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail {

 background-color: transparent

}

.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical, .mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical {

 right: 0;
 margin: 12px 0

}

.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal {

 bottom: 0;
 margin: 0 12px

}

.mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical, .mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical {

 left: 0;
 right: auto

}

.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger {

 height: 50px

}

.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger {

 width: 50px

}

.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {

 background-color: #FFB375;
 background-color: rgba(255, 179, 117, 0.4);
 filter: "alpha(opacity=40)";
 -ms-filter: "alpha(opacity=40)";

}

.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {

 background-color: #FFB375;
 background-color: rgba(255, 179, 117, 1);
 filter: "alpha(opacity=100)";
 -ms-filter: "alpha(opacity=100)";

}

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

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

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

}

@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;
 }

}

/* Homepage */ @media (max-width: 470px) {

 div#Fsos {
   font-size: 35px;
   width: 95%;
   margin: auto;
 }

 div#UnderTitle {
   font-size: 15px;
   width: 95%;
   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;
 }

}

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

 .collapsibleContent {
   padding: 0px 20px;
 }

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

 .popout.revealed {
   padding: 0;
 }

 .collapsible {
   font-size: 35px;
 }

 .collapsible::before {
   height: 80px;
 }

}

@media (max-width: 425px) {

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

 .popout {
   width: 100%;
 }

}