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

Line 14: Line 14:
 
@font-face {
 
@font-face {
 
   font-family: ProjectTitle;
 
   font-family: ProjectTitle;
−
   src: url('https://static.igem.org/mediawiki/2018/b/b7/T--Leiden--copperplatelightssilight.ttf');
+
   /* src: url('https://static.igem.org/mediawiki/2018/b/b7/T--Leiden--copperplatelightssilight.ttf'); */
−
   /* src: url('../webfonts/copperplatelightssilight.ttf'); */
+
   src: url('../webfonts/copperplatelightssilight.ttf');
 
}
 
}
  
 
@font-face {
 
@font-face {
 
   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/YuGothic-Light-reduced.ttf'); */
+
   src: url('../webfonts/YuGothic-Light-reduced.ttf');
 
}
 
}
  
 
@font-face {
 
@font-face {
 
   font-family: Kopje;
 
   font-family: Kopje;
−
   src: url('https://static.igem.org/mediawiki/2018/c/ca/T--Leiden--Roboto-Medium.ttf');
+
   /* src: url('https://static.igem.org/mediawiki/2018/c/ca/T--Leiden--Roboto-Medium.ttf'); */
−
   /* src: url('../webfonts/Roboto-Medium.ttf'); */
+
   src: url('../webfonts/Roboto-Medium.ttf');
 
   font-weight: bold;
 
   font-weight: bold;
 
}
 
}
Line 33: Line 33:
 
@font-face {
 
@font-face {
 
   font-family: Body;
 
   font-family: Body;
−
   src: url('https://static.igem.org/mediawiki/2018/0/0d/T--Leiden--Roboto-Light.ttf');
+
   /* src: url('https://static.igem.org/mediawiki/2018/0/0d/T--Leiden--Roboto-Light.ttf'); */
−
   /* src: url('../webfonts/Roboto-Light.ttf'); */
+
   src: url('../webfonts/Roboto-Light.ttf');
 
}
 
}
  
 
@font-face {
 
@font-face {
 
   font-family: Body;
 
   font-family: Body;
−
   src: url('https://static.igem.org/mediawiki/2018/b/bb/T--Leiden--Roboto-LightItalic.ttf');
+
   /* src: url('https://static.igem.org/mediawiki/2018/b/bb/T--Leiden--Roboto-LightItalic.ttf'); */
−
   /* src: url('../webfonts/Roboto-LightItalic.ttf'); */
+
   src: url('../webfonts/Roboto-LightItalic.ttf');
 
   font-style: italic;
 
   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;
 
}
 
}
  
Line 102: Line 115:
  
 
h1.SectionTitle {
 
h1.SectionTitle {
−
   font-size: 3em;
+
   font-size: 3rem;
 
   z-index: 50;
 
   z-index: 50;
 
   position: relative;
 
   position: relative;
Line 108: Line 121:
  
 
h2.SectionTitle {
 
h2.SectionTitle {
−
   font-size: 2.4em;
+
   font-size: 2.4rem;
 
}
 
}
  
Line 116: Line 129:
  
 
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 161: Line 174:
 
}
 
}
  
−
li, ul {
+
ul li, ul {
 
   margin: 0;
 
   margin: 0;
 
   line-height: normal;
 
   line-height: normal;
Line 195: Line 208:
 
   color: inherit;
 
   color: inherit;
 
   text-decoration: none;
 
   text-decoration: none;
 +
}
 +
 +
a.colouredlink {
 +
  color: var(--main);
 +
  font-family: Kopje;
 +
  cursor: pointer;
 
}
 
}
  
Line 236: Line 255:
 
}
 
}
  
−
/*
+
/*********************** Blobs ***************************/
−
.modalContent::-webkit-scrollbar-track {
+
.blobs {
−
   background: none;
+
  background: var(--main);
−
   box-shadow: none;
+
  margin: 0 -2px;
 +
  padding: 2px 7px;
 +
  -webkit-filter: url("#goo");
 +
  filter: url("#goo");
 +
  cursor: default;
 +
  position: relative;
 +
  display: inline;
 +
  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;
 
}
 
}
  
−
.modalContent::-webkit-scrollbar-thumb {
+
.blobs:hover {
 +
  border-width: 10px;
 +
  margin: -10px -12px;
 +
}
 +
 
 +
.blobs .popoutBlob {
 +
  position: absolute;
 +
  z-index: -1;
 +
  display: block;
 +
  width: 20px;
 +
  height: 20px;
 +
  bottom: 3px;
 +
  left: calc(50% - 10px);
 
   background: var(--main);
 
   background: var(--main);
 +
  /* background: blue; */
 +
  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:hover .popoutBlob {
 +
  left: calc(50% - 95px);
 +
  /* 50% - (0.5xwidth + 15 + 20) */
 +
  border-radius: 10px;
 +
  width: 120px;
 +
  height: 100px;
 +
  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.3s 0.6s forwards;
 +
  animation: textappear 0.3s 0.6s forwards;
 +
}
 +
 +
.blobs .wobblybobbly {
 +
  position: absolute;
 +
  z-index: -1;
 +
  width: 30%;
 +
  background: var(--main);
 +
  /* background: red; */
 +
  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% {
 +
    font-size: 0px;
 +
    color: var(--main);
 +
  }
 +
 +
  1% {
 +
    font-size: 1em;
 +
    color: var(--main);
 +
  }
 +
 +
  100% {
 +
    font-size: 1em;
 +
    color: var(--blackish);
 +
  }
 +
}
 +
 +
@keyframes textappear {
 +
  0% {
 +
    font-size: 0px;
 +
    color: var(--main);
 +
  }
 +
 +
  1% {
 +
    font-size: 1em;
 +
    color: var(--main);
 +
  }
 +
 +
  100% {
 +
    font-size: 1em;
 +
    color: var(--blackish);
 +
  }
 +
}
 +
 +
/*********************** 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);
 +
}
 +
 +
.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;
 +
  position: relative;
 +
  margin-top: 30px;
 +
  -webkit-transition: all 0.5s;
 +
  transition: all 0.5s;
 +
}
 +
 +
.NavBlock:hover .NavBlockIcon {
 +
  font-size: 30px;
 +
  margin-top: 0;
 +
}
 +
 +
.NavBlockText {
 +
  color: var(--blackish);
 +
  text-align: justify;
 +
  -webkit-hyphens: auto;
 +
  -ms-hyphens: auto;
 +
  hyphens: auto;
 +
  font-size: 15px;
 +
  overflow: hidden;
 +
  -webkit-transition: all 0.5s;
 +
  transition: all 0.5s;
 +
  /* padding-top: 20px; */
 +
  opacity: 0;
 +
}
 +
 +
.NavBlockText span {
 +
  display: block;
 +
  color: var(--whiteish);
 +
  font-family: Kopje;
 +
  font-size: 16px;
 +
  text-align: center;
 +
  padding-bottom: 10px;
 +
}
 +
 +
.NavBlock:hover .NavBlockText {
 +
  opacity: 1;
 +
}
 +
 +
/*********************** Timeline Concept ***************************/
 +
.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 {
 +
  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);
 +
  padding: 10px 25px 20px;
 +
  height: 100%;
 +
  color: var(--blackish);
 +
  border-radius: 20px;
 +
  border: 1px solid #aaa;
 +
  opacity: 0;
 +
  -webkit-transition: all 0.5s, opacity 1s;
 +
  transition: all 0.5s, opacity 1s;
 +
  background: var(--whiteish);
 +
}
 +
 +
.timeline li.timelineUnit.conclusion .timelineContent {
 +
  padding: 0;
 +
}
 +
 +
.timelineContent .title {
 +
  font-family: Kopje;
 +
  border-radius: 20px 20px 0 0;
 +
  /* border: 1px solid #aaa; */
 +
  border-bottom: 3px solid var(--main);
 +
  /* margin: 0 25px; */
 +
  /* border-bottom: 0px; */
 +
  /* border-radius: 20px 20px 0 0; */
 +
  padding: 7px 0px 7px;
 +
  /* background: var(--main); */
 +
  background: var(--whiteish);
 +
  /* border-bottom: 0px; */
 +
}
 +
 +
.timelineContent .text {
 +
  background: var(--whiteish);
 +
  padding: 10px 0px 0px;
 +
  /* 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);
 +
}
 +
 +
.conclusion .timelineContent .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 {
 +
  position: absolute;
 +
  font-size: 30px;
 +
  border-radius: 50%;
 +
  width: 60px;
 +
  height: 60px;
 +
  background: var(--main);
 +
  color: white;
 +
  top: 100px;
 +
}
 +
 +
.timeline li.timelineUnit.left i {
 +
  right: 10%;
 +
  -webkit-transform: translateX(50%);
 +
  transform: translateX(50%);
 +
}
 +
 +
.timeline li.timelineUnit.right i {
 +
  left: 10%;
 +
  -webkit-transform: translateX(-50%);
 +
  transform: translateX(-50%);
 +
}
 +
 +
.timeline li.timelineUnit i::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: 20px;
 +
  width: 48px;
 +
  height: 40px;
 +
  border-top: 25px 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 .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;
 
}
 
}
  
−
.modalContent::-webkit-scrollbar-button {
 
−
  height: 15px;
 
−
} */
 
 
/***********************************************************************************************************************************************************/
 
/***********************************************************************************************************************************************************/
 
/* Homepage */
 
/* Homepage */
Line 911: Line 1,593:
 
   background: rgb(0, 0, 0);
 
   background: rgb(0, 0, 0);
 
   background: rgba(0, 0, 0, 0.5);
 
   background: rgba(0, 0, 0, 0.5);
−
   z-index: 1000;
+
   z-index: 2000;
 
   -webkit-transition: all 0.5s;
 
   -webkit-transition: all 0.5s;
 
   transition: all 0.5s;
 
   transition: all 0.5s;
Line 1,023: Line 1,705:
 
   display: block;
 
   display: block;
 
   margin: 25px auto 0;
 
   margin: 25px auto 0;
−
   width: 250px;
+
   width: -webkit-max-content;
 +
  width: -moz-max-content;
 +
  width: max-content;
 
   border: 2px solid var(--main);
 
   border: 2px solid var(--main);
 
   background: rgba(255, 179, 117, 0.4);
 
   background: rgba(255, 179, 117, 0.4);
 
   border-radius: 15px;
 
   border-radius: 15px;
−
   padding: 30px 15px;
+
   padding: 30px 25px;
 
   text-align: center;
 
   text-align: center;
 
   font-size: 35px;
 
   font-size: 35px;
Line 1,240: Line 1,924:
 
}
 
}
  
−
.popout:last-of-type {
+
.popout:last-of-type, .popout.protocols:last-of-type, .popout.chapter:last-of-type {
 
   margin-bottom: 75px;
 
   margin-bottom: 75px;
 
}
 
}
  
 
.popout.revealed {
 
.popout.revealed {
−
   background: white;
+
   background: #fdfdfd;
 
   margin: 30px auto;
 
   margin: 30px auto;
 
   -webkit-box-shadow: 2px 2px 15px 0px gray;
 
   -webkit-box-shadow: 2px 2px 15px 0px gray;
Line 1,264: Line 1,948:
 
   font-family: Body;
 
   font-family: Body;
 
   font-size: 50px;
 
   font-size: 50px;
−
   padding-top: 17px;
+
   padding: 17px 50px;
−
  padding-bottom: 17px;
+
 
   width: 100%;
 
   width: 100%;
 
   position: relative;
 
   position: relative;
 
   z-index: 15;
 
   z-index: 15;
 +
  color: rgb(235, 235, 235);
 
}
 
}
  
Line 1,276: Line 1,960:
 
   top: 0;
 
   top: 0;
 
   left: 0;
 
   left: 0;
−
   height: 100px;
+
   height: 100%;
 
   width: 10px;
 
   width: 10px;
 
   background: var(--accent2);
 
   background: var(--accent2);
Line 1,305: Line 1,989:
  
 
.collapsibleContent {
 
.collapsibleContent {
 +
  position: relative;
 
   max-height: 0;
 
   max-height: 0;
 
   overflow-y: hidden;
 
   overflow-y: hidden;
Line 1,343: Line 2,028:
  
 
/***********************************************************************************************************************************************************/
 
/***********************************************************************************************************************************************************/
 +
/* 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.wide {
 +
  padding: 0;
 +
}
 +
 +
figure.resultfig img {
 +
  width: 100%;
 +
}
 +
 +
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%;
 +
}
 +
 +
figcaption {
 +
  font-size: 0.8em;
 +
  text-align: justify;
 +
  padding-top: 10px;
 +
}
 +
 +
figcaption 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.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";
 +
}
 +
 
/* Internal scrollbars in house-style */
 
/* Internal scrollbars in house-style */
 
.mCustomScrollbar {
 
.mCustomScrollbar {
Line 2,004: Line 2,886:
 
   }
 
   }
  
−
   .collapsible::before {
+
   /* .collapsible::before {
−
     height: 80px;
+
     height: 100%;
−
   }
+
   } */
 
}
 
}
  
 
@media (max-width: 425px) {
 
@media (max-width: 425px) {
 
   .popout.revealed .collapsibleContent {
 
   .popout.revealed .collapsibleContent {
−
     padding: 5px;
+
     padding: 20px;
 
     padding-top: 20px;
 
     padding-top: 20px;
 
   }
 
   }
  
−
   .popout {
+
   .popout, .popout.chapter, .popout.protocols {
 +
    width: calc(100vw - 40px);
 +
    margin-left: 20px;
 +
    margin-right: 20px;
 +
  }
 +
}
 +
 
 +
/**************** Model *********************/
 +
@media (max-width: 950px) {
 +
  .FigFlexbox .flexfig {
 +
    width: 400px;
 +
  }
 +
 
 +
  figure.resultfig {
 
     width: 100%;
 
     width: 100%;
 +
    margin: 40px auto;
 +
    padding: 0;
 +
    overflow-y: hidden;
 +
  }
 +
}
 +
 +
/**************** Timeline *********************/
 +
@media (max-width: 768px) {
 +
  .timeline li.timelineUnit {
 +
    margin-top: -5px;
 +
    padding-bottom: 50px;
 +
  }
 +
 +
  .timeline li.timelineUnit .timelineContent {
 +
    width: calc(95% - 50px);
 +
    padding: 25px;
 +
  }
 +
 +
  .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;
 +
  }
 +
 +
  .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, .timeline li.timelineUnit.right i {
 +
    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.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;
 
   }
 
   }
 
}
 
}

Revision as of 13:38, 26 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;

}

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

}

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;

}

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 { 

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

}

.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;
 -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;
 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: 20px;
 bottom: 3px;
 left: calc(50% - 10px);
 background: var(--main);
 /* background: blue; */
 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:hover .popoutBlob { 

 left: calc(50% - 95px);
 /* 50% - (0.5xwidth + 15 + 20) */
 border-radius: 10px;
 width: 120px;
 height: 100px;
 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.3s 0.6s forwards;
 animation: textappear 0.3s 0.6s forwards;

}

.blobs .wobblybobbly { 

 position: absolute;
 z-index: -1;
 width: 30%;
 background: var(--main);
 /* background: red; */
 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% {
   font-size: 0px;
   color: var(--main);
 }

 1% {
   font-size: 1em;
   color: var(--main);
 }

 100% {
   font-size: 1em;
   color: var(--blackish);
 }

}

@keyframes textappear { 

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

 1% {
   font-size: 1em;
   color: var(--main);
 }

 100% {
   font-size: 1em;
   color: var(--blackish);
 }

}

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

}

.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;
 position: relative;
 margin-top: 30px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;

}

.NavBlock:hover .NavBlockIcon { 

 font-size: 30px;
 margin-top: 0;

}

.NavBlockText { 

 color: var(--blackish);
 text-align: justify;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
 font-size: 15px;
 overflow: hidden;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 /* padding-top: 20px; */
 opacity: 0;

}

.NavBlockText span { 

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

}

.NavBlock:hover .NavBlockText { 

 opacity: 1;

}

/*********************** Timeline Concept ***************************/ .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 { 

 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);
 padding: 10px 25px 20px;
 height: 100%;
 color: var(--blackish);
 border-radius: 20px;
 border: 1px solid #aaa;
 opacity: 0;
 -webkit-transition: all 0.5s, opacity 1s;
 transition: all 0.5s, opacity 1s;
 background: var(--whiteish);

}

.timeline li.timelineUnit.conclusion .timelineContent { 

 padding: 0;

}

.timelineContent .title { 

 font-family: Kopje;
 border-radius: 20px 20px 0 0;
 /* border: 1px solid #aaa; */
 border-bottom: 3px solid var(--main);
 /* margin: 0 25px; */
 /* border-bottom: 0px; */
 /* border-radius: 20px 20px 0 0; */
 padding: 7px 0px 7px;
 /* background: var(--main); */
 background: var(--whiteish);
 /* border-bottom: 0px; */

}

.timelineContent .text { 

 background: var(--whiteish);
 padding: 10px 0px 0px;
 /* 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);

}

.conclusion .timelineContent .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 { 

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

}

.timeline li.timelineUnit.left i { 

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

}

.timeline li.timelineUnit.right i { 

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

}

.timeline li.timelineUnit i::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: 20px;
 width: 48px;
 height: 40px;
 border-top: 25px 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 .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;

}

/***********************************************************************************************************************************************************/ /* 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("T--Leiden--group_cropped_wide.jpg");

}

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

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

}

/***********************************************************************************************************************************************************/ /* 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;
 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:nth-of-type(2n+1) { 

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

}

ul.bullet li.description { 

 padding-left: 37px;

}

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

 padding: 0;

}

figure.resultfig img { 

 width: 100%;

}

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

}

figcaption { 

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

}

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

}

/* 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;
 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;
 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;
 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;
 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;
 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("T--Leiden--group_cropped_square.jpg")
 }

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

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

}

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

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

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

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

 .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, .timeline li.timelineUnit.right i {
   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.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;
 }

}