Team:TUDelft/css/custom

/* TEMP */

/*

top_menu_14 {

   background-color: #ff9800;
   border-bottom: 2px solid #ff9800;
   transition: all .25s ease-in-out;
   z-index: 3;

}

top_menu_14:hover,
top_menu_14.hover {

   background-color: black;
   border-bottom: 2px solid black;

}

/

/* Media wiki removal

- - - - /

nav ul {

   line-height: 56px;

}

content {

   margin-top: 0px !important;

}

top_menu_inside #user_item {

   padding-top: 0;

}

top_menu_inside #bars_item {

   top: 0;

}

globalWrapper {

   padding-bottom: 0px;
   z-index: 30;

}

top_menu_inside {

   opacity: 0;
   -webkit-transition: opacity .25s ease-in-out;
   transition: opacity .25s ease-in-out;

}

top_menu_inside,
top_menu_14.hover {

   opacity: 1;

}

.igem_2017_menu_wrapper {

   z-index: 10;
   display: none;

}

ul {

   margin-left: 0;

}

top_menu_under {

   height: 0px;

}

nav ul a:hover {

   text-decoration: none;

}

/* ONE MORE THING (TO HAVE NO SHADOW ON TOP OF OUR NAV BAR) */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– */

nav {

   -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);

}

/* GENERAL */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– */

up-btn {

   position: fixed;
   color: blue;
   opacity: .3;
   bottom: 30px;
   right: 30px;
   z-index: 500;
   background-repeat: no-repeat;
   background-size: contain;
   background-image: url("");

/*

   mask-image: url("");
   mask-size: contain;
   -webkit-mask-image: url("");
   -webkit-mask-size: contain;

/

/* background-color: blue;*/

   background-size: contain;
   height: 4em;
   width: 4em;

}

html {}

body {

   margin: 0;

}

.mediawiki,

globalWrapper {

   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.mediawiki p,

globalWrapper p {

   margin: 1em 0;
   text-align: justify;
   text-justify: inter-word;

}

.mediawiki h1, #globalWrapper h1 {

   border-bottom: 1px solid #aaa;

}

.mediawiki h3, #globalWrapper h3 {

   margin-top: 3rem;

}

.mediawiki h1, #globalWrapper h1, .mediawiki h2, #globalWrapper h2, .mediawiki h3, #globalWrapper h3, .mediawiki h4, #globalWrapper h4, .mediawiki h5, #globalWrapper h5, .mediawiki h6, #globalWrapper h6 {

   color: rgb(34, 34, 34);
   font-weight: 300;
   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   padding: 0;

}

.mediawiki p,

globalWrapper p {

   color: rgb(34, 34, 34);
   opacity: 0.87;

}

.mediawiki ul {

   margin: 0;

}

/* BLOCKQUOTES */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– */

blockquote {

}

blockquote {

 display:block;
 background: #fff;
 padding: 15px 20px 15px 80px;
 margin: 0 0 20px;
 position: relative;
 
 /*Font*/
 font-size: 25px;
 line-height: 1.2;
 color: #666;
 text-align: justify;
 
 /*Borders - (Optional)*/
 border-left: 15px solid #ec407a;
 border-right: 2px solid #ec407a;
 
 /*Box Shadow - (Optional)*/
 -webkit-box-shadow: 2px 2px 15px #ccc;
 box-shadow: 2px 2px 15px #ccc;

}

.project blockquote {

 border-left: 15px solid #26c6da;
 border-right: 2px solid #26c6da;

}

.HP blockquote {

 border-left: 15px solid #ec407a;
 border-right: 2px solid #ec407a;

}

.contribution blockquote, .contribution blockquote {

 border-left: 15px solid #26a69a;
 border-right: 2px solid #26a69a;

}

.acknowledgement bockquote, .acknowledgements blockquote {

 border-left: 15px solid #ffa726;
 border-left: 2px solid #ffa726;

}

.team blockquote {

 border-left: 15px solid #ef5350;
 border-left: 2px solid #ef5350;

}

.lab blockquote{

 border-left: 15px solid #ab47bc;
 border-left: 2px solid #ab47bc;

}

.project .collapsible-header {

   background-color: #00bcd4;
   font-size: 1.5em;
   color: white;

}

.HP .collapsible-header {

   background-color: #e91e63;
   font-size: 1.5em;
   color: white;

}

.contribution .collapsible-header, .contributions .collapsible-header {

   background-color: #009688;
   font-size: 1.5em;
   color: white;

}

.acknowlegdements .collapsible-header, acknowlegdement .collapsible-header {

   background-color: #ff9800;
   font-size: 1.5em;
   color: white

}

.team .collapsible-header {

   background-color: #f44336;
   font-size: 1.5em;
   color: white

}

.lab .collapsible-header {

   background-color: #9c27b0;
   font-size: 1.5em;
   color: white

}

blockquote:not(.no-quote)::before{

 content: "\201C"; /*Unicode for Left Double Quote*/
 
 /*Font*/
 font-size: 60px;
 font-weight: bold;
     font-family: Georgia, serif;

 /*Positioning*/
 position: absolute;
 left: 10px;
 top:5px;

}

blockquote.no-quote {

   word-wrap: break-word;
   text-align: left;
   padding-left: 20px;

}

blockquote::after{

 /*Reset to make sure*/
 content: "";

}

blockquote cite {

   text-indent: 300px;
   padding-top: 20px;
   font-style: italic;
   display: block;

}

/* KATEX */

top_menu_14 {

/*

   background-color: {{{2}}};
   border-bottom: 2px solid {{{2}}};

/

   -webkit-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out;
   z-index: 3;

}

top_menu_14,
top_menu_14.hover {

   background-color: black;
   border-bottom: 2px solid black;

}

.katex-display {

 position: relative;

}

.katex-display .katex .eqno {

 display: block;
 position: absolute;
 right: 0;
 top: 50%;
 line-height: 0;

}

/* Lists Skeleton */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– */

ol.skel {

   list-style: decimal inside;

}

ol.skel, ul.skel {

   padding-left: 0;
   margin-top: 0;
   list-style: disc inside;

}

ul.skel ul.skel, ul.skel ol.skel, ol.skel ol.skel, ol.skel ul.skel {

   margin: 1.5rem 0 1.5rem 3rem;
   font-size: 90%;
   list-style: circle inside;

}

.skel li {

   margin-bottom: 1rem;

}

ul.skel ul.skel ul.skel {

   margin: 1.5rem 0 1.5rem 6rem;
   list-style: square inside;
   font-size: 90%;

}

/* TABLE */

primers thead {

   border-color: #4caf50;

}

primers tr:nth-child(even) {

   background-color: #c8e6c9;

}

parts-page thead {

   border-color: #4caf50;

}

parts-page tr:nth-child(even) {

   background-color: #c8e6c9;

}

.notebook thead {

   border-color: #9c27b0;

}

/* .notebook tr:nth-child(even) {

   background-color: #e1bee7;

}

/

.flex {

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

}

.column {

   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;

}

.flex-left {

   -ms-flex-item-align: start;
   align-self: flex-start;

}

.flex-box {

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

}

html, body {

   max-width: 100%;
   overflow-x: hidden;

}

.block {

   display: block;

}

@media only screen and (min-width: 600px) {

   .align-center {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
       -ms-flex-align: center;
       align-items: center;
   }

}

.align-center > div {

   display: block;

}

.center-margin {

   margin: auto;
   display: block;

}

.row .center-margin.col {

   float: initial;

}

.no-margin-wrapper {

   padding: 0.1px;

}

.no-margin {

   margin: 0;

}

.white-text-hack {

   color: white !important;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: default;

}

/* HEADER */

/* OVERWRITES FOR MENU BAR */

ul {

   list-style-image: none;

}

nav ul a {

   color: #fff;

}

nav ul a:visited, #nav ul a:visited {

   color: #fff;

}

nav ul {

   margin: 0;

}

@media only screen and (min-width: 760px) {

   nav,
   nav ul:not(.dropdown-content) {
       height: 35px;
       line-height: 36px;
   }

}

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

   #nav-buttons > li > a {
       max-width: 70px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       -webkit-transition: all 1s;
       transition: all 1s;
   }

}

nav-buttons,
contact {

   height: 35px;
   overflow: hidden;

}

contact {

   position: absolute;
   top: 0px;
   right: 0px;

}

nav-buttons a:hover {

   max-width: 300px;

}

.nav-wrapper {

   width: 100%;
   margin: 0 auto;

}

@media only screen and (min-width: 993px) {

   .nav-wrapper {}

}

@media only screen and (min-width: 1200px) {

   .nav-wrapper {
       width: 95%;
   }

}

nav i,
nav span {

   line-height: 36px;
   height: 35px;

}

.navbar-fixed {

   height: 35px;

}

nav i {

   position: relative;
   top: -11px;

}

/* SAFARI ONLY CSS */

@media not all and (min-resolution:.001dpcm) {

   @media {
       #nav i {
           top: 0;
       }
       #safari-phone-hack i {
           top: -11px;
       }

}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {

   @media {
       #nav i {
           top: 0;
       }
       #safari-phone-hack i {
           top: -11px;
       }
   }

}

/* ENDED HACKING */

nav .material-icons {

   top: 0;

}

contact a {

   height: 35px

}

.menu-hover > span {

   max-width: 0px;
   display: inline-block;
   overflow: hidden;
   -webkit-transition: all 1s;
   transition: all 1s;

}

@media only screen and (min-width: 1150px) {

   .menu-hover:hover > span {
       max-width: 200px;
   }

}

menu-btn {

   display: none;
   position: fixed;
   top: 1em;
   right: 1em;
   z-index: 15;

}

cross {

   display: none;

}

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

   .navbar-fixed,
   nav,
   #nav-buttons {
       height: auto;
   }
   nav {
       display: none;
   }
   #nav-buttons > li {
       float: none;
   }
   #menu-btn {
       display: inline-block;
   }
   #nav-buttons > li > a > i,
   #contact > li > a > i {
       line-height: 64px;
   }
   #nav-buttons > li > a,
   #contact > li > a {
       height: 64px;
   }
   #nav-buttons > li > a {
       max-width: 275px;
   }
   #nav .fa {
       top: 0;
   }
   #contact {
       height: 64px;
   }
   #cross {
       display: inline-block;
   }

}

.show-nav {

   display: block;

}

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

   img + img {
       margin-top: 2em;
   }

}

/* SLIDER */

.no-x-scrolling {

   width: 100vw;
   height: 1px;
   overflow-x: hidden;
   overflow-y: visible;

}

.invisible {

   visibility: hidden;

}

animated-logo {

   z-index: 10;
   position: relative;
   height: 0px;
   opacity: 0;
   -webkit-transition: opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease, -webkit-transform 1.5s ease 5.5s;
   transition: opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease, -webkit-transform 1.5s ease 5.5s;
   transition: transform 1.5s ease 5.5s, opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease;
   transition: transform 1.5s ease 5.5s, opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease, -webkit-transform 1.5s ease 5.5s;
   display: block;
   /*    overflow: hidden;*/
   left: 0;
   top: 0;
   width: 0;

}

animated-logo.moved {

   -webkit-transform: scale(0.30, 0.30) translate(-50%, 0);
   transform: scale(0.30, 0.30) translate(-50%, 0);
   left: 10vw;
   top: 3vh;
   opacity: 1;
   display: block;

}

.slider .slides {

   background-color: white;

}

sliding-logo img {

   background-size: contain;
   background-repeat: no-repeat;

}

/* TOP IMAGE */

.top {

   height: 100vh;
   width: 100vw;
   position: relative;

}

globalWrapper .top p {

   font-size: 25vh;
   margin: 0;
   text-align: center;
   height: 27vh;
   margin-top: -7vh;

}

.top img {

   max-width: 100%;
   max-height: 75vh;
   display: block;
   margin: auto;
   padding: 5vh

}

.top-c {

   height: 100vh;
   width: 100vw;
   position: relative;

}

.top div {

   height: 75vh;

}

.top-c div {

   height: 100vh;

}

.top-c img {

   max-width: 100%;
   max-height: 75vh;
   display: block;
   margin: auto;
   padding: 5vh

}

.topper {

   height: 100vh;
   width: 100vw;
   padding-top: 20px;
   padding-bottom: 80px;

}

.topper img {

   margin: auto;
   display: block;
   max-width: 100%;
   max-height: 100%;

}

.topper-inner > a {

   position: absolute;
   z-index: 10;

}

.topper-inner a:hover + img {

   opacity: 1;

}

.topper-inner {

   display: inline-block;
   position: relative;

}

.topper-inner img:first-child {

   max-height: 90vh;

}

.topper-inner img:not(:first-child) {

   width: 100%;
   height: 100%;
   position: absolute;
   top: 0; 
   left: 0;
   opacity: 0;

}

.topper-inner2 {

   display: inline-block;
   position: relative;

}

.topper-inner2 img {

   max-height: 90vh;

}

.topper-inner2 > a {

   position: absolute;
   z-index: 10;

}

/* HERO IMAGE */

frontpage-img {

   margin-top: -18px;
   height: 90vh;
   z-index: -1;

}

.white {

   background-color: #fff;
   z-index: 5;
   -webkit-box-shadow: 0px 0px 10px 20px #fff;
   box-shadow: 0px 0px 10px 20px #fff;

}

.white-shadow {

   -webkit-box-shadow: 0px -40px 10px 10px white;
   box-shadow: 0px -40px 10px 10px white;

}

.hero {

   background-color: #fff;
   position: relative;
   background-blend-mode: multiply;
   height: 100vh;
   width: 100vw;
   margin-top: -18px;
   background-position: center;
   background-repeat: no-repeat;
   z-index: -1;

}

fade-out {

   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   position: absolute;
   z-index: 50;

}

/*

f7ede2

/

.hero p {

   white-space: nowrap;
   position: absolute;
   text-align: center;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   margin: 0 !important;
   font-size: 12em;
   z-index: 70;
   opacity: 1 !important;

}

.hero p span, .hero p i {}

design p {

   top: 47%;
   left: 57%;
   color: white;
   font-size: 11em;

}

design {

   background-image: url("");

}

collaborations p {

   top: 50%;
   left: 50%;
   color: dimgrey;
   font-size: 7em;

}

collaborations {

   background-image: url("");

}

/*https://static.igem.org/mediawiki/2017/e/e8/T--TUDelft--2017_World_map_1.png*/

newsletter p {

   top: 15%;
   left: 50%;
   color: #e91e63;
   font-size: 8em;
   opacity: 1;

}

newsletter {

   background-image: url("");

}

/*https://2017.igem.org/wiki/images/8/87/T--TUDelft--2017_Letter_watercolour.png*/

acknowlegdement p {

   top: 52%;
   left: 45%;
   font-size: 4.5em;
   color: white;

}

acknowlegdement {

   background-image: url("");

}

contribution p {

   top: 49%;
   left: 46%;
   font-size: 7em;
   color: white;

}

contribution {

   background-image: url("");

}

sponsors p {

   top: 50%;
   left: 50%;
   color: white;

}

sponsors {

   background-image: url("");
   height: 85vh;

}

interlab p {

   top: 50%;
   left: 47%;
   color: black;

}

interlab {

   background-image: url("");

}

IHP p {

   top: 50%;
   left: 50%;
   font-size: 6em;
   color: white;

}

IHP {

   background-image: url("");

}

parts p {

   top: 35%;
   left: 47%;
   font-size: 9.5em;
   color: white;

}

parts {

   background-image: url("");

}

project p {

   top: 57%;
   left: 40%;
   font-size: 8em;
   color: white;

}

project {

   background-image: url("");

}

/* MAIN HOMEPAGE*/

thisList li {

   opacity: 0;

}

sliding-logo {

   z-index: 10;

}

row1 {

   height: 0;

}

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

   #row1 div,
   #row2 div,
   #row3 div,
   #row4 div,
   #row5 div,
   #row6 div {
       display: none;
   }

}

row1 div {

   z-index: 1;

}

row1 img {

   position: relative;

}

row1-img2 {

   top: -8vw;
   left: 80px;
   width: 70%

}

row1-img3 {

   top: -6vw;
   left: -40px;
   width: 40%;

}

row1-img4 {

   top: -8vw;
   left: -30px;
   width: 42%

}

row1-img5 {

   top: -9.5vw;
   left: 0;
   width: 90%;

}

row1-img6 {

   top: -1vw;
   left: -20px;
   width: 25%;

}

row2 {

   height: 0;

}

row2 div {

   z-index: 1;

}

row2 img {

   position: relative;

}

row2-img1 {

   top: -9vw;
   left: 105px;
   width: 85%

}

row2-img2 {

   top: -10vw;
   left: 70px;
   width: 45%

}

row2-img3 {

   top: -14vw;
   left: 0;
   width: 95%

}

row2-img4 {

   top: -12.5vw;
   left: -100px;
   width: 50%;

}

row2-img5 {

   top: -9vw;
   left: -100px;
   width: 50%

}

row2-img6 {

   top: -10vw;
   left: -200px;
   width: 27%;

}

row3 {

   height: 0;

}

row3 div {

   z-index: 1;

}

row3 img {

   position: relative;

}

row3-img3 {

   top: -8vw;
   left: -130px;
   width: 70%;

}

row3-img4 {

   top: -6vw;
   left: -90px;
   width: 20%;

}

row3-img5 {

   top: -9vw;
   left: -50px;
   width: 60%;

}

row3-img6 {

   top: -5.5vw;
   left: -100px;
   width: 70%;

}

row4 {

   height: 0;

}

row4 div {

   z-index: 1;

}

row4 img {

   position: relative;

}

row4-img1 {

   top: -5.5vw;
   left: 0px;
   width: 70%;

}

row4-img2 {

   top: -4vw;
   left: 0px;
   width: 56%;

}

row4-img3 {

   top: -5vw;
   left: 0px;
   width: 50%;

}

row4-img4 {

   top: -3.5vw;
   left: -10px;
   width: 40%;

}

row4-img5 {

   top: -4.5vw;
   left: -190px;
   width: 100%;

}

row4-img6 {

   top: -5vw;
   left: -190px;
   width: 50%;

}

row5 {

   height: 0;

}

row5 div {

   z-index: 1;

}

row5 img {

   position: relative;

}

row5-img2 {

   top: -9vw;
   left: 0;
   width: 33%;

}

row5-img3 {

   top: -3.5vw;
   left: -57px;
   width: 67%;

}

row5-img4 {

   top: -5vw;
   left: -30px;
   width: 80%;

}

row5-img5 {

   top: -3vw;
   left: 0;
   width: 80%;

}

row5-img6 {

   top: -9vw;
   left: 0;
   width: 80%;

}

row6 {

   height: 0;

}

row6 div {

   z-index: 1;

}

row6 img {

   position: relative;

}

row6-img1 {

   top: -3vw;
   left: 150px;
   width: 40%;

}

row6-img2 {

   top: -1vw;
   left: 0;
   width: 5%;

}

row6-img3 {

   top: -6vw;
   left: 0;
   width: 80%;

}

row6-img4 {

   top: -0vw;
   left: 0;
   width: 20%;

}

row6-img5 {

   top: -3vw;
   left: -80px;
   width: 80%;

}

row6-img6 {

   top: -9vw;
   left: 0;
   width: 80%;

}

abvesicle {

   width: 100px;

}

vesicle-grass {

   width: 100px;

}

stuffvesicle {

   width: 100px;

}

vesicle-cas13a {

   width: 100px;

}

budding-vesicle {

   width: 100px;

}

vesicle-tdp {

   width: 100px;

}

vesiclecas13a {

   width: 100px;

}

.scaleIn {

   opacity: 0;
   -webkit-transition: opacity 1s ease 0.2s;
   transition: opacity 1s ease 0.2s;

}

.scaleIn.activated {

   opacity: 1;

}

/* PAGE GENERALS */

references, #references-scroll {

   margin-top: 1em;

}

globalWrapper .row a {

   padding-right: 0;

}

globalWrapper .navbar-fixed nav ul a {

   padding-right: 15px;

}

/* FOOTER */

footer {

   position: relative;
   background-color: #fff;

}

.sponsors img {

   height: 6em;
   padding: 1em;

}

.sponsors > div {

   display: inline-block;

}

.sponsors > div > a {

   display: block;
   position: relative;

/* top: -2.5em;*/ }

body {

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   min-height: 100vh;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;

}

main {

   -webkit-box-flex: 1;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
   -ms-flex-positive: 1;
   flex-grow: 1;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   -ms-flex-preferred-size: auto;
   flex-basis: auto;

   -webkit-flex-grow: 1;
   -webkit-flex-shrink: 0;
   -webkit-flex-basis: auto;

}

/* body {

 display: flex;
 display: -webkit-flex;
 min-height: 100vh;
 flex-direction: column;
 -webkit-flex-direction: column;

}

main {

 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;

 -webkit-flex-grow: 1;
 -webkit-flex-shrink: 0;
 -webkit-flex-basis: auto;

}

/

/* TOC */

tocc {

   padding: 0.1px;
   position: fixed;
   top: 22vh;
   right: 30px;

}

tocc a {

   color: rgb(34, 34, 34);

}

tocc a::before {

   display: inline-block;
   width: 20px;
   height: 20px;
   content: "";
   background-size: contain;
   background-position: center;
   position: relative;
   left: -3px;
   top: 3px;
   z-index: 10;
   background-image: url("");
   opacity: 0;
   -webkit-transition: opacity .5s ease-out 0s;
   transition: opacity .5s ease-out 0s;

}

tocc a.active::before {

   opacity: 1;

}

tocc li {

   padding-left: 20px;
   text-indent: -20px;

}

/* TEAM */

team-hero {

   position: relative

}

team-hero > img {

   z-index: -1;

}

hover2 {

   position: absolute;
   top: 22%;
   left: 50%;
   height: 17%;
   width: 17%;

}

hover1 {

   position: absolute;
   top: 22%;
   left: 76%;
   height: 17%;
   width: 17%;

}

hover1:hover > div {

   width: 22em;
   opacity: 1;

}

hover1 p {

   width: 22em;

}

.weetje {

   position: absolute;
   overflow: hidden;
   background-color: white;
   height: 5em;
   width: 0em;
   -webkit-transition: width 1s;
   transition: width 1s;
   opacity: 0;
   left: 100%;
   top: 30%;
   z-index: 2;
   border-radius: 2em;
   padding-left: 0.5em;

}

.weetje > img {

   height: 5em;
   width: 5em;
   -o-object-fit: cover;
   object-fit: cover;
   padding: 1em;
   float: left;

}

hover1:hover {

   cursor: pointer;

}

team-members > div {

   padding: 40px;

}

team-members img,
supervisors img {

   -o-object-fit: cover;
   object-fit: cover;
   height: 20vw;
   width: 20vw;

}

.show-on-hover {

   opacity: 0;
   z-index: 1;
   position: absolute;
   -webkit-transition: 1s;
   transition: 1s;

}

.show-on-hover:hover {

   opacity: 1;

}

team-members h4 {

   font-size: 1em;
   font-weight: 800;
   margin-bottom: 0;

}

team-members h4 + p {

   margin-top: 0;

}

/* MEET UP */

presenters img {

   padding: 0 4vw;

}

presenters .align-center {

   margin: 0px;

}

/* NEWSLETTER */

mail {

   background-color: white;

}

mail .collapsible-body {

   background-color: #eee;

}

mail h1 {

   border: 0;

}

newsletter-collapsible .collapsible-header {

   color: #fff;
   display: inherit;
   text-align: center;
   height: 100px;
   font-size: 45px;

}

newsletter-collapsible .collapsible-header {

   background-color: #e91e63;

}

/*

protocols .collapsible-header {

   background-color: #9c27b0;
   line-height: 35px;
   padding-top: 28px;

}

/

newsletter-collapsible li {

   margin: 0;

}

newsletter-collapsible h1 {

   border: none;

}

/* TIMELINE */

timeline {

   position: fixed;
   top: 10%;
   left: 13%;
   width: .13em;
   height: 70vh;
   background-color: #9c27b0;
   border-radius: 20px;

}

timeline a div {

   height: .6em;
   width: .6em;
   border-radius: 50%;
   background-color: white;
   left: -.24em;
   border: 1.5px solid #9c27b0;

}

timeline a.active div {

   background-color: #9c27b0;

}

timeline a > div:hover {

   background-color: #9c27b0;

}

timeline a > p {

   position: absolute;
   top: -1.5em;
   left: -6.1em;
   width: 100px;
   color: rgb(34, 34, 34);
   z-index: -1;

}

timeline a p:hover {

   text-decoration: underline;

}

timeline div {

   position: absolute;

}

round24 {

   top: 4vh

}

round25 {

   top: 7.5vh;

}

round26 {

   top: 11vh;

}

round27 {

   top: 14.5vh;

}

round28 {

   top: 18vh;

}

round29 {

   top: 21.5vh;

}

round30 {

   top: 25vh;

}

round31 {

   top: 28.5vh;

}

round32 {

   top: 32vh;

}

round33 {

   top: 35.5vh;

}

round34 {

   top: 39.5vh;

}

round35 {

   top: 43vh;

}

round36 {

   top: 46.5vh;

}

round37 {

   top: 50vh;

}

round38 {

   top: 53.5vh;

}

round39 {

   top: 57vh;

}

round40 {

   top: 60.5vh

}

round41 {

   top: 64vh;

}

round42 {

   top: 67.5vh

}

/* NOTEBOOK */

globalWrapper .row .btn {

   padding-right: 2em ;

}

notebook-buttons .btn.active {

   color: white;

}

notebook-buttons i {

   color: white;

}

notebook-buttons .btn:not(.active) i {

   display: none;

}

notebook-buttons > p {

   margin: .1em;
   color: grey;
   font-size: 20px;

}

notebook-buttons .btn:not(.active) {

   background-color: rgb(255, 255, 255) !important;
   color: rgba(0, 0, 0, 0.87);

}

notebook-buttons .btn {

   text-transform: none;

}

notebook-buttons {

   padding: 20px 20px 0;

}

.notebook h3, .protocol h4 {

   font-size: 2.5em;
   font-weight: 800

}

.notebook h4, .protocol h3 {

   font-size: 1.8em;

}

/* FANCY THINGS */

/* .modal-overlay {

   opacity: 0 !important;

}

/

pre.DNA {

   font-size: 1em;
   background-color: white;
   color: black;
   line-height: 1.5;
   border: 1px solid grey;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   padding: 1em;

}

span.code {

   font-family: monospace, monospace;
   font-size: 1.2em;

}

globalWrapper .open::before {

   content: "" !important;

}

.model {

   max-height: 85%;
   width: 85%;

}

@media only screen and (min-width: 760px) {

   .dropdown-content {
       overflow-y: visible;
   }

}

nav .dropdown-content.nested {

  overflow: visible;

}

nav .dropdown-content .dropdown-content {

  margin-left: 100%;
   -webkit-transform: translate(0px, -50px);
   transform: translate(0px, -50px);

}

.link {

   position: relative;
   border-top: 1px solid rgba(160, 160, 160, 0.2);
   padding: 1.5em .5em 0;

}

.link > a {

   font-size: 20px;
   text-transform: uppercase;

}

HP-Timeline {

   position: relative;
   width: 100%;

/*

   background-image: url("");
   width: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;

/

}

HP-Timeline > a {

   position: absolute;

}

.table-style1 tr > td:first-child, .table-style2 tr > td:first-child {

   border-right: 1px solid #d0d0d0;
   font-weight: 800;

}

.table-style1 tr > td, .table-style2 tr > td {

   padding-right: 20px;

}

table.table-style2 {

   width: auto;

}

.table-style2 tr:nth-child(even) {

   background-color: #b2ebf2;

}

globalWrapper .card > h1 {

   border: none;

}

table.table-style3 tr > td:first-child {

   border-right: 1px solid #d0d0d0;

}

table.table-style3 tr {

   border-bottom: 1px solid #d0d0d0;

}

globalWrapper .no-margin-top {margin-top: 0;}

.borders {

   position: relative;
   padding: 3em;

}

.borders > div:first-child, .borders > div:first-child + div {

   position: absolute;
   content: "";
   background-size: contain;
   background-repeat: no-repeat;
   height: 12vw;
   width: 12vw;

}

.borders.b-orange > div:first-child {

   top: 0;
   left: 0;
   background-image: url("");

}

.borders.b-orange > div:first-child + div {

   bottom: 0;
   right: 0;
   background-image: url("");

}

.borders.b-pink > div:first-child {

   top: 0;
   left: 0;
   background-image: url("");

}

.borders.b-pink > div:first-child + div {

   bottom: 0;
   right: 0;
   background-image: url("");

}

.left-top, .lower-right {

   position: absolute;
   content: "";
   background-size: contain;
   background-repeat: no-repeat;
   height: 8vw;
   width: 8vw;

}

.left-top {

   top: 0;
   left: 0;
   background-image: url("");

}

.lower-right {

   bottom: 0;
   right: 0;
   background-image: url("");

}

/* SPONSORS */

sponsor-page .card {

   padding: 2em;

}

tudelft .collapsible-body {

   padding-top: 0;

}

tudelft .collapsible-header h5 {

   -webkit-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out;

}

tudelft .collapsible-header.active h5 {

   padding: 0 0.75rem;
   margin-left: 33.3333333333333%;
   float: left;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   min-height: 1px;

}

tudelft .collapsible-header {

   padding: .75rem 2rem;

}

tudelft .collapsible-header.active {

   border-bottom: none;

}

no-nav-fix i {

   top: 0;

}

/*

testing::before {

   content: "";
   height: 50px;
   width: 50px; 
   background-color: grey;

}

tudelft > div::before {

   content: "";
   height: 50px;
   width: 50px; 
   background-color: grey;

}

/