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 */ | ||
+ | |||
+ | /* | ||
#top_menu_14 { | #top_menu_14 { | ||
background-color: #ff9800; | background-color: #ff9800; | ||
Line 7: | Line 15: | ||
z-index: 3; | z-index: 3; | ||
} | } | ||
+ | |||
+ | #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; | ||
+ | text-align: justify; | ||
+ | text-justify: inter-word; | ||
+ | } | ||
+ | |||
+ | .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%; | ||
+ | } | ||
+ | |||
+ | /* TABLE */ | ||
+ | |||
+ | #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; | ||
+ | } | ||
+ | |||
+ | .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; | ||
+ | opacity: 1 !important; | ||
+ | } | ||
+ | |||
+ | .hero p span, | ||
+ | .hero p i {} | ||
+ | |||
+ | #design p { | ||
+ | top: 47%; | ||
+ | left: 57%; | ||
+ | color: white; | ||
+ | font-size: 11em; | ||
+ | } | ||
+ | |||
+ | #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: 7em; | ||
+ | } | ||
+ | |||
+ | #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: 8em; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #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; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #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: 7em; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #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; | ||
+ | } | ||
+ | |||
+ | #interlab p { | ||
+ | top: 50%; | ||
+ | left: 47%; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | #interlab { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/3/31/T--TUDelft--2017_interlab_V3.png"); | ||
+ | } | ||
+ | |||
+ | #IHP p { | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | font-size: 6em; | ||
+ | color: white; | ||
+ | |||
+ | } | ||
+ | |||
+ | #IHP { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/7/76/T--TUDelft--2017_tweekleurig.png"); | ||
+ | } | ||
+ | |||
+ | #parts p { | ||
+ | top: 35%; | ||
+ | left: 47%; | ||
+ | font-size: 9.5em; | ||
+ | color: white; | ||
+ | |||
+ | } | ||
+ | |||
+ | #parts { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/1/15/T--TUDelft--2017_parts_stain_V3.png"); | ||
+ | } | ||
+ | |||
+ | #project p { | ||
+ | top: 57%; | ||
+ | left: 40%; | ||
+ | font-size: 8em; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #project { | ||
+ | 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 > i { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #notebook-buttons .btn:not(.active) i { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | #notebook-buttons > p { | ||
+ | margin: .1em; | ||
+ | color: grey; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | #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 { | ||
+ | font-size: 2.5em; | ||
+ | font-weight: 800 | ||
+ | } | ||
+ | |||
+ | .notebook h4 { | ||
+ | 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 { | #top_menu_14:hover, #top_menu_14.hover { |
Revision as of 14:09, 17 October 2017
/* TEMP */
- top_menu_14 {
background-color: #ff9800; border-bottom: 2px solid #ff9800; transition: all .25s ease-in-out; z-index: 3;
}/* 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
- /
- 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; text-align: justify; text-justify: inter-word;
}
.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%;
}
/* TABLE */
- 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;
}
.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; 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: rgb(183, 28, 28); 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 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(""); 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 > i {
color: white;
}
- notebook-buttons .btn:not(.active) i {
display: none;
}
- notebook-buttons > p {
margin: .1em; color: grey; font-size: 12px;
}
- 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 {
font-size: 2.5em; font-weight: 800
}
.notebook h4 {
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("");
}
- collaborations p {
top: 50%; left: 50%; color: rgb(183, 28, 28); font-size: 8em;
}
- 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: 9em;
}
- 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;
}
- acknowlegdement {
background-image: url("");
}
- contribution p {
top: 49%; left: 46%; font-size: 8em;
}
- contribution {
background-image: url("");
}
- 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("");
}
- parts p {
top: 56%; left: 38%; font-size: 9.5em;
}
- parts {
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 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(""); 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;
}
/* 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;
}
- /