Forked from
2024 Competition / Bielefeld-CeBiTec
866 commits behind the upstream repository.
-
Liliana Sanfilippo authoredLiliana Sanfilippo authored
App.css 78.17 KiB
/* * * * * * * */
/* * COLOURS * */
/* * * * * * * */
:root {
/* our colours*/
--ourgradient: linear-gradient(90deg, rgba(147,94,184,1) 0%, rgba(160,167,243,1) 100%);
--text-primary: #850F78 ;
--mediumpurple: #bc15aa;
--lightpurple: #B85BD1;
--very-light-purple: #ce9fc9;
/*--purple: #B85BD1; */
--accen-secondary: #F57D22;
--dark-secondary: #ac5818 ;
--light-secondary: #f7974e ;
--very-light-secondary: #fabb8c;
--accent-gradient-one-of-three: #F59121;
--accent-gradient-two-of-three: #F5A520;
--accent-gradient-three-of-three: #F5B91F;
--yellow-dark: #BB9909;
--accent-primary: #F4CC1E;
--lightyellow: #fae99e;
--lightblue: #A0A7F3 ;
--lightblue-zwei: #abb1f4;
--lightblue-drei: #c6caf8;
--verylightblue: #ebecfd;
--offblack: #32232C ;
--cebitecgray: #8295A4;
--ourbeige: #FFF6F2;
--darkerbeige: #e2dad7;
--background: #FFF6F2;
/*igem colours*/
--igemdarkgreen: #006530;
--igemmediumgreen: #019968;
--igemlightgreen: #99cb9a;
--vp-ct: var(--text-primary);
--info-border-color: var(--accent-primary);
--info-bg-color: var(--lightyellow);
--info-title-color: var(--offblack);
--info-code-bg-color: var(--lightyellow);
--note-border-color: var(--text-primary);
--note-bg-color: var(--very-light-purple);
--note-title-color: var(--offblack);
--note-code-bg-color: var(--very-light-purple);
--tip-border-color: var(--offblack);
--tip-bg-color: var(--darkerbeige);
--tip-title-color: var(--offblack);
--tip-code-bg-color: var(--offblack);
--warning-border-color: var(--accen-secondary);
--warning-bg-color: var(--very-light-secondary);
--warning-title-color: var(--offblack);
--danger-code-bg-color: var(--verylightblue);
--danger-border-color: var(--lightblue);
--danger-bg-color: var(--verylightblue);
--danger-title-color: var(--offblack);
--markmap-a-color: var(--text-primary) !important;
--node-size: 60px;
}
html{
scroll-behavior: smooth;
}
.max400{ max-height: 400px !important;
}
.none{
display: none;
}
nav .scrolllink span{
color: var(--ourbeige)!important;
}
.small-row{
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
}
.col-max{
flex: 0 0 0%;
width: max-content !important;
min-width: 77% !important;
max-width: 90% !important;
}
.col-2{
width:16.66666667% !important;
}
sup a{
font-weight: bolder !important;
font-size: small !important;
}
.col-1{
width: 8.33333333% !important;
}
.col2punkt5{
width: 20% !important;
}
.col-max-10{
flex: 0 0 auto;
max-width: 83.33333333% !important;
}
.col{
max-width: 100% !important;
}
.no-pad{
padding: 0 !important;
}
.no-marg{
margin: 0 !important;
}
hr{
color: var(--text-primary) !important;
margin: 0 !important;
opacity: 1 !important;
height: 5px;
border-width: 3px !important;
margin-bottom: 10px !important;
}
/* * * * * * * */
/* * * BODY* * */
/* * * * * * * */
@font-face { font-family: "AcuminPro"; src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-book.ttf') format("truetype"); }
.progress-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 4.5rem;
background: var(--darkerbeige) !important;
transform-origin: 0%;
}
body {
/* padding-top: 56px; */
background-color: var(--ourbeige);
color: var(--offblack);
font-family: AcuminPro !important;
max-width: 100% !important;
}
body.dark-mode {
background-color: var(--offblack);
color: var(--ourbeige);
}
p {
text-align: justify;
}
a {
color: var(--lightblue) !important;
text-decoration: none !important;
}
.our-h3{
margin-top: 20px !important;
margin-bottom: 5px !important;
}
.short-hr{
height: 1px !important;
border-width: 2px !important;
}
code{
color:var(--offblack) !important;
}
.doi{
color: var(--lightblue) !important;
}
.codesnippet{
padding-left: 30px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 15px !important;
color: var(--text-primary) !important;
background-color: rgb(217, 217, 217);
}
/* * * * * * * */
/* *SIDEBAR* * */
/* * * * * * * */
.sidebar{
border-left: 6px solid;
border-left-color: var(--text-primary);
border-color: var(--lightblue);
color: var(--text-primary);
list-style-type: none;
line-height: 280%;
margin: 0px 0px;
padding: 0px 0px;
}.sidebar>div>a>span:hover{
text-shadow: 5px 5px 15px var(--offblack) var(--offblack);
transition: all 0.1s linear;
}
.sideitem{
min-height: 40px;
display: inline-block;
}
.active-sideitem summary{
color: var(--ourbeige);
}
.sidesubtab ul{
list-style-type: none;
}
.sidebar>div{
overflow: hidden;
text-align: left;
margin-left: 10px;
cursor: pointer;
}
.sidebar>div>a>span{
padding: 0.5rem;
color: var(--text-primary);
}
.active-scroll-spy{
background-color: yellowgreen !important;
}
/* * * * * * * */
/* * GENERAL * */
/* * * * * * * */
.relative{position: relative;}
.absolute{position: absolute;}
.left-aligned {margin-left: auto;}
.align-items-center{align-items:center!important}
.zweirem{padding-top: 2rem; padding-bottom: 3rem;}
.left{float: left;}
.right{float: right;}
.sticky-top {
position: -webkit-sticky;
position: sticky !important;
z-index: 1020;
top: 100px !important;
overflow-wrap: break-word;
}
.small-only{
display: none;
}
.fullsize{
max-height: 100% !important;
max-width: 100% !important;
}
.header-container{
padding-top: 0;
padding-bottom: 10px;
background-color: var(--ourbeige);
}
.null{
padding: 0% !important;
margin: 0% !important;
}
.v-align-m{
vertical-align: middle !important;
}
.fit-cont{
max-width: fit-content;}
.center{
display: flex !important;
align-items: center !important;
text-align: center;
align-self: center;
}
.shadow{
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}
/* * * * * * * */
/* * NAVBAR * */
/* * * * * * * */
.nav-link{
color: var(--offblack) !important;
}
.nav-link:hover {
color: var(--ourbeige) !important;
background-color: var(--text-primary) !important;
border-radius: 7px;
}
.navbar{
backdrop-filter: blur(5px);
transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
}
nav.navbar {
padding-top: 1rem;
padding-bottom: 1rem;
}
.dropdown-item{
color: var(--text-primary) !important;
}
.dropdown-item:hover{
color: var(--ourbeige) !important;
background-color: var(--text-primary) !important;
}
.nav-item.dropdown:hover .dropdown-menu {
display: block;
background-color: var(--ourbeige);
border-color: var(--text-primary);
border-radius: 7px;
}
.navbar-brand{
color: var(--offblack) !important;
}
.dropdown-menu{
margin-top: 0 !important;
}
/* TABLES */
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid var(--offblack);
text-align: left;
padding: 8px;
}
.min-w-full{
min-width: 100% !important;
}
.parttable thead tr td:nth-child(4){ /* length */
max-width: 40px !important;
}
.parttable thead tr td:nth-child(5){ /* type */
max-width: 40px !important;}
.parttable thead tr td:nth-child(2){ /* code */
max-width: 60px !important;
}
.parttable thead tr td:nth-child(1){ /* name */
max-width: 60px !important;
}
thead tr {
background-color: var(--text-primary) !important;
color: var(--background);
}
tbody tr:nth-child(even) {
background-color: #ededed;
}
tbody tr:nth-child(odd) {
background-color: #f3f3f3;
}
/* * * * * * * */
/* BACKGROUND */
/* * * * * * * */
.bg-video-container{
margin-bottom: 10vw !important;
}
.b-lg{
border-color: var(--igemlightgreen) !important;
}
.b-lo{
border-color: var(--light-secondary) !important;
}
.bg-lg{
background-color: var(--igemlightgreen) !important;
}
.bg-lp{
background-color: var(--lightpurple) !important;
}
.bg-lo{
background-color: var(--light-secondary) !important;
}
.bg-db{
background-color: var(--darkerbeige) !important;
}
.bg-lb{
background-color: var(--lightblue) !important;
}
.bg-d{
background-color: var(--text-primary) !important;
color: var(--ourbeige);
}
.bg-l{
background-color: var(--text-primary) !important;
color: var(--ourbeige);
}
.bg-transp{
background:transparent;
color: var(--text-primary);
}
/* * * * * * * */
/* *HEADINGS * */
/* * * * * * * */
.base {
width: 100%;
background-color: var(--lightblue);
padding: 120px 30px;}
.header-title{
text-align: center;
align-items: center;
margin: auto !important;
padding: 0 30px;
font-size: 130px;
font-weight: 900;
line-height: 130px;
}
/* p:first-child::first-letter{
color:var(--text-primary);
font-weight: bold;
font-size: x-large;
} */
.popart{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.3vw;
-webkit-text-stroke-color: var(--accent-primary);
text-shadow:
0.4vw 0.4vw var(--text-primary ),
1vw 1vw var(--offblack);
}
.popart-wrapper{
min-height: 5vw;
margin-bottom: 20px !important;
}
.h2{
text-align:center;
/* text-transform:uppercase; */
color: var(--offblack) !important;
font-size: 3rem !important ;
letter-spacing: 1px;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 16px 0;
grid-gap: 22px;
height: auto;
}
.h2-box{
max-width: 100%;
margin-top: 8vh !important;
margin-bottom: 8vh !important;
height: auto;
}
h1{
font-size: 4rem !important;
background-clip: text !important;
color: var(--text-primary) !important;
padding-top: 15px !important;
font-weight: bolder !important;
}
.h3{
margin-bottom: 40px !important;
text-align: center;
font-size: 2.5rem !important ;
/* text-transform: uppercase; */
padding-bottom: 5px;
color: var(--offblack) !important;
margin-top: 5vh !important;
} .h3:after {
width: 28px;
height: 7px;
display: block;
content: "";
position: relative;
bottom: -12px;
left: 50%;
margin-left: -14px;
background-color: var(--mediumpurple);
}
.h3:before {
width: 150px;
height: 1px;
display: block;
content: "";
position: relative;
margin-top: 25px;
left: 50%;
bottom: -65px;
margin-left: -75px;
background-color: inherit;
}
h2{
max-width: 100% !important;
color: var(--text-primary) !important
}
.h2:after, .h2:before {
content: " ";
display: block;
border-bottom: 5px solid var(--text-primary);
background-color: var(--background);
bottom: -1rem !important;
position: relative;
}
.nocaps{
text-transform: none !important;
}
.h4:after, .h4:before {
content: " ";
display: block;
border-bottom: 1px solid var(--mediumpurple);
border-top: 1px solid var(--mediumpurple);
height: 5px;
background-color: inherit;
}
.h4{
margin-top: 5px;
color: var(--offblack) !important;
margin-top: 30px !important ;
font-size:15px; color:#444;
word-spacing:1px;
font-weight:normal;
letter-spacing:2px;
/* text-transform: uppercase; */
font-weight:500;
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-template-rows: 27px 0;
grid-gap: 20px;
align-items: center;
}
.underline--magical {
background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%); background-repeat: no-repeat;
color: var(--offblack);
background-size: 100% 0.2em;
background-position: 0 105%;
transition: background-size 0.25s ease-in;
}
.underline--magical:hover {
background-size: 100% 100%;
color: var(--offblack) !important;
text-decoration: none !important;
}
.v2 p {
background-position: left;
background-size: 0% 100%;
background-image: linear-gradient(#f6e05e, #f6e05e);
}
.v2:hover p {
background-size: 100% 100%;
}
.v3 p {
color: transparent;
background-position: right;
background-size: 100% 100%;
background-image: linear-gradient(#a0aec0, #a0aec0);
}
.v3:hover p {
color: var(--offblack);
background-size: 0% 100%;
}
/* * * * * * * */
/* * CALLOUT * */
/* * * * * * * */
.bg-b{
background-color: var(--ourbeige);
}
.bd-callout {
padding: 1.25rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
border: 1px solid #e9ecef;
border-left-width: 0.25rem;
border-radius: 0.25rem;
}
.bd-callout h4 {
margin-bottom: 0.25rem;
}
.bd-callout p:last-child {
margin-bottom: 0;
}
.bd-callout code {
border-radius: 0.25rem;
}
.bd-callout + .bd-callout {
margin-top: -0.25rem;
}
.bd-callout-info {
border-left-color: #ABD2FA;
}
.bd-callout-warning { border-left-color: #f0ad4e;
}
.bd-callout-danger {
border-left-color: var(--lightblue);
}
/* * * * * * * */
/* * FOOTER * */
/* * * * * * * */
footer{
background-color: var(--background);
}
footer a {
color: var(--ourbeige) !important;
font-weight: bold;
text-decoration: none;
}
footer a:hover {
color: var(--lightblue) !important;
text-decoration: underline;
}
/* * * * * * * * */
/* * *BUTTONS* * */
/* * * * * * * * */
.hp-more-button{
padding: 5px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
}
.hp-more-button:hover, .bfh-more-button:hover{
filter: brightness(0.5);
}
.bfh-more-button{
margin-top: 20px;
padding: 5px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
}
/* * * * * * * * */
/*VILLAGE BUTTONS*/
/* * * * * * * * */
.bottom-buttons{
margin-top: 50px !important;
margin-bottom: 20px;
padding-left: 30px;
}
.normal-buttons{
margin-top: 10px !important;
margin-bottom: 20px;
padding-left: 30px;
}
.village-style-button{
flex: 1 0 0%;
box-shadow: 5px 5px 15px gray !important;
border-radius: 2rem !important;
padding: 0 !important;
max-width: 12% !important;
aspect-ratio: 2 / 3 !important;
margin: auto; }
.village-style-button:hover{
box-shadow: 5px 5px 15px var(--offblack) !important;
}
.village-style-button h3{
text-align: center !important;
font-size: 10px;
font-weight: bold;
color: var(--offblack);
}
.village-style-button img{
max-width: 70% !important;
max-height: 70% !important;
padding-top: 20px !important;
}
/* * * * * * * * * */
/* * * IMAGES * * */
/* * * * * * * * * */
.teamcolzwei{
margin-top: 3rem !important;
}
img,
picture,
svg {
max-width: 100%;
display: block;
}
.winner-img{ /* @media */
margin-left: 20px;
width: 5vw !important;
max-height: 100px;
margin-top: 10px !important;
}
.s-svg{
max-width: 80%;
}
img .middle{
vertical-align:middle;
}
.sechpro{
margin-top: 25% !important;
margin-bottom: 20% !important;
}
/* .sponsor-portrait{
border: 5px solid var(--accent-primary);
} */
.pronouns{
font-size: 1rem !important;
font-style: italic !important;
}
.team-name{
font-size: 1.6rem !important;
font-weight: bold;
text-align: left !important;
width: fit-content !important;
}
.team-img{
border-radius: 50% !important;
}
.socials{
height: 2rem;
width: auto;
margin: 0.5rem;
}
.team-socials{ height: 1rem;
width: auto;
margin-left: 0.2rem;
}
.steckbrief{
margin-top: 2rem !important;
}
.steckbrief-box{
height: fit-content;
padding: 10px;
border-radius: 30px;
box-shadow: 3px 3px 5px gray !important;
}
.steckbody{
height: 190px !important;
overflow-y: scroll;
overflow-x: hidden;
}
.brieffacts{
overflow-y: scroll;
overflow-x: hidden;
height: 270px !important;
}
.frontbutton, .backbutton{
background-color: var(--mediumpurple) !important;
color: var(--background) !important;
padding: 5px;
border-radius: 10px;
margin: auto;
}
.parent-button{
display: flex;
align-items: center !important;
}
.spin {
transition: transform 1s ease-in-out;
}
.spin:hover{
transform: rotate(360deg);
}
.img-sponsor{
max-width: 70%;
max-height: 150px;
margin-left: auto;
margin-right: auto;
}
.img-sponsor-partner-page{
max-width: 70%;
max-height: 100px;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
padding-top: 10px;
}
.img-right{
float: right !important;
padding-left: 2vw !important;
padding-bottom: 1vw !important;
padding-top: 1vw !important;
}
.img-left{
float: left !important;
padding-right: 2vw !important;
padding-bottom: 1vw !important;
padding-top: 1vw !important;
}
.img-half{
max-width: 50% !important;}
.interview-img{
max-height: 70% !important;
}
.img-round{
border-radius: 50%;
width: 120px;
height: 120px;
max-height: 13vh;
max-width: 13vh;
object-fit: cover !important;
}
.img-cube{
max-width: 80%;
}
.updown{
max-width: 3vw;
}
.hexagon{
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.sponsor-portrait{
border-radius: 10px !important;
border: 5px solid var(--accent-primary);
background-color: var(--ourbeige);
}
.sponsor-text-right{
margin-left: 20px;
}
.sponsor-text-left{
margin-right: 20px;
}
#zeiss-portrait{
height: 350px !important;
background-image: url(https://static.igem.wiki/teams/5247/sponsors/zeiss-foto.jpg);
background-size: auto 100%;
background-repeat: no-repeat;
}
#zeiss-portrait-logo{
padding-top: 10px;
height: 90px;
}
.sponsor-text-left p, .sponsor-text-right p{
display: flex;
vertical-align: middle;
}
#idt-portrait{
height: 350px !important;
background-image: url(https://static.igem.wiki/teams/5247/sponsors/idt-foto.png);
background-size: auto 100%;
background-repeat: no-repeat;
}
#idt-portrait-logo{
padding-top: 10px;
height: 50px;
}
#integra-portrait{
height: 300px !important;
background-image: url(https://static.igem.wiki/teams/5247/sponsors/integra-foto.jpg);
background-size: auto 100%;
background-repeat: no-repeat;
background-color: var(--ourbeige);
}
#integra-portrait-logo{
padding-top: 10px; height: 40px;
}
/* * * * * * * */
/* * * SVG * * */
/* * * * * * * */
svg{
background:transparent
}
.hone svg text{
font-size: 7vw !important;
stroke-width:2px !important;
fill:var(--accent-primary) ;
stroke:var(--text-primary);
/*letter-spacing:4px;*/
animation:effect 3s, dash 3s;
}
.hone svg text:hover{
fill: var(--text-primary)
}
/* * * * * * * */
/* * EFFECTS * */
/* * * * * * * */
@keyframes effect{
0%{
stroke-dasharray:0 70%;
}
100%{
stroke-dasharray:10% 0%;
stroke-dashoffset:20%;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 1300;
}
35% {
fill-opacity: 0;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
/* Headings */
.revealUp {
opacity: 0;
visibility: hidden;
}
.spacer {
height: 50vh;
background-color: var(--offblack);
}
.hello:hover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25vw;
animation-name: jumpy;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
-webkit-text-stroke-width: 3px; -webkit-text-stroke-color: var(--offblack);
}
.terminal-box{
margin-top: 10px;
margin-bottom: 10px;
background-color: var(--offblack);
border-radius: 10px;
color: var(--ourbeige);
padding-left: 30px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.terminal-box .terminal-error{
color: red;
}
.problem-error::before {
background-image: url(https://static.igem.wiki/teams/5247/design/icons/cross-circle.png);
background-size: 20px 20px;
content: "";
background-repeat: no-repeat;
width: 20px;
height: 20px;
padding-right: 30px;
align-self: center;
}
.problem-error{
display: inline-flex;
margin-top: 10px;
margin-bottom: 10px;
background-color: var(--offblack);
border-radius: 10px;
color: var(--ourbeige);
padding-left: 30px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
@media only screen and (max-width: 1023px) {
.timeline-item-content {
max-width: 100%;
}
}
@media only screen and (max-width: 767px) {
.timeline-item-content,
.timeline-item:nth-child(odd) .timeline-item-content {
padding: 15px 10px;
text-align: center;
align-items: center;
}
.timeline-item-content .tag {
width: calc(100% - 10px);
text-align: center;
}
.timeline-item-content time {
margin-top: 20px;
}
.timeline-item-content a {
text-decoration: underline;
}
.timeline-item-content a::after {
display: none; }
}
.imageCredit { margin-top: 10px; font-size: 0.85rem }
.imageText { margin-bottom: 10px; font-size: 1rem }
.events{ padding: 10px }
.event { margin-bottom: 20px }
.card-col{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-basis: 50%;
flex-grow: 1;
align-items: flex-end;
}
.img-text{
margin-bottom:10px;
font-size: 1rem;
}
.img-credit{
margin-top: 10px;
font-size: 0.85rem;
}
.event{
position: relative;
display: flex;
margin-top: 20px;
}
.img-timeline{
overflow: hidden;
object-fit: cover;
width: 100%;
max-height: 400px;
}
/*PDF*/
.container_document{
max-width: 40%;
}
.download-butt{
color: var(--ourbeige) !important;
display: inline-block;
height: 50px !important;
}
.download-butt{ /* @media unnötig */
background: var(--ourgradient);
padding: 0.5vh !important;
border-radius: 5px;
margin: auto !important;
text-align: center;
min-width: 5vw !important;
width: 30vw !important;
max-width: 200px !important;
min-height: 2vh !important;
}
.download-col{
display: flex;
margin-top: 20px !important;
align-items: center !important;
}
.small-i{ /* @media unnötig */ width: 100%;
max-width: 1100px !important;
}
.one-pdf-line{ /* @media fertig */
height: 1450px !important;
}
.two-pdf-line{ /* @media fertig */
max-height: 650px !important;
height: 35vh !important;
max-width: 50%;
}
/* SHAPES */
.circle {
display: flex;
width: 10vw;
color: var(--ourbeige);
height: 10vw;
background-color: var(--text-primary) !important;
box-shadow: 3px 3px 10px var(--offblack) !important;
border-radius: 50%;
margin: 1vw;
}
.shape-text {
margin: auto;
text-align: center;
}
/*collapsible*/
.collapse-card {
margin-bottom: 20px;
border-radius: 4px;
margin-top: 20px;
color: #333;
padding: 5px;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
width: 100%;
}
/*boxes*/
.hint-container {
position:relative;
transition:background var(--vp-ct)border-color var(--vp-ct),color var(--vp-ct)
}
@media print {
.hint-container {
page-break-inside:avoid
}
}
.hint-container .hint-container-title {
position:relative;
font-weight:600;
line-height:1.25
}
.hint-container.info,
.hint-container.note,
.hint-container.tip,
.hint-container.warning,
.hint-container.danger {
margin:1rem 0;
padding:.25rem 1rem;
border-inline-start-width:.3rem;
border-inline-start-style:solid;
border-radius:.5rem;
color:inherit
}@media (max-width: 419px) {
.hint-container.info,
.hint-container.note,
.hint-container.tip,
.hint-container.warning,
.hint-container.danger {
margin-inline:-.75rem
}
}
.hint-container.info .hint-container-title,
.hint-container.note .hint-container-title,
.hint-container.tip .hint-container-title,
.hint-container.warning .hint-container-title,
.hint-container.danger .hint-container-title {
padding-inline-start:1.75rem
}
@media print {
.hint-container.info .hint-container-title,
.hint-container.note .hint-container-title,
.hint-container.tip .hint-container-title,
.hint-container.warning .hint-container-title,
.hint-container.danger .hint-container-title {
padding-inline-start:0
}
}
.hint-container.info .hint-container-title:before,
.hint-container.note .hint-container-title:before,
.hint-container.tip .hint-container-title:before,
.hint-container.warning .hint-container-title:before,
.hint-container.danger .hint-container-title:before {
content:" ";
position:absolute;
top:calc(50% - .6125em);
left:0;
width:1.25em;
height:1.25em;
background-position:left;
background-repeat:no-repeat
}
@media print {
.hint-container.info .hint-container-title:before,
.hint-container.note .hint-container-title:before,
.hint-container.tip .hint-container-title:before,
.hint-container.warning .hint-container-title:before,
.hint-container.danger .hint-container-title:before {
display:none
}
}
html[dir=rtl] .hint-container.info .hint-container-title:before,
html[dir=rtl] .hint-container.note .hint-container-title:before,
html[dir=rtl] .hint-container.tip .hint-container-title:before,
html[dir=rtl] .hint-container.warning .hint-container-title:before,
html[dir=rtl] .hint-container.danger .hint-container-title:before {
right:0;
left:unset
}
.hint-container.info p,
.hint-container.note p,
.hint-container.tip p,
.hint-container.warning p,
.hint-container.danger p {
line-height:1.5
}
.hint-container.info a,
.hint-container.note a,
.hint-container.tip a,
.hint-container.warning a,
.hint-container.danger a {
color:var(--vp-tc)
}.hint-container.info {
border-color:var(--info-border-color);
background:var(--info-bg-color)
}
.hint-container.info>.hint-container-title {
color:var(--info-title-color)
}
.hint-container.info>.hint-container-title:before {
background-image:url("https://static.igem.wiki/teams/5247/design/icons/info-filled-small.png")
}
.hint-container.info code {
background:var(--info-code-bg-color)
}
.hint-container.danger {
border-color:var(--danger-border-color);
background:var(--danger-bg-color)
}
.hint-container.danger>.hint-container-title {
color:var(--danger-title-color)
}
.hint-container.danger>.hint-container-title:before {
background-image:url("")
}
.hint-container.danger code {
background:var(--danger-code-bg-color)
}
.hint-container.tip {
border-color:var(--tip-border-color);
background:var(--tip-bg-color) !important;
}
.hint-container.tip>.hint-container-title {
color:var(--tip-title-color)
}
.hint-container.tip>.hint-container-title:before {
background-image:url("")
}
.hint-container.tip code {
background:var(--tip-code-bg-color)
}
.hint-container.warning {
border-color:var(--warning-border-color);
background:var(--warning-bg-color) !important;
}
.hint-container.warning>.hint-container-title {
color:var(--warning-title-color);
}
.hint-container.warning>.hint-container-title:before {
background-image:url("")
}
.hint-container.warning code {
background:var(--warning-code-bg-color)
}
.hint-container.note {
border-color:var(--note-border-color);
background:var(--note-bg-color) !important;
}
.hint-container.note>.hint-container-title {
color:var(--note-title-color);
}
.hint-container.note>.hint-container-title:before {
background-image:url("")
}
.hint-container.note code {
background:var(--note-code-bg-color)
}
/*POPUP*/
.popup { position: relative;
display: inline-block;
cursor: pointer;
left: 10%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
min-width: 50vw;
min-height: 20vw;
background-color: #555;
color: var(--ourbeige);
text-align: center;
border-radius: 6px;
z-index: 1;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.tl-butt img:hover{
cursor: pointer;
box-shadow: 3px 3px 10px var(--offblack);
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
.tabcontent {
display: none;
padding: 6px 12px;
}
/*GALLERY*/
.gall {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
display: grid;
margin: calc(var(--s) + var(--g));
}
.gall > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
cursor: pointer; filter: grayscale(80%);
transition: .2s linear;
}
.gall > img:hover {
filter: grayscale(0);
z-index: 1;
--_t: 1.2;
}
.gall > img:nth-child(1) {--_y: calc(-100% - var(--g))}
.gall > img:nth-child(7) {--_y: calc( 100% + var(--g))}
.gall > img:nth-child(3), .gall > img:nth-child(5) {--_x: calc(-75% - .87*var(--g))}
.gall > img:nth-child(4), .gall > img:nth-child(6) {--_x: calc( 75% + .87*var(--g))}
.gall > img:nth-child(3),.gall > img:nth-child(4) {--_y: calc(-50% - .5*var(--g))}
.gall > img:nth-child(5), .gall > img:nth-child(6) {--_y: calc( 50% + .5*var(--g))}
.wrapper{
width: 500px;
height: 100%;
background: var(--ourbeige);
margin: 15px auto 0;
}
.wrapper .tabs_wrap{
padding: 20px;
border-bottom: 1px solid #ebedec;
}
.wrapper .tabs_wrap ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.wrapper .tabs_wrap ul li{
list-style-type: none;
width: 135px;
text-align: center;
background: #e9ecf1;
border-right: 1px solid #c1c4c9;
padding: 13px 15px;
cursor: pointer;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.wrapper .tabs_wrap ul li:first-child{
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.wrapper .tabs_wrap ul li:last-child{
border-right: 0px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.wrapper .tabs_wrap ul li:hover,
.wrapper .tabs_wrap ul li.active{
background: #7fc469;
color: var(--ourbeige);
}
.gall-a {
--s: 200px; /* control the size */
--g: 8px; /* control the gap */
display: grid;
grid: auto-flow var(--s)/repeat(2,var(--s));
gap: var(--g);
}
.gall-a > span {
width: 100%;
aspect-ratio: 1;
z-index: 0;
position: relative;
transition: .25s,z-index 0s .25s;
background-color: lightgray;
}
.gall-b:hover{
background-color: var(--ourbeige);
}
.bg-act{
background-color: var(--background)!important;
}
.gall-a > span > div > img{
width: 8rem;
position: absolute;
cursor: pointer;
}
.gall-a > span:nth-child(1) > div > img{
bottom: 0.5rem;
right: 1rem;
}
.gall-a > span:nth-child(2) > div > img{
bottom: 0.5rem;
left : 1rem;
}
.gall-a > span:nth-child(3) > div > img{
top: 0.5rem;
right: 1rem;
}
.gall-a > span:nth-child(4) > div > img{
top: 0.5rem;
left: 1rem;
}
.gall-a > span:nth-child(1){
clip-path: circle(var(--_c,70% at 70% 70%));
place-self: start;
}
.gall-a > span:nth-child(2){
clip-path: circle(var(--_c,70% at 30% 70%));
place-self: start end;
}
.gall-a > span:nth-child(3){
clip-path: circle(var(--_c,70% at 70% 30%));
place-self: end start;
}
.gall-a > span:nth-child(4){
clip-path: circle(var(--_c,70% at 30% 30%));
place-self: end;
}
.buffer{
height: 5vw;
}
.explore{
position: absolute;
right: -4vw;
bottom: 8vw;
z-index: 1;
transform: rotate(-35deg);
font-size: xx-large;}
.team-container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
column-gap: 10px;
row-gap: 15px;
}
/* TEAM */
.lnp{
background-image: url("https://static.igem.wiki/teams/5247/scientific-figures/lnp.png");
height: 12rem;
width: 12rem;
background-size: 11.8rem;
background-repeat: no-repeat;
background-position: center;
align-items: center;
}
.lnp > img{
display: block;
margin-left: auto;
margin-right: auto;
width: 8rem !important;
max-width: 66% !important;
transition: all 1s ease;
border: 5px solid var(--text-primary);
}
.lnp:hover > img{
display: block;
margin-left: none;
margin-right: none;
width: 25rem !important;
max-width: 100% !important;
}
#rnabindingtext:hover, #pegrnatext:hover, #nikasetext:hover, #linkertext:hover,
#PEtext:hover, #stemlooptext:hover, #ribotext:hover
{
fill: var(--text-primary) !important;
stroke: var(--text-primary) !important;
font-size: 17px !important;
}
/* datawrapper */
.chart.vis-d3-maps-choropleth {
overflow: hidden;
position: relative
}
.chart.vis-d3-maps-choropleth .label-buffer.svelte-u5v6p6,
.chart.vis-d3-maps-choropleth .label.svelte-u5v6p6 {
text-anchor: end
}
.chart.vis-d3-maps-choropleth .rtl .label-buffer.svelte-u5v6p6,
.chart.vis-d3-maps-choropleth .rtl .label.svelte-u5v6p6 {
text-anchor: start
}
.chart.vis-d3-maps-choropleth .inset-map-container svg {
overflow: visible
}
.chart.vis-d3-maps-choropleth .inset-map-container path.view {
fill: none }
.chart.vis-d3-maps-choropleth .inset-map-container circle.view {
stroke: none
}
.chart.vis-d3-maps-choropleth .inset-map-container .graticule {
fill: none
}
.chart.vis-d3-maps-choropleth .inset-map-container div.label {
position: absolute;
text-align: center
}
.chart.vis-d3-maps-choropleth .inset-map-container div.label.outline {
opacity: .5
}
.chart.vis-d3-maps-choropleth .inset-map-container div.label:not(.outline) span {
text-shadow: none
}
.chart.vis-d3-maps-choropleth .legend-container {
display: flex;
justify-content: start;
z-index: 1
}
.chart.vis-d3-maps-choropleth .legend-container.align-center {
justify-content: center
}
.chart.vis-d3-maps-choropleth .legend-container[data-position*=inside] {
justify-content: start
}
.chart.vis-d3-maps-choropleth .legend-container.align-center .legend-title {
text-align: center
}
.chart.vis-d3-maps-choropleth .legend-container.align-center .category-legend.horizontal {
display: grid;
justify-items: center
}
.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=above],
.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=below] {
align-items: center
}
.chart.vis-d3-maps-choropleth .legend-combined {
gap: 10px
}
@media (max-width:449px) {
.chart.vis-d3-maps-choropleth .legend-container {
display: block
}
}
.chart.vis-d3-maps-choropleth .map-key.mobile {
background: var(--offblack)0;
position: static!important
}
.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories {
display: inline-block!important
}
.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal {
height: auto!important;
width: auto!important
}
.chart.vis-d3-maps-choropleth .map-key.mobile .title br {
display: none
}
.chart.vis-d3-maps-choropleth .map-key.map-key-mb,
.chart.vis-d3-maps-choropleth .map-key.map-key-mt,
.chart.vis-d3-maps-choropleth .map-key.mobile {
background: var(--offblack)0;
padding: 0;
position: static!important
}
.chart.vis-d3-maps-choropleth .map-key.map-key-mb .legend-categories,
.chart.vis-d3-maps-choropleth .map-key.map-key-mt .legend-categories,
.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories {
display: inline-block!important
}
.chart.vis-d3-maps-choropleth .map-key.map-key-mb .category-legend.horizontal,
.chart.vis-d3-maps-choropleth .map-key.map-key-mt .category-legend.horizontal,
.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal {
height: auto!important;
width: auto!important
}
.chart.vis-d3-maps-choropleth .map-key svg {
display: block
}
.chart.vis-d3-maps-choropleth .category-legend {
border-radius: 4px
}
.chart.vis-d3-maps-choropleth .color-legend {
border-radius: 0
}
.chart.vis-d3-maps-choropleth .dw-tooltip {
background: var(--ourbeige);
border: 1px solid #f5f5f5;
box-shadow: 3px 3px 3px var(--offblack)0001a;
font-size: 11px;
max-width: 200px;
padding: 10px;
position: absolute;
visibility: hidden;
z-index: 100
}
.chart.vis-d3-maps-choropleth .dw-tooltip h2 {
font-size: 13px;
margin-top: 0
}
.chart.vis-d3-maps-choropleth .dw-tooltip table {
border-spacing: 0;
color: inherit;
font-size: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
white-space: inherit
}
.chart.vis-d3-maps-choropleth .dw-tooltip td,
.chart.vis-d3-maps-choropleth .dw-tooltip th {
padding: 0 5px 3px 0;
text-align: left
}
.chart.vis-d3-maps-choropleth .dw-tooltip ol,
.chart.vis-d3-maps-choropleth .dw-tooltip ul {
padding-left: 15px
}
.chart.vis-d3-maps-choropleth .dw-tooltip ol li,
.chart.vis-d3-maps-choropleth .dw-tooltip ul li {
margin-bottom: 2px
}
.chart.vis-d3-maps-choropleth .dw-tooltip hr {
border: 0;
border-top: 1px solid #777
}
.chart.vis-d3-maps-choropleth .dw-tooltip big {
font-size: 120%
}
.chart.vis-d3-maps-choropleth .dw-tooltip small {
font-size: 95%
}
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning {
background-color: #f2dede;
border: 1px solid #eed3d7;
border-radius: 4px;
color: #b94a48;
font-family: roboto;
font-weight: 700;
padding: 8px 35px 8px 14px;
position: relative;
text-shadow: 0 1px 0 var(--cebitecgray)
}
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table {
background: var(--ourbeige);
border-radius: 1px;
display: block;
font-weight: 400;
margin-top: 10px;
padding: 1px 4px
}
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td {
padding: 0;
vertical-align: top
}
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td.arrow {
padding-right: 2px
}
.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close {
color: #a7a7a7;
float: right;
font-size: 17px;
height: 17px;
line-height: 17px;
transform: translate(7px, -5px);
width: 17px
}
.chart.vis-d3-maps-choropleth .dw-tooltip {
left: 0;
padding-right: 20px;
pointer-events: none;
top: 0
}
.chart.vis-d3-maps-choropleth .dw-tooltip.sticky {
pointer-events: all
}
.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close {
color: #d8d8d8;
cursor: pointer;
font-size: 14px;
height: 14px;
line-height: 14px;
position: absolute;
right: 2px;
text-align: center;
top: 2px;
transform: none;
width: 14px
}
@media (max-device-width:600px) {
.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close {
font-size: 17px;
height: 17px;
line-height: 17px;
padding: 4px;
width: 17px
}
}
.chart.vis-d3-maps-choropleth rect.background {
fill: none;
pointer-events: all
}
.chart.vis-d3-maps-choropleth svg.svg-main {
display: block
}
.chart.vis-d3-maps-choropleth .label {
pointer-events: none
}
.chart.vis-d3-maps-choropleth .map-outer {
position: relative
}
.chart.vis-d3-maps-choropleth .annotations,
.chart.vis-d3-maps-choropleth .map-outer canvas {
left: 0;
pointer-events: none;
position: absolute;
top: 0
}
.chart.vis-d3-maps-choropleth .annotations {
height: 99%;
width: 100%
}
.chart.vis-d3-maps-choropleth .d3-maps-zoomed-in .annotations {
overflow: hidden
}
.chart.vis-d3-maps-choropleth .editing-annotations .zoom-buttons, .chart.vis-d3-maps-choropleth .editing-annotations svg {
pointer-events: none
}
.chart.vis-d3-maps-choropleth .legend-container {
min-height: 10px
}
.chart.vis-d3-maps-choropleth .inset-map-container {
opacity: 1;
pointer-events: none;
position: absolute;
transition: opacity .1s ease-in-out
}
.chart.vis-d3-maps-choropleth .dw-chart-body-content.inset-map-zoom-only:not(.inset-map-show) .inset-map-container {
opacity: 0
}
.chart.vis-d3-maps-choropleth path.region {
fill: #bebcba
}
.chart.vis-d3-maps-choropleth .lbl-hidden {
pointer-events: none;
visibility: hidden
}
.chart.vis-d3-maps-choropleth path.borders {
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none
}
.static .zoom-buttons {
display: none
}
.d3-maps-zoomed-in .annotations {
overflow: hidden
}
body.in-editor,
.web-component-body.in-editor {
padding-bottom: 10px
}
.dw-chart.vis-height-fit {
overflow: hidden
}
.chart.dir-rtl .dw-chart-body.svelte-9ysojt {
direction: rtl
}
.chart.is-dark-mode .hide-in-dark {
display: none
}
.chart:not(.is-dark-mode) .hide-in-light {
display: none
}
.chart .sr-only {
position: absolute;
left: -9999px;
height: 1px
}
.chart.js.svelte-9ysojt .noscript { display: none
}
.chart .hidden,
.chart .hide {
display: none
}
a img {
border: 0px
}
b,
strong {
font-weight: bold
}
svg rect {
shape-rendering: crispEdges
}
.error {
background-color: #fbeff2;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
margin: 2em
}
.error p {
color: #b63057;
font-size: 14px;
padding: 1.25em 1.5em;
line-height: 1.5;
border-color: #cf4870;
border-style: solid;
border-width: 0 0 0 4px;
border-radius: 4px
}
.dw-chart-body-content.svelte-9ysojt {
position: relative;
z-index: 0
}
.is-static.svelte-ej8jdi a {
color: unset;
pointer-events: none;
text-decoration: inherit
}
.dir-rtl .outer-container.svelte-ej8jdi {
direction: rtl
}
.outer-container.svelte-ej8jdi {
position: relative
}
.container-afterChart.svelte-ej8jdi {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
right: 0;
bottom: 0
}
/* Additional bc missing? */
/* .datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
dominant-baseline: hanging;
} */ .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.min, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.min {
text-anchor: start;
}
.datawrapper-llngz-1j8h2cc text:not(.buffer) {
fill: currentcolor;
}
.datawrapper-llngz-umw1i2 {
color: rgb(24, 24, 24) !important;
font-family: Roboto, sans-serif;
font-size: 12px;
}
/* .datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
dominant-baseline: hanging;
}
.data */wrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.max, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.max {
text-anchor: end;
}
.chart.vis-d3-maps-choropleth .map-outer {
position: relative;
}
.chart.vis-d3-maps-choropleth .annotations, .chart.vis-d3-maps-choropleth .map-outer canvas {
left: 0;
pointer-events: none;
position: absolute;
top: 0;
}
.chart.vis-d3-maps-choropleth rect.background {
fill: none;
pointer-events: all;
}
svg rect {
shape-rendering: crispEdges;
}
.datawrapper-llngz-mbp9a6 path.region-outline.has-data:hover, .datawrapper-llngz-mbp9a6 path.region-outline.hover-outline, .datawrapper-llngz-mbp9a6 path.region-outline.sticky {
stroke: rgb(0, 0, 0);
}
/* FILTER */
.filterable {
margin-bottom: 4px;
display: none;
}
.show {
display: block;
}
.noshow{
display: none;
}
/* SLICK */
/* .slider-container{
display: grid;
align-items: center;
} */
.slick-slider
{
position: relative;
display: flex;
box-sizing: border-box;
align-items: center !important;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: inline;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: var(--ourbeige);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: var(--offblack);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: var(--offblack);
}
.sponsor-container{
align-items: center !important;
display: flex !important;
}
#First{
display: block;
}
.meditabs, .meditabs, .timelinecardtabs, .timelinepersontabs{
display: none;
}
.timelinecardtabs{
max-width: 100% !important;
}
.tabbutton{
padding: 5px;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
}
.blockquote-wrapper {
display: flex;
height: fit-content;
}
/* Blockquote main style */
.blockquote {
position: relative;
font-style: sans-serif;
max-width: 80%;
margin: 40px auto !important;
align-self: center;
}
/* Blockquote header */
.blockquote .block-h2 {
font-style: italic;
position: relative; /* for pseudos */
color: var(--offblack);
font-size: 2.8rem !important;
font-weight: normal;
line-height: 1;
font-size: larger;
margin: 0;
border: solid 5px var(--text-primary) !important;
border-radius:20px;
padding: 25px;
}
/* Blockquote right double quotes */
.blockquote .block-h2:after {
content:"";
position: absolute;
border: 5px solid var(--text-primary);
border-radius: 0 50px 0 0;
width: 60px;
height: 60px;
bottom: -60px;
left: 50px;
border-bottom: none;
border-left: none;
z-index: 3;
}
.blockquote .block-h2:before {
content:"";
position: absolute;
width: 80px;
border: 5px solid var(--ourbeige);
bottom: -5px;
left: 50px;
z-index: 2;
}
/* increase header size after 600px */
@media all and (min-width: 600px) {
.blockquote h1 {
font-size: 3rem;
line-height: 1.2;
}
}
/* Blockquote subheader */
.blockquote .block-h4{
position: relative;
color: var(--offblack);
font-size: 1.3rem !important;
font-weight: 400; line-height: 1.2;
font-size: medium;
margin: 0;
padding-top: 15px;
z-index: 1;
margin-left:150px;
padding-left:12px;
}
.blockquote h4:first-letter {
margin-left:-12px;
}
/* #ct{height:150px; width:370px;border:4px solid var(--accent-dark);margin: 100px auto;text-align:center;position:relative;color:var(--ourbeige);padding:15px;}
span{
background:var(--background);
color:var(--accent-dark);
padding:0 10px;
font-size:20px;
position:relative;
top:-28px;
} */
.corner{
height:36px;
width:36px;
border-radius:50%;
border:4px solid var(--ourbeige);
transform:rotate(-45deg);
position:absolute;
background:var(--ourbeige);
}
#left_top{
top:-16px;
left:-16px;
border-width: 4px;
border-color:transparent transparent var(--text-primary) transparent;
}
#right_top{
top:-16px;
right:-16px;
border-width: 4px;
border-color:transparent transparent transparent var(--text-primary);
}
#left_bottom{
bottom:-16px;
left:-16px;
border-width: 4px;
border-color:transparent var(--text-primary) transparent transparent ;
}
#right_bottom{
bottom:-16px;
right:-16px;
border-width: 4px;
border-color:var(--text-primary) transparent transparent transparent;
}
/* Blockquote main style */
.blockquotex {
position: relative;
font-style: sans-serif;
font-weight: 800;
color: var(--offblack);
padding: 30px 0;
width: 100%;
max-width: 80%; z-index: 1;
margin: 80px auto;
align-self: center;
border-top: solid 1px var(--text-primary);
border-bottom: solid 1px var(--text-primary);
}
/* Blockquote header */
.blockquotex h1 {
position: relative;
color: var(--offblack);
font-size: 20px !important;
font-weight: 800;
line-height: 1;
margin: 0;
}
/* Blockquote right double quotes */
.blockquotex:after {
position: absolute;
content: "”";
color: var(--accent-primary);
font-size: 5rem;
line-height: 0;
bottom: -25px;
right: 30px;
}
/* increase header size after 600px */
@media all and (min-width: 600px) {
.blockquotex h1 {
font-size: 60px;
}
}
/* Blockquote subheader */
.blockquotex h4 {
position: relative;
color: var(--text-primary);
font-size: 1rem;
font-weight: normal;
line-height: 1;
margin: 0;
padding-top: 20px;
z-index: 1;
}
.figure-img{
padding: 30px 10px;
border-radius: 10px;
margin: 10px 0 !important;
}
.personalstyleone{
padding-left: 10px;
padding-top: 40px;
padding-bottom: 40px;
padding-right: 10px;
width: 100%;
background-color: var(--text-primary);
color: var(--ourbeige);
border-radius: 10px;
margin-bottom: 50px;
margin-top: 50px;
}
.react-flow__node-mindmap {
background: var(--ourbeige);
border-radius: 2px; border: 1px solid transparent;
padding: 2px 5px;
font-weight: 700;
}
.diagram-hp{
height: 300px;
width: 100%;
}
.markmap-link {
fill: none;
}
.markmap-node > circle {
fill: var(--background);
}
.mindmap {
position:relative;
top: 1vw;
left: 0;
right: 0;
width: auto;
height: auto;
margin: 0 auto;
padding: calc(var(--node-size) / 2);
text-align: center;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mindmap:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
}
.node {
position: relative;
display: inline-block;
vertical-align: middle;
height: var(--node-size);
width: calc(var(--node-size) * 2);
margin: 0.25vw 0;
text-align: center;
line-height: var(--node-size);
border: 0.1vw solid var(--text-primary);
border-radius: 5%;
background: var(--background);
cursor: pointer;
font-size: small;
-webkit-transition: all .2s ease;
transition: all .2s ease;
z-index: 5;
}
.node_root {
height: calc(var(--node-size) * 2);
width: calc(var(--node-size) * 2);
border: 0;
border: 0.1vw solid var(--text-primary);
border-radius: 50%; text-align: center;
line-height: calc(var(--node-size) * 2);
font-size: 1.1em;
}
.node_root img{
width: calc(var(--node-size) * 1.5);
height: calc(var(--node-size) * 1.5);
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
.children {
position: relative;
list-style: none;
text-align: left;
padding: 0 0 0 6px;
display: inline-block;
vertical-align: middle;
}
.children:before {
content: '';
position: absolute;
top: 50%;
left: -2px;
width: 8px;
border-top: 1px solid var(--text-primary);
}
.children_item {
position: relative;
padding: 0 0 0 10px;
border-left: 1px solid var(--text-primary);
}
.children_item:first-child,
.children_item:last-child {
border-left: 1px solid transparent;
}
.children_item:before {
content: '';
width: 10px;
border-top: 1px solid var(--text-primary);
position: absolute;
top: 50%;
left: 0;
}
.node_text {
overflow: hidden;
z-index: 7;
max-width: inherit;
}
.children_item:first-child:before {
left: -1px;
bottom: 0;
width: 11px;
border-radius: 4px 0 0 0;
border-left: 1px solid var(--text-primary);
}
.children_item:last-child:before { left: -1px;
top: 0;
width: 11px;
bottom: 50%;
border-radius: 0 0 0 4px;
border: 0;
border-left: 1px solid var(--text-primary);
border-bottom: 1px solid var(--text-primary);
}
.children_item:first-child:last-child:before {
top: 50%;
bottom: auto;
border: 0;
border-radius: 0;
border-top: 1px solid var(--text-primary);
}
.children_leftbranch,
.children_leftbranch .children {
direction: rtl;
text-align: right;
padding: 0 6px 0 0;
}
.children_leftbranch:before,
.children_leftbranch .children:before {
left: auto;
right: -2px;
}
.children_leftbranch .children_item {
padding: 0 10px 0 0;
border: 0;
border-right: 1px solid var(--text-primary);
}
.children_leftbranch .children_item:first-child,
.children_leftbranch .children_item:last-child {
border-right: 1px solid transparent;
}
.children_leftbranch .children_item:before {
top: 50%;
left: auto;
right: 0;
}
.children_leftbranch .children_item:first-child:before {
right: -1px;
border: 0;
border-radius: 0 4px 0 0;
border-top: 1px solid var(--text-primary);
border-right: 1px solid var(--text-primary);
}
.children_leftbranch .children_item:last-child:before {
right: -1px;
top: 0;
bottom: 50%;
border-radius: 0 0 4px 0;
border: 0;
border-right: 1px solid var(--text-primary);
border-bottom: 1px solid var(--text-primary);
}
.children_leftbranch .children_item:first-child:last-child:before {
top: 50%;
bottom: auto; border: 0;
border-radius: 0;
border-top: 1px solid var(--text-primary);
}
/* .children .node{
background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15))) var(--background);
background: linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)) var(--accent-primary);
}
.children .children .node{
background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.30)), to(rgba(0, 0, 0, 0.30))) var(--background);
background: linear-gradient(to top, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)) var(--accent-primary);
}
.children .children .children .node{
background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))) var(--background);
background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)) var(--accent-primary);
}
.children .children .children .children .node{
background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.60)), to(rgba(0, 0, 0, 0.60))) var(--background);
background: linear-gradient(to top, rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)) var(--accent-primary);
}
*/
#L1, #R1{
line-height: calc(var(--node-size) / 4);
text-align: center;
vertical-align: middle;
padding-top: 15px;
}
/* #sidebarbox{
visibility: visible !important;
background-color: red !important;
width: 16.66666667% !important
} */
div.timeline-item.moretop div div.row.align-items-center div.col p{
text-align: left;
}
/* ========================
BUTTON TWO
======================== */
.btn-two {
color: var(--ourbeige);
transition: all 0.5s;
position: relative;
}
.btn-two span {
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.btn-two::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; transition: all 0.5s;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
}
.btn-two::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
}
.btn-two:hover::before {
transform: rotate(-45deg);
background-color: rgba(255, 255, 255, 0);
}
.btn-two:hover::after {
transform: rotate(45deg);
background-color: rgba(255, 255, 255, 0);
}
/*
========================
BUTTON THREE
======================== */
.btn-three {
color: var(--ourbeige);
transition: all 0.5s;
position: relative;
}
.btn-three::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s;
}
.btn-three:hover::before {
opacity: 0;
transform: scale(0.5, 0.5);
}
.btn-three::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.5);
transform: scale(1.2, 1.2);
}
.btn-three:hover::after {
opacity: 1;
transform: scale(1, 1);
}
div[class*="boxy"] {
height: 33.33%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.boxy-1 {
background: var(--ourgradient);
max-width: fit-content;
}
.boxy-2 {
background-color: var(--text-primary);
max-width: fit-content;
}
.boxy-3 {
background-color: var(--text-primary);
max-width: fit-content;
}
.btn-new {
line-height: 50px;
height: 50px;
text-align: center;
width: 250px;
cursor: pointer;
}
/*
========================
BUTTON ONE
========================
*/
.boxy-1{
border-radius: 10px;
}
.btn-one {
color: var(--ourbeige);
transition: all 0.3s;
position: relative;
}
.btn-one span {
transition: all 0.3s;
}
.btn-one::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-bottom-color: rgba(255, 255, 255, 0.5);
transform: scale(0.1, 1);
}
.btn-one:hover span {
letter-spacing: 2px;
}
.btn-one:hover::before {
opacity: 1; transform: scale(1, 1);
}
.btn-one::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(255, 255, 255, 0.1);
}
.btn-one:hover::after {
opacity: 0;
transform: scale(0.1, 1);
}
.backtotop {
place-self: end;
/* visual styling */
text-decoration: none;
padding: 10px;
color:var(--ourbeige) !important;
background: var(--ourgradient);
border-radius: 100px;
white-space: nowrap;
margin-left: 40px;
margin-top: 20px;
text-align: right;
}
.backtotop:hover{
box-shadow: 5px 5px 15px var(--offblack);
color: var(--ourbeige) !important;
transition: all 0.1s linear;
}
.cls-1{fill:#c8d5ea;}
.cls-2{fill:#e8f1f9;opacity:0.43;}
.cls-11,.cls-12,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-9{fill:none;stroke-miterlimit:10;}
.cls-3,.cls-4,.cls-5{stroke:#d30f0f;stroke-linecap:round;}
.cls-3{stroke-width:0.47px;}
.cls-4{stroke-width:0.47px;}
.cls-5{stroke-width:0.66px;}
.cls-6{stroke:#1f4e79;}
.cls-7{stroke:#39dd17;}
.cls-11,.cls-12,.cls-7,.cls-9{stroke-width:4px;}
.cls-8{fill:#39dd17;}.cls-9{stroke:#ce1b1b;}
.cls-10{fill:#ce1b1b;}.cls-11{stroke:#f7931e;}
.cls-12{stroke:#7913e5;}.cls-13{fill:#7913e5;}
.svg-button:hover{
cursor: pointer;
}
.rotate-linear-infinite{
animation: rotation 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to { transform: rotate(359deg);
}
}
/* .rotate-linear-infinite:hover{
animation-play-state: paused;
} */
.methods-node:nth-of-type(1) div{
margin-top: 25%;
font-weight: bold;
font-size: medium;
}
.methods-node:nth-of-type(3) div{
margin-top: 35%;
font-weight: bold;
font-size: small;
}
.methods-node:nth-of-type(5) div, .methods-node:nth-of-type(2) div, .methods-node:nth-of-type(4) div{
margin-top: 35%;
font-weight: bold;
font-size: medium;
}
.methods-node{
position: relative;
display: inline-block;
vertical-align: middle;
height: 6rem;
width: 6rem;
border: 0.1vw solid var(--text-primary);
border-radius: 50%;
cursor: pointer;
margin-left: 20px;
margin-right: 20px;
font-size: small;
-webkit-transition: all .2s ease;
transition: all .2s ease;
z-index: 5;
text-align: center;
}
.methods-node:nth-of-type(1){
background-color: var(--accen-secondary);
}
.methods-node:nth-of-type(2){
background-color: var(--accent-gradient-one-of-three);
}
.methods-node:nth-of-type(3){
background-color: var(--accent-gradient-two-of-three);
}
.methods-node:nth-of-type(4){
background-color: var(--accent-gradient-three-of-three);
}
.methods-node:nth-of-type(5){
background-color: var(--accent-primary);
}
.methods-node:nth-of-type(odd) {
top: 2vw;
left: 0;
}
.methods-node:nth-of-type(even){
bottom: 2vw;
}
.methods-node:nth-of-type(even):before {
content: '';
position: absolute;
top: 80%;
z-index: 0;
left: -3.4vw; width: 3.8vw;
transform: rotate(-25deg);
border-top: 1px solid var(--text-primary);
}
.methods-node:nth-of-type(even):after {
content: '';
position: absolute;
top: 80%;
z-index: 0;
left: 6.4vw;
width: 3.8vw;
transform: rotate(25deg);
border-top: 1px solid var(--text-primary);
}
.bfh-menu{ /* @media fertig */
width: fit-content;
margin: auto !important;
max-width: 60vw !important;
}
a{
cursor: pointer;
}
svg a text{
fill: var(--lightblue) !important;
}
svg a:hover text{
fill: var(--accen-secondary) !important;
}
.bfh-menu svg a:hover > g circle{
fill: var(--accent-gradient-three-of-three) !important;
}
.vertical{
display:inline;
vertical-align: middle;
}
.text-1-bfh{
margin-top: auto !important;
margin-bottom: auto !important;
}
.panel-talk-gallery{
padding: 0 !important;
margin-top: 10px !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
.panel-talk-gallery div{
padding: 0 !important;
}
.panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(5){
margin-top: 60px !important;
}
.panel-talk-gallery .col:nth-child(2), .panel-talk-gallery .col:nth-child(4){
margin-top: 30px !important;
}
.panel-talk-gallery .col .middle{
margin-top: 15px !important;
}
.middle{
text-align: center;
}
.bfh-slider{
max-width: 500px !important;
}.bfh-slider img{
max-width: 400px;
max-height: 70%;
}
.full-screen-width {
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: 50vw !important;
max-width: 100vw !important;
width: 100vw !important;
}
.collapsible-hr{
border-width: 2px !important;
}
.collapsible-a{
margin-top: 1rem !important;
margin-bottom: 1rem;
margin-left: 1rem !important;
}
.box{
padding: 10px;
border-radius: 10px;
}
.detail-sideitem .sideitem{
padding-left: 10px !important;
}
.sideitem .cycletab{
line-height: 100%;
margin-left: 10px;
list-style-type: circle !important;
}
.active-sideitem {
background: var(--ourgradient);
color: var(--ourbeige) !important;
border-radius: 5px;
display: block;
border-width: 5px;
border-color: var(--lightblue);
padding-right: 5px;
padding-left: 5px;
}
.img-sponsor-a{
margin: 20px;
padding: 20px;
max-width: 90%;
}
.sp-a{
border: 5px solid var(--accent-primary);
background-color: var(--ourbeige);
height: 250px !important;
border-radius: 10px;
}
.qabox .question-bubble:nth-child(2){
margin-bottom: 20px; margin-right: 0px;
margin-left: auto;
border: 5px solid var(--accent-gradient-one-of-three);
}
.qabox .question-bubble:nth-child(1){
margin-bottom: 10px;
margin-left: 0px;
margin-right: auto;
border: 5px solid var(--accent-gradient-three-of-three);
}
.question-bubble{
border-radius: 10px;
padding: 20px;
width: fit-content;
max-width: 80%;
min-width: 20%;
position: relative;
}
.qabox .question-bubble:nth-child(2)::before{
bottom: 20px;
clip-path: polygon(0 0, 100% 100%, 0 75%);
left: calc(100%);
width: 20px;
height: 20px;
content: "";
position: absolute;
background: var(--accent-gradient-one-of-three);
}
.qabox .question-bubble:nth-child(1)::before{
bottom: 20px;
clip-path: polygon(0 100%, 100% 0, 100% 75%);
right: calc(100%);
width: 20px;
height: 20px;
content: "";
position: absolute;
background: var(--accent-gradient-three-of-three);
}
.haken-liste{
list-style: none !important;
}
.winner{ /* @media */
vertical-align: middle !important;
font-size: xx-large;
font-weight: 900 ;
margin-top: 10px;
}
.winners{
margin-top: 10px !important;
}
.list-item-img{
max-height: 1.5rem;
}
.trophy::before{
background-image: url(https://static.igem.wiki/teams/5247/design/icons/trophy.svg);
background-size: 40px 40px !important;
content: '';
display: inline-block;
width: 40px;
height: 40px;
}
.certificate::before{ background-image: url(https://static.igem.wiki/teams/5247/design/icons/certificate.svg);
background-size: 40px 40px !important;
content: '';
display: inline-block;
width: 40px;
height: 40px;
}
.tickets::before{
background-image: url(https://static.igem.wiki/teams/5247/design/icons/tickets.svg);
background-size: 40px 40px !important;
content: '';
display: inline-block;
width: 40px;
height: 40px;
}
.kit::before{
background-image: url(https://static.igem.wiki/teams/5247/design/icons/new-box.svg);
background-size: 40px 40px !important;
content: '';
display: inline-block;
width: 40px;
height: 40px;
}
.money::before{
background-image: url(https://static.igem.wiki/teams/5247/design/icons/money.svg);
background-size: 40px 40px !important;
content: '';
display: inline-block;
width: 40px;
height: 40px;
}
.winners div li{
vertical-align: middle;
line-height:2rem;
}
.winners div li span{
font-size: large;
position: relative;
bottom: 1vh;
margin-left: 1rem;
}
.button-left{
position:relative;
}
.left-button{
float: right;
}
.detail-sideitem, .sidesubtab, a {
pointer-events: auto; /* Ensure clickable elements can be interacted with */
}
.subtitle-active .sideitem a summary{
color: var(--ourbeige) !important;
}
.sideitem a summary{
color: var(--offblack) !important;
}
.active-sideitem a summary{
color: var(--ourbeige) !important;
}
.flexbox{
display: flex;
align-items: stretch; margin-bottom: 20px;
}
.hp-timeline-p{
flex: 1;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.flexbox p{
margin-top: auto !important;
margin-bottom: auto !important;
}
.hp-timeline-p p{
margin-top: auto !important;
}
.hp-timeline-img{
margin-top: 0 !important;
height: 100%; /* Das Bild wird in der Höhe an den Container angepasst */
max-height: 100%;
width: 100%; /* Bild füllt den Image-Container aus */
object-fit: cover; /* Optional: Skaliert das Bild so, dass es den Container proportional füllt */
}
.hti-box{
width: min-content;
flex: 0 0.2 40%; /* Bild nimmt maximal 40% der Breite ein */
}
.hti-abstand{
width: 20px;
}
.footer-slider .slider-container .slick-slider .slick-initialized .slick-list .slick-track{
width: 900px !important;
}
.header-title svg{
max-width: 100% !important;
margin: auto;
}
.detail-sideitem .sideitem .sidesubtab .sideitem{
color: white ;
}
.grid{
display: grid;
}
.flex{
display: flex;
}
#impressum{
font-size: x-large ;
}
.precyse{
padding: 1px ;
padding-left: 2px !important;
}
.sideitem ul{
margin-left: 0 !important;
padding-left: 10px !important;
}
.symptom-img-wrapper img{
max-width: 100%;
}
.feedbackbfh div{
padding: 20px;
margin: 10px ;
border-radius: 10px;
border-width: 5px;
border-style: dashed;
}
.feedbackbfh div div{
padding: 20px;
margin: 10px ;
border-radius: 10px;
border-width: 0;
}
.bfh-motto{
padding: 10px;
background-color: var(--accent-primary);
width: fit-content;
border-radius: 10px;
margin: auto;
margin-bottom: 10px;
}
.bfh-haken{
position: relative;
font-size: x-large !important;
font-weight: 900 !important;
color: var(--accent-primary) !important;
margin-right: 5px;
top: 5px;
}
#eng-sidebar a{
color: var(--text-primary) !important;
}
.quiz-wrapper{
height: 95% !important;
display: flex;
align-items: center !important;
margin-bottom: 15px !important;
border-radius: 10px;
border-width: 3px;
border-style: dotted;
border-color: var(--text-primary);
padding: 10px;
}
.quiz-front, .quiz-back{
align-self: center;
height: 100% !important;
align-items: center;
text-align: center;
}
.quiz-text col{
align-content: stretch;
align-items: stretch;
}
.quiz-text{
align-content: stretch;
align-items: stretch;
margin: auto !important;
padding: 15px;
display: flex !important; min-height: 40% !important;
}
.quiz-button-box{
justify-content: center;
height: min-content !important;
}
.quiz-button{
position: relative;
bottom: 0;
margin-top: auto !important;
align-self: baseline;
width: fit-content !important;
border-radius: 10px;
padding: 5px;
background-color: var(--very-light-purple);
border-color: var(--lightpurple);
}
.quiz-heading{
padding-top: 10px;
font-size: 2rem;
font-weight: bold;
letter-spacing:0.1em;
-webkit-text-fill-color: var(--very-light-purple);
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--text-primary);
}
.h5-box{
display: grid;
justify-content: center;
}
.h5{
color: var(--offblack) !important;
font-size: 1.3rem !important;
line-height: 1.0;
word-spacing: 1px !important;
display: grid;
grid-template-rows: 27px 0;
grid-gap: 20px;
align-items: center;
letter-spacing: 1px;
/* text-transform: uppercase; */
align-self: center;
}
.gif{
align-self: center;
display: inline;
}
.gif-wrapper{
display: flex;
align-items: center;
justify-content: center;
}
.eng-box{
border-radius: 3px;
border-style: solid;
border-color: var(--text-primary);
border-radius: 10px;
}
.eng-box p {
padding-left: 30px;
padding-right: 30px;
}
.always-row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
.always-row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
width: 100% !important;
}
.steckbrief .col-2, .steckbriefbuttonrow .col-2{
margin: 10px 15px ;
}
.ask-p{
border-left: solid 5px var(--text-primary);
padding-left: 15px;
margin-left: 15px;
}
figure {
align-self: center;
display: table;
text-align: center;
font-style: italic;
font-size: medium;
text-indent: 0;
margin: 0.5em;
}
figcaption{
display: table-caption;
caption-side: bottom;
padding: 0.5em;
background-color: var(--darkerbeige)
}
figure .row div{
padding-top: 20px;
display: grid;
justify-content: center;
}
.figure-wrapper{
display: flex;
align-items: center;
justify-content: center;
}
figure img{
object-fit: cover !important;
}
.lorem{
background-color: red !important;
}
.navbar .scroll-progress {
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 100%;
background: linear-gradient(90deg,var(--lightblue),var(--text-primary));
z-index: 10;
overflow: visible;
}
.navbar .scroll-progress img {
position: absolute;
top: -20px;
height: 25px;
width: 30px;
z-index: 11;
transition: transform .5s ease-in-out;
}
.navbar-brand .col {
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: auto;
margin-bottom: auto;
}
.boxy-1{
border-radius: 10px;
}
.nav-item, .nav-dropdown, .dropdown-toggle{
border-radius: 10px !important;
}
.sponsor-text-left h4{
text-align: right;
}
#hphead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/hp.webp");
}
#conhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/contribution.webp");
}
#deschead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/project-description.webp");
}
#enghead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/engineering.webp");
}
#safehead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/biosafety2.webp");
}
/* #atthead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/engineering.webp");
} */
#dochead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/documentation.webp");
}
#exhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/experiments.webp");}
#ibhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/igem-bielefeld.webp");
}
#jughead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/judging.webp");
}
#mmhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/materials-methods.webp");
}
#nothead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/notebook.webp");
}
#parhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/parts.webp");
}
#reshead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/results.webp");
}
#teamhead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/rooster.webp");
}
#sphead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/sponsors-partners.webp");
}
#suphead{
background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/supplement.webp");
}
#hphead, #conhead, #deschead, #enghead, #safehead, #atthead, #dochead,
#exhead, #ibhead, #jughead, #mmhead, #nothead, #parhead, #reshead, #teamhead
, #sphead, #suphead
{
background-size: 1650px auto;
background-repeat: no-repeat;
}
.header-title{
min-height: 900px;
}
.download-butt span {
display: inline-block;
padding: 10px;
min-height: 50px !important;
}
.download-butt-image{
display: inline-block;
margin-bottom: 20px;
}
/* Philip's area (sorry Lili) */
.casettecontainer {
display: flex;
justify-content: center; /* Align boxes in the center horizontally */
align-items: flex-start; /* Align items at the top (start) vertically */
flex-wrap: wrap; /* Ensure the boxes wrap on smaller screens */
gap: 20px; /* Add space between the boxes */
}
.casettebox {
display: flex;
flex-direction: column; /* Stack image and any content vertically */
justify-content: flex-start; /* Align images at the top */
align-items: center; /* Center images horizontally */
width: auto; /* Set a width for the boxes */
height: auto; /* Allow height to adapt based on content */
padding: 10px;}
.casettebox img {
width: 100%; /* Image takes up full width of its container */
height: auto; /* Maintain aspect ratio of the image */
max-height: 150px; /* Set a maximum height to ensure consistency */
object-fit: cover; /* Ensure the image covers the available space */
}