Team:TUDelft/css/custom

/* TEMP */

/*

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

}

  1. top_menu_14:hover,
  2. top_menu_14.hover {
   background-color: black;
   border-bottom: 2px solid black;

}

  • /


/* Media wiki removal

                                                                    • /

nav ul {

   line-height: 56px;

}

  1. content {
   margin-top: 0px !important;

}

  1. top_menu_inside #user_item {
   padding-top: 0;

}

  1. top_menu_inside #bars_item {
   top: 0;

}

  1. globalWrapper {
   padding-bottom: 0px;
   z-index: 30;

}

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

}

  1. top_menu_inside,
  2. top_menu_14.hover {
   opacity: 1;

}

.igem_2017_menu_wrapper {

   z-index: 10;
   display: none;

}

ul {

   margin-left: 0;

}

  1. 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 */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– */

  1. 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("T--TUDelft--2017_top.png");

/*

   mask-image: url("T--TUDelft--2017_top.png");
   mask-size: contain;
   -webkit-mask-image: url("T--TUDelft--2017_top.png");
   -webkit-mask-size: contain;
  • /

/* background-color: blue;*/

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

}

html {}

body {

   margin: 0;

}

.mediawiki,

  1. globalWrapper {
   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.mediawiki p,

  1. 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,

  1. 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 #009688;
 border-right: 2px solid #009688;

}

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

}

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

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

}

  1. top_menu_14,
  2. 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 */

  1. primers thead {
   border-color: #4caf50;

}

  1. primers tr:nth-child(even) {
   background-color: #c8e6c9;

}

  1. parts-page thead {
   border-color: #4caf50;

}

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

}

  1. nav ul a {
   color: #fff;

}

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

   color: #fff;

}

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

}

  1. nav-buttons,
  2. contact {
   height: 35px;
   overflow: hidden;

}

  1. contact {
   position: absolute;
   top: 0px;
   right: 0px;

}

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

}

  1. nav i,
  2. nav span {
   line-height: 36px;
   height: 35px;

}

.navbar-fixed {

   height: 35px;

}

  1. 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 */

  1. nav .material-icons {
   top: 0;

}

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

}

  1. menu-btn {
   display: none;
   position: fixed;
   top: 1em;
   right: 1em;
   z-index: 15;

}

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

}

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

}

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

}

  1. sliding-logo img {
   background-size: contain;
   background-repeat: no-repeat;

}

/* TOP IMAGE */

.top {

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

}

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

}

/* HERO IMAGE */

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

}

  1. fade-out {
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   position: absolute;
   z-index: 50;

}

/*

  1. 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 {}

  1. design p {
   top: 47%;
   left: 57%;
   color: white;
   font-size: 11em;

}

  1. design {
   background-image: url("T--TUDelft--another-background.png");

}

  1. collaborations p {
   top: 50%;
   left: 50%;
   color: dimgrey;
   font-size: 7em;

}

  1. collaborations {
   background-image: url("T--TUDelft--2017_world-map-adjusted.png");

}

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

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

}

  1. newsletter {
   background-image: url("T--TUDelft--2017_Letter-adjusted.png");

}

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

  1. acknowlegdement p {
   top: 52%;
   left: 45%;
   font-size: 4.5em;
   color: white;

}

  1. acknowlegdement {
   background-image: url("T--TUDelft--2017_Acknowledgement_stain_yellow_V2.png");

}

  1. contribution p {
   top: 49%;
   left: 46%;
   font-size: 7em;
   color: white;

}

  1. contribution {
   background-image: url("T--TUDelft--2017_contribution_stain_amber.png");

}

  1. sponsors p {
   top: 50%;
   left: 50%;
   color: white;

}

  1. sponsors {
   background-image: url("");
   height: 85vh;

}

  1. interlab p {
   top: 50%;
   left: 47%;
   color: black;

}

  1. interlab {
   background-image: url("T--TUDelft--2017_interlab_V3.png");

}

  1. IHP p {
   top: 50%;
   left: 50%;
   font-size: 6em;
   color: white;
   

}

  1. IHP {
   background-image: url("T--TUDelft--2017_tweekleurig.png");

}

  1. parts p {
   top: 35%;
   left: 47%;
   font-size: 9.5em;
   color: white;
   

}

  1. parts {
   background-image: url("T--TUDelft--2017_parts_stain_V3.png");

}

  1. project p {
   top: 57%;
   left: 40%;
   font-size: 8em;
   color: white;

}

  1. project {
   background-image: url("T--TUDelft--2017_parts_vlek_v3.png");

}



/* MAIN HOMEPAGE*/

  1. thisList li {
   opacity: 0;

}

  1. sliding-logo {
   z-index: 10;

}

  1. row1 {
   height: 0;

}

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

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

}

  1. row1 div {
   z-index: 1;

}

  1. row1 img {
   position: relative;

}

  1. row1-img2 {
   top: -8vw;
   left: 80px;
   width: 70%

}


  1. row1-img3 {
   top: -6vw;
   left: -40px;
   width: 40%;

}

  1. row1-img4 {
   top: -8vw;
   left: -30px;
   width: 42%

}

  1. row1-img5 {
   top: -9.5vw;
   left: 0;
   width: 90%;

}

  1. row1-img6 {
   top: -1vw;
   left: -20px;
   width: 25%;

}

  1. row2 {
   height: 0;

}

  1. row2 div {
   z-index: 1;

}

  1. row2 img {
   position: relative;

}


  1. row2-img1 {
   top: -9vw;
   left: 105px;
   width: 85%

}

  1. row2-img2 {
   top: -10vw;
   left: 70px;
   width: 45%

}

  1. row2-img3 {
   top: -14vw;
   left: 0;
   width: 95%

}

  1. row2-img4 {
   top: -12.5vw;
   left: -100px;
   width: 50%;

}

  1. row2-img5 {
   top: -9vw;
   left: -100px;
   width: 50%

}

  1. row2-img6 {
   top: -10vw;
   left: -200px;
   width: 27%;

}


  1. row3 {
   height: 0;

}

  1. row3 div {
   z-index: 1;

}

  1. row3 img {
   position: relative;

}

  1. row3-img3 {
   top: -8vw;
   left: -130px;
   width: 70%;

}

  1. row3-img4 {
   top: -6vw;
   left: -90px;
   width: 20%;

}

  1. row3-img5 {
   top: -9vw;
   left: -50px;
   width: 60%;

}

  1. row3-img6 {
   top: -5.5vw;
   left: -100px;
   width: 70%;

}

  1. row4 {
   height: 0;

}

  1. row4 div {
   z-index: 1;

}

  1. row4 img {
   position: relative;

}

  1. row4-img1 {
   top: -5.5vw;
   left: 0px;
   width: 70%;

}

  1. row4-img2 {
   top: -4vw;
   left: 0px;
   width: 56%;

}

  1. row4-img3 {
   top: -5vw;
   left: 0px;
   width: 50%;

}

  1. row4-img4 {
   top: -3.5vw;
   left: -10px;
   width: 40%;

}


  1. row4-img5 {
   top: -4.5vw;
   left: -190px;
   width: 100%;

}

  1. row4-img6 {
   top: -5vw;
   left: -190px;
   width: 50%;

}

  1. row5 {
   height: 0;

}

  1. row5 div {
   z-index: 1;

}

  1. row5 img {
   position: relative;

}

  1. row5-img2 {
   top: -9vw;
   left: 0;
   width: 33%;

}

  1. row5-img3 {
   top: -3.5vw;
   left: -57px;
   width: 67%;

}

  1. row5-img4 {
   top: -5vw;
   left: -30px;
   width: 80%;

}

  1. row5-img5 {
   top: -3vw;
   left: 0;
   width: 80%;

}

  1. row5-img6 {
   top: -9vw;
   left: 0;
   width: 80%;

}

  1. row6 {
   height: 0;

}

  1. row6 div {
   z-index: 1;

}

  1. row6 img {
   position: relative;

}

  1. row6-img1 {
   top: -3vw;
   left: 150px;
   width: 40%;

}

  1. row6-img2 {
   top: -1vw;
   left: 0;
   width: 5%;

}

  1. row6-img3 {
   top: -6vw;
   left: 0;
   width: 80%;

}

  1. row6-img4 {
   top: -0vw;
   left: 0;
   width: 20%;

}

  1. row6-img5 {
   top: -3vw;
   left: -80px;
   width: 80%;

}

  1. row6-img6 {
   top: -9vw;
   left: 0;
   width: 80%;

}

  1. abvesicle {
   width: 100px;

}

  1. vesicle-grass {
   width: 100px;

}

  1. stuffvesicle {
   width: 100px;

}

  1. vesicle-cas13a {
   width: 100px;

}

  1. budding-vesicle {
   width: 100px;

}

  1. vesicle-tdp {
   width: 100px;

}

  1. 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 */

  1. references, #references-scroll {
   margin-top: 1em;

}

  1. globalWrapper .row a {
   padding-right: 0; 

}

  1. 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 */

  1. tocc {
   padding: 0.1px;
   position: fixed;
   top: 22vh;
   right: 30px;
   

}

  1. tocc a {
   color: rgb(34, 34, 34);

}

  1. 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("T--TUDelft--2017_gear2.png");
   opacity: 0;
   -webkit-transition: opacity .5s ease-out 0s;
   transition: opacity .5s ease-out 0s;

}

  1. tocc a.active::before {
   opacity: 1;

}

  1. tocc li {
   padding-left: 20px;
   text-indent: -20px;

}


/* TEAM */

  1. team-hero {
   position: relative

}

  1. team-hero > img {
   z-index: -1;

}

  1. hover2 {
   position: absolute;
   top: 22%;
   left: 50%;
   height: 17%;
   width: 17%;

}

  1. hover1 {
   position: absolute;
   top: 22%;
   left: 76%;
   height: 17%;
   width: 17%;

}

  1. hover1:hover > div {
   width: 22em;
   opacity: 1;

}

  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;

}

  1. hover1:hover {
   cursor: pointer;

}

  1. team-members > div {
   padding: 40px;

}

  1. team-members img,
  2. 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;

}

  1. team-members h4 {
   font-size: 1em;
   font-weight: 800;
   margin-bottom: 0;

}

  1. team-members h4 + p {
   margin-top: 0;

}

/* MEET UP */

  1. presenters img {
   padding: 0 4vw;

}

  1. presenters .align-center {
   margin: 0px;

}

/* NEWSLETTER */

  1. mail {
   background-color: white;

}

  1. mail .collapsible-body {
   background-color: #eee;

}

  1. mail h1 {
   border: 0;

}

  1. protocols .collapsible-header, #newsletter-collapsible .collapsible-header {
   color: #fff;
   display: inherit;
   text-align: center;
   height: 100px;
   font-size: 45px;

}

  1. newsletter-collapsible .collapsible-header {
   background-color: #e91e63;

}

  1. protocols .collapsible-header {
   background-color: #9c27b0;
   line-height: 35px;
   padding-top: 28px;

}

  1. newsletter-collapsible li {
   margin: 0;

}

  1. newsletter-collapsible h1 {
   border: none;

}

/* TIMELINE */

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

}

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

}

  1. timeline a.active div {
   background-color: #9c27b0;

}

  1. timeline a > div:hover {
   background-color: #9c27b0;

}

  1. timeline a > p {
   position: absolute;
   top: -1.5em;
   left: -6.1em;
   width: 100px;
   color: rgb(34, 34, 34);
   z-index: -1;

}

  1. timeline a p:hover {
   text-decoration: underline;

}

  1. timeline div {
   position: absolute;

}

  1. round24 {
   top: 4vh

}

  1. round25 {
   top: 7.5vh;

}

  1. round26 {
   top: 11vh;

}

  1. round27 {
   top: 14.5vh;

}

  1. round28 {
   top: 18vh;

}

  1. round29 {
   top: 21.5vh;

}

  1. round30 {
   top: 25vh;

}

  1. round31 {
   top: 28.5vh;

}

  1. round32 {
   top: 32vh;

}

  1. round33 {
   top: 35.5vh;

}

  1. round34 {
   top: 39.5vh;

}

  1. round35 {
   top: 43vh;

}

  1. round36 {
   top: 46.5vh;

}

  1. round37 {
   top: 50vh;

}

  1. round38 {
   top: 53.5vh;

}

  1. round39 {
   top: 57vh;

}

  1. round40 {
   top: 60.5vh

}

  1. round41 {
   top: 64vh;

}

  1. round42 {
   top: 67.5vh

}

/* NOTEBOOK */

  1. globalWrapper .btn {
   padding-right: 2em;

}

  1. notebook-buttons .btn.active {
   color: white;

}

  1. notebook-buttons i {
   color: white;

}

  1. notebook-buttons .btn:not(.active) i {
   display: none;

}

  1. notebook-buttons > p {
   margin: .1em;
   color: grey;
   font-size: 20px;

}

  1. notebook-buttons .btn:not(.active) {
   background-color: rgb(255, 255, 255) !important;
   color: rgba(0, 0, 0, 0.87);

}

  1. notebook-buttons .btn {
   text-transform: none;

}

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

}

  1. globalWrapper .open::before {
   content: "" !important;

}

.model {

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

}

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

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

}

  1. nav .dropdown-content.nested {
  overflow: visible;

}

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

}

  1. HP-Timeline {
   position: relative;
   width: 100%;

/*

   background-image: url("T--TUDelft--2017_Timeline_Final_V4.jpg");
   width: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
  • /

}

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

}

  1. globalWrapper .card > h1 {
   border: none;

}

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

   border-right: 1px solid #d0d0d0;

}

  1. 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("T--TUDelft--2017_top_left_acknowledgement.png");

}

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

   bottom: 0;
   right: 0;
   background-image: url("T--TUDelft--2017_bottom_right_acknowledgements.png");

}

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

   top: 0;
   left: 0;
   background-image: url("T--TUDelft--2017_top_left_human_practices.png");

}

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

   bottom: 0;
   right: 0;
   background-image: url("T--TUDelft--2017_bottom_right_human_practices.png");

}

.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("T--TUDelft--2017_topborder_teampage_style2.png");

}

.lower-right {

   bottom: 0;
   right: 0;
   background-image: url("T--TUDelft--2017_bottomborder_teampage_style2.png");

}


/* SPONSORS */

  1. sponsor-page .card {
   padding: 2em;

}

  1. tudelft .collapsible-body {
   padding-top: 0;

}

  1. tudelft .collapsible-header h5 {
   -webkit-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out;

}

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

}

  1. tudelft .collapsible-header {
   padding: .75rem 2rem;

}

  1. tudelft .collapsible-header.active {
   border-bottom: none;

}

  1. no-nav-fix i {
   top: 0;

}

/*

  1. testing::before {
   content: "";
   height: 50px;
   width: 50px; 
   background-color: grey;

}

  1. tudelft > div::before {
   content: "";
   height: 50px;
   width: 50px; 
   background-color: grey;

}

  • /