Difference between revisions of "Team:TUDelft/css/custom"

Line 1: Line 1:
 
/* TEMP */
 
/* TEMP */
−
 
−
#top_menu_14 {
 
−
    background-color: #ff9800;
 
−
    border-bottom: 2px solid #ff9800;
 
−
    transition: all .25s ease-in-out;
 
−
    z-index: 3;
 
−
}/* TEMP */
 
  
 
/*
 
/*
Line 100: Line 93:
 
}
 
}
  
−
.mediawiki h1 {
+
.mediawiki h1, #globalWrapper h1 {
 
     border-bottom: 1px solid #aaa;
 
     border-bottom: 1px solid #aaa;
 
}
 
}
  
−
.mediawiki h3 {
+
.mediawiki h3, #globalWrapper h3 {
 
     margin-top: 3rem;
 
     margin-top: 3rem;
 
}
 
}
  
−
.mediawiki h1,
+
.mediawiki h1, #globalWrapper h1,
−
.mediawiki h2,
+
.mediawiki h2, #globalWrapper h2,  
−
.mediawiki h3,
+
.mediawiki h3, #globalWrapper h3,  
−
.mediawiki h4,
+
.mediawiki h4, #globalWrapper h4,  
−
.mediawiki h5,
+
.mediawiki h5, #globalWrapper h5,  
−
.mediawiki h6 {
+
.mediawiki h6, #globalWrapper h6 {
 
     color: rgb(34, 34, 34);
 
     color: rgb(34, 34, 34);
 
     font-weight: 300;
 
     font-weight: 300;
Line 1,326: Line 1,319:
 
.notebook h4 {
 
.notebook h4 {
 
     font-size: 1.8em;
 
     font-size: 1.8em;
−
}
 
−
 
−
/* SPONSORS */
 
−
 
−
#sponsor-page .card {
 
−
    padding: 2em;
 
−
}
 
−
 
−
#tu-delft > div {
 
−
    margin-left: 14em;
 
−
}
 
−
 
−
/*
 
−
#testing::before {
 
−
    content: "";
 
−
    height: 50px;
 
−
    width: 50px;
 
−
    background-color: grey;
 
−
 
−
}
 
−
 
−
#tudelft > div::before {
 
−
    content: "";
 
−
    height: 50px;
 
−
    width: 50px;
 
−
    background-color: grey;
 
−
}
 
−
*/
 
−
 
−
#top_menu_14:hover, #top_menu_14.hover {
 
−
    background-color: black;
 
−
    border-bottom: 2px solid black;
 
−
}
 
−
 
−
 
−
/*  Media wiki removal
 
−
**********************************/
 
−
 
−
#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:hover, #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 */
 
−
 
−
html {
 
−
   
 
−
}
 
−
 
−
body {
 
−
    margin: 0;
 
−
}
 
−
 
−
.mediawiki, #globalWrapper{
 
−
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
−
}
 
−
 
−
.mediawiki p, #globalWrapper p {
 
−
    margin: 1em 0
 
−
}
 
−
 
−
.mediawiki h1 {
 
−
    border-bottom: 1px solid #aaa;
 
−
}
 
−
 
−
.mediawiki h3 {
 
−
    margin-top: 3rem;
 
−
}
 
−
 
−
.mediawiki h1,
 
−
.mediawiki h2,
 
−
.mediawiki h3,
 
−
.mediawiki h4,
 
−
.mediawiki h5,
 
−
.mediawiki 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;
 
−
}
 
−
 
−
/* 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%;
 
−
}
 
−
 
−
.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;
 
−
}
 
−
 
−
.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: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;
 
−
}
 
−
 
−
 
−
/* 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;
 
−
}
 
−
 
−
.hero p span,
 
−
.hero p i {
 
−
 
−
}
 
−
 
−
#design p {
 
−
    top: 47%;
 
−
    left: 57%;
 
−
}
 
−
 
−
#design {
 
−
    background-image: url("https://static.igem.org/mediawiki/2017/8/86/T--TUDelft--another-background.png");
 
−
}
 
−
 
−
#collaborations p {
 
−
    top: 50%;
 
−
    left: 50%;
 
−
    color: rgb(183, 28, 28);
 
−
    font-size: 8em;
 
−
}
 
−
 
−
#collaborations {
 
−
    background-image: url("https://static.igem.org/mediawiki/2017/2/26/T--TUDelft--2017_world-map-adjusted.png");
 
−
}
 
−
/*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: 9em;
 
−
}
 
−
 
−
#newsletter {
 
−
    background-image: url("https://static.igem.org/mediawiki/2017/d/d8/T--TUDelft--2017_Letter-adjusted.png");
 
−
}
 
−
/*https://2017.igem.org/wiki/images/8/87/T--TUDelft--2017_Letter_watercolour.png*/
 
−
 
−
 
−
#acknowlegdement p {
 
−
    top: 52%;
 
−
    left: 45%;
 
−
    font-size: 4.5em;
 
−
}
 
−
 
−
#acknowlegdement {
 
−
    background-image: url("https://static.igem.org/mediawiki/2017/2/2f/T--TUDelft--2017_Acknowledgement_stain_yellow_V2.png");
 
−
}
 
−
 
−
#contribution p {
 
−
    top: 49%;
 
−
    left: 46%;
 
−
    font-size: 8em;
 
−
}
 
−
 
−
#contribution {
 
−
    background-image: url("https://static.igem.org/mediawiki/2017/4/4e/T--TUDelft--2017_contribution_stain_amber.png");
 
−
}
 
−
 
−
#sponsors p {
 
−
    top: 50%;
 
−
    left: 50%;
 
−
    color: white;
 
−
}
 
−
 
−
#sponsors {
 
−
    background-image: url("");
 
−
    height: 85vh;
 
−
}
 
−
#IHP p {
 
−
    top: 50%;
 
−
    left: 50%;
 
−
    font-size: 8em;
 
−
}
 
−
 
−
#IHP {
 
−
    background-image: url("https://static.igem.org/mediawiki/2017/7/76/T--TUDelft--2017_tweekleurig.png");
 
−
}
 
−
 
−
#parts p {
 
−
    top: 56%;
 
−
    left: 38%;
 
−
    font-size: 9.5em;
 
−
}
 
−
 
−
#parts {
 
−
    background-image: url("https://static.igem.org/mediawiki/2017/a/a0/T--TUDelft--2017_parts_vlek_v3.png");
 
−
}
 
−
 
−
 
−
 
−
/* 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 a:hover {
 
−
    text-decoration: underline;
 
−
}
 
−
 
−
a[href="#references"] {
 
−
    color: rgb(34, 34, 34);
 
−
}
 
−
 
−
a[href="#references"]:hover {
 
−
    color: grey;
 
−
}
 
−
 
−
 
−
/* FOOTER */
 
−
 
−
.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;
 
−
}
 
−
 
−
 
−
/* TOC */
 
−
 
−
#toc {
 
−
    padding: 0.1px;
 
−
}
 
−
 
−
#toc a {
 
−
    color: rgb(34, 34, 34);
 
−
}
 
−
 
−
#toc 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("https://static.igem.org/mediawiki/2017/f/f4/T--TUDelft--2017_vesicle.png");
 
−
    opacity: 0;
 
−
    -webkit-transition: opacity .5s ease-out 0s;
 
−
    transition: opacity .5s ease-out 0s;
 
−
}
 
−
 
−
#toc a.active::before {
 
−
    opacity: 1;
 
−
}
 
−
 
−
#toc li {
 
−
    padding-left: 20px;
 
−
    text-indent: -20px;
 
−
}
 
−
 
−
 
−
/* TEAM */
 
−
 
−
#team-hero {
 
−
    position: relative
 
−
}
 
−
 
−
#team-hero>img {
 
−
    z-index: -1;
 
−
}
 
−
 
−
#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: help;
 
−
}
 
−
 
−
#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 70px;
 
−
}
 
−
#presenters .align-center {
 
−
    margin: 0px;
 
−
}
 
−
 
−
/* NEWSLETTER */
 
−
 
−
#mail {
 
−
    background-color: white;
 
−
}
 
−
 
−
#mail .collapsible-body {
 
−
    background-color: #eee;
 
−
}
 
−
 
−
#mail h1 {
 
−
    border: 0;
 
−
}
 
−
 
−
#newsletter-collapsible .collapsible-header {
 
−
    background-color: #e91e63;
 
−
    color: #fff;
 
−
    display: inherit;
 
−
    text-align: center;
 
−
    height: 100px;
 
−
    font-size: 45px;
 
−
}
 
−
 
−
#newsletter-collapsible li {
 
−
    margin: 0;
 
−
}
 
−
 
−
/* TIMELINE */
 
−
 
−
#timeline {
 
−
    position: fixed;
 
−
    top: 10%;
 
−
    left: 7%;
 
−
    width: .13em;
 
−
    height: 70vh;
 
−
    background-color: #9c27b0;
 
−
    border-radius: 20px;
 
−
}
 
−
 
−
#timeline a div {
 
−
    height: .4em;
 
−
    width: .4em;
 
−
    border-radius: 50%;
 
−
    background-color: #9c27b0;
 
−
    left: -.13em;
 
−
}
 
−
 
−
#timeline a.active > div {
 
−
    background-color: #4a148c;
 
−
}
 
−
 
−
#timeline a > div:hover {
 
−
    background-color: #7b1fa2;
 
−
}
 
−
 
−
#timeline a>p {
 
−
    position: absolute;
 
−
    top: -1.5em;
 
−
    left: -4.1em;
 
−
    width: 100px;
 
−
    color: rgb(34, 34, 34);
 
−
}
 
−
 
−
#timeline a p:hover {
 
−
    text-decoration: underline;
 
−
}
 
−
 
−
#timeline div {
 
−
    position: absolute;
 
−
}
 
−
 
−
#round23 {
 
−
    top: 4vh
 
−
}
 
−
 
−
#round24 {
 
−
    top: 14vh
 
−
}
 
−
 
−
#round25 {
 
−
    top: 24vh;
 
−
}
 
−
 
−
#round26 {
 
−
    top: 34vh;
 
−
}
 
−
 
−
#round27 {
 
−
    top: 44vh;
 
−
}
 
−
 
−
#round28 {
 
−
    top: 54vh;
 
−
}
 
−
 
−
#round29 {
 
−
    top: 64vh;
 
−
}
 
−
 
−
/* NOTEBOOK */
 
−
 
−
#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;
 
 
}
 
}
  

Revision as of 15:15, 17 October 2017

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

                                                                    • /
  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:hover,
  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 */

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;

}

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

}

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

}


/* 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: rgb(183, 28, 28);
   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 a:hover {
   text-decoration: underline;

}

a[href="#references"] { 

   color: rgb(34, 34, 34);

}

a[href="#references"]:hover { 

   color: grey;

}


/* FOOTER */

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

}


/* TOC */

  1. toc {
   padding: 0.1px;

}

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

}

  1. toc 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_vesicle.png");
   opacity: 0;
   -webkit-transition: opacity .5s ease-out 0s;
   transition: opacity .5s ease-out 0s;

}

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

}

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

}


/* TEAM */

  1. team-hero {
   position: relative

}

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

}

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

}

  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 70px;

}

  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. newsletter-collapsible .collapsible-header {
   background-color: #e91e63;
   color: #fff;
   display: inherit;
   text-align: center;
   height: 100px;
   font-size: 45px;

}

  1. newsletter-collapsible li {
   margin: 0;

}

/* TIMELINE */

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

}

  1. timeline a div {
   height: .4em;
   width: .4em;
   border-radius: 50%;
   background-color: #9c27b0;
   left: -.13em;

}

  1. timeline a.active > div {
   background-color: #4a148c;

}

  1. timeline a > div:hover {
   background-color: #7b1fa2;

}

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

}

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

}

  1. timeline div {
   position: absolute;

}

  1. round23 {
   top: 4vh

}

  1. round24 {
   top: 14vh

}

  1. round25 {
   top: 24vh;

}

  1. round26 {
   top: 34vh;

}

  1. round27 {
   top: 44vh;

}

  1. round28 {
   top: 54vh;

}

  1. round29 {
   top: 64vh;

}

/* NOTEBOOK */

  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: 12px;

}

  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 { 

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

}

.notebook h4 { 

   font-size: 1.8em;

}

/* SPONSORS */

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

}

  1. tu-delft > div {
   margin-left: 14em;

}

/*

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

}

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

}

  • /