diff --git a/src/App/App.css b/src/App/App.css
index 3f184b57dd943858346261dc86b3ed2a604b0e48..2d861168dea5169a3a3c4f127c2981429af6b31f 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -1,2210 +1,2483 @@
/* * * * * * * */
-
-
-
-
/* * COLOURS * */
-
-
-
-
/* * * * * * * */
-
-
:root {
/* our colours*/
-
- --text-primary: #850F78;
- --mediumpurple: #bc15aa;
+ --text-primary: #850F78;
+ --mediumpurple: #bc15aa;
/*--purple: #B85BD1; */
-
-
-
- --accen-secondary: #F57D22;
- --accent-primary: #F4CC1E;
- --lightyellow: #fae99e;
- --lightblue: #A0A7F3;
- --verylightblue: #ebecfd;
- --offblack: #32232C;
- --cebitecgray: #8295A4;
+ --accen-secondary: #F57D22;
+ --accent-primary: #F4CC1E;
+ --lightyellow: #fae99e;
+ --lightblue: #A0A7F3 ;
+ --verylightblue: #ebecfd;
+ --offblack: #32232C ;
+ --cebitecgray: #8295A4;
/*--offwhite: #e9dff1; */
-
-
-
- --ourbeige: #FFF6F2;
- --darkerbeige: #e2dad7;
- --background: #FFF6F2;
+ --ourbeige: #FFF6F2;
+ --darkerbeige: #e2dad7;
+ --background: #FFF6F2;
/*igem colours*/
-
-
-
- --igemdarkgreen: #006530;
- --igemmediumgreen: #019968;
- --igemlightgreen: #99cb9a;
- --info-border-color: var(--mediumpurple);
- --vp-ct: var(--text-primary);
- --info-border-color: var(--accent-primary);
- --info-bg-color: var(--lightyellow);
- --info-title-color: var(--text-primary);
- --info-code-bg-color: var(--lightyellow);
- --note-border-color: var(--text-primary);
- --note-bg-color: var(--darkoffwhite);
+ --igemdarkgreen: #006530;
+ --igemmediumgreen: #019968;
+ --igemlightgreen: #99cb9a;
+
+ --info-border-color: var(--mediumpurple);
+ --vp-ct: var(--text-primary);
+ --info-border-color: var(--accent-primary);
+ --info-bg-color: var(--lightyellow);
+ --info-title-color: var(--text-primary);
+ --info-code-bg-color: var(--lightyellow);
+ --note-border-color: var(--text-primary);
+ --note-bg-color: var(--darkoffwhite);
--note-title-color: var(--text-primary);
--note-code-bg-color: var(--darkoffwhite);
- --tip-border-color: var(--text-primary);
- --tip-bg-color: var(--darkoffwhite);
+ --tip-border-color: var(--text-primary);
+ --tip-bg-color: var(--darkoffwhite);
--tip-title-color: var(--text-primary);
--tip-code-bg-color: var(--darkoffwhite);
- --warning-border-color: var(--accen-secondary);
- --warning-bg-color: var(--lightorange);
+ --warning-border-color: var(--accen-secondary);
+ --warning-bg-color: var(--lightorange);
--warning-title-color: var(--text-primary);
- --warning-code-bg-color: var(--lightorange);
- }
-
-
-
-
- /* * * * * * * */
-
-
-
-
- /* * * BODY* * */
-
-
-
-
- /* * * * * * * */
-
-
- body {
+ --warning-code-bg-color: var(--lightorange);
+
+}
+
+
+
+/* * * * * * * */
+/* * * BODY* * */
+/* * * * * * * */
+body {
/* padding-top: 56px; */
-
-
-
- background-color: var(--ourbeige);
- color: #493843;
- }
-
+ background-color: var(--ourbeige);
+ color: #493843;
+}
+body.dark-mode {
+ background-color: var(--offblack);
+ color: white;
+}
+p {
+ text-align: justify;
+}
+a {
+ color: var(--lightblue) !important;
+ text-decoration: none !important;
+}
-
- p {
- text-align: justify;
- }
-
- a {
- color: var(--lightblue) !important;
- text-decoration: none !important;
- }
-
-
-
-
-
- /* * * * * * * */
-
-
-
-
- /* *SIDEBAR* * */
-
-
-
-
- /* * * * * * * */
-
-
-
- .sidebar {
- border-left: 6px solid;
- border-left-color: var(--text-primary);
- border-color: var(--accent-primary);
- 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 black;
- transition: all 0.1s linear;
- }
-
- .sidebar>div {
- overflow: hidden;
- text-align: center;
- cursor: pointer;
- }
-
- .sidebar>div>a>span {
- padding: 1rem;
- color: var(--text-primary);
- }
-
+
+/* * * * * * * */
+/* *SIDEBAR* * */
+/* * * * * * * */
+
+.sidebar{
+ border-left: 6px solid;
+ border-left-color: var(--text-primary);
+ border-color: var(--accent-primary);
+ 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 black;
+ transition: all 0.1s linear;
+}
+.sidebar>div{
+overflow: hidden;
+text-align: center;
+cursor: pointer;
+}
+.sidebar>div>a>span{
+padding: 1rem;
+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: 2rem;}
+.left{float: left;}
+.right{float: right;}
+.sticky-top {
+ position: -webkit-sticky;
+ position: sticky !important;
+ top: 0;
+ z-index: 1020;
+ top: 80px !important;
+ overflow-wrap: break-word;
+}
+.fullsize{
+ max-height: 100% !important;
+ max-width: 100% !important;
+}
+.header-container{
+ padding-top: 380px;
+ padding-bottom: 60px;
+ 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;
+}
+.shadow{
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+}
+/* * * * * * * */
+/* * NAVBAR * */
+/* * * * * * * */
+.nav-link{
+ color: var(--text-primary) !important;
+}
+.nav-link:hover {
+ color: white !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: white !important;
+ background-color: var(--text-primary) !important;
+}
+.nav-item.dropdown:hover .dropdown-menu {
+ display: block;
+ background-color: white;
+ border-color: var(--text-primary);
+ border-radius: 7px;
+}
+.navbar-brand{
+ color: var(--text-primary) !important;
+}
+.dropdown-menu{
+ margin-top: 0 !important;
+}
+/* TABLES */
+table {
+ font-family: arial, sans-serif;
+ border-collapse: collapse;
+ width: 100%;
+}
+
+td, th {
+ border: 1px solid black;
+ text-align: left;
+ padding: 8px;
+}
+
+tr:nth-child(even) {
+ background-color: #ededed;
+}
+tr:nth-child(odd) {
+ background-color: #f3f3f3;
+}
+tr:nth-child(1) {
+ background-color: var(--lightblue) !important;
+}
+
+/* * * * * * * */
+/* BACKGROUND */
+/* * * * * * * */
+.bg-video-container{
+margin-bottom: 10vw !important;
+}
+.bg-d{
+ background-color: var(--text-primary) !important;
+}
+.bg-l{
+ background-color: var(--text-primary) !important;
+ color: white;
+}
+.bg-transp{
+ background:transparent;
+ color: var(--text-primary);
+}
+
+/* * * * * * * */
+/* *HEADINGS * */
+/* * * * * * * */
+
+.base {
+ width: 100%;
+ background-color: var(--accent-primary);
+ padding: 120px 30px;
+}
+
+.header-title{
+ color: var(--text-primary);
+ text-align: left;
+ align-self: flex-start;
+ 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: 5vw;
+ 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(--mediumpurple),
+ 0.8vw 0.8vw var(--offblack);
+}
+h2{
+ font-size: 3rem !important;
+ -webkit-background-clip: text !important;
+ -webkit-text-stroke-width: 2px !important;
+ -webkit-text-stroke-color: var(--text-primary) !important;
+ background-clip: text !important;
+ color: transparent !important;
+ padding-top: 15px !important;
+ background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
+}
+
+.underline--magical {
+ background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
+ background-repeat: no-repeat;
+ color: black;
+ background-size: 100% 0.2em;
+ background-position: 0 105%;
+ transition: background-size 0.25s ease-in;
+}
+.underline--magical:hover {
+ background-size: 100% 100%;
+ color: black !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: #000;
+ 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: #d9534f;
+}
+
+/* * * * * * * */
+/* * FOOTER * */
+/* * * * * * * */
+footer{
+ background-color: var(--background);
+}
+footer a {
+ color: white;
+ font-weight: bold;
+ text-decoration: none;
+}
+footer a:hover {
+ color: white;
+ 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{
+ filter: brightness(0.5);
+}
-
-
- /* * * * * * * */
-
-
-
-
- /* * GENERAL * */
-
-
-
-
- /* * * * * * * */
-
-
- .relative {
- position: relative;
- }
-
- .absolute {
- position: absolute;
- }
-
- .left-aligned {
- margin-left: auto;
- }
-
- .align-items-center {
- align-items: center!important
- }
-
- .zweirem {
- padding: 2rem;
+
+/* * * * * * * * */
+/*VILLAGE BUTTONS*/
+/* * * * * * * * */
+.bottom-buttons{
+ margin-top: 50px !important;
+ margin-bottom: 20px;
+ padding-left: 30px;
+}
+.village-style-button{
+ box-shadow: 5px 5px 15px gray !important;
+ border-radius: 2rem !important;
+ padding: 0 !important;
+ max-width: 12% !important;
+ aspect-ratio: 2 / 3 !important;
+ margin-left: 1vw;
+}
+.village-style-button:hover{
+ box-shadow: 5px 5px 15px black !important;
+}
+.village-style-button h3{
+ text-align: center !important;
+ font-size: 10px;
+ font-weight: bold;
+ color: #000;
+}
+.village-style-button img{
+ max-width: 70% !important;
+ max-height: 70% !important;
+ padding-top: 20px !important;
+}
+
+/* * * * * * * * * */
+/* * * IMAGES * * */
+/* * * * * * * * * */
+img,
+picture,
+svg {
+ max-width: 100%;
+ display: block;
+}
+img .middle{
+ vertical-align:middle;
+}
+.socials{
+ height: 1.5rem;
+ width: auto;
+ margin: 0.5rem;
+}
+.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-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;
+}
+
+.img-round{
+ border-radius: 50%;
+ max-width: 80%;
+}
+.updown{
+ max-width: 3vw;
+}
+
+.hexagon{
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+/* * * * * * * */
+/* * * 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)
+}
+
+
+
+
+/* * * * * * * */
+/* MEDIA RULES */
+/* * * * * * * */
+/*For tablet or bigger*/
+@media screen and (min-width: 992px) {
+ /* navbar opens on hover*/
+ .dropdown:hover .dropdown-menu {
+ display: block;
+ }
+}
+/*For Tablet and smaller*/
+@media screen and (max-width: 992px){
+
+}
+/*For Smartphones*/
+@media screen and (max-width: 768px){
+ svg text{
+ font-size: 9vw;
+ stroke-width:1px;
+ }
+ .village-style-button h3{
+ display: none !important;
}
-
- .left {
- float: left;
+ .village-style-button{
+ box-shadow: 1px 1px 1px gray;
+ border-radius: 10px;
+ border-color: black;
}
-
- .right {
- float: right;
+ .village-style-button:hover{
+ box-shadow: none;
}
-
- .sticky-top {
- position: -webkit-sticky;
- position: sticky !important;
- top: 0;
- z-index: 1020;
- top: 80px !important;
- overflow-wrap: break-word;
+ .village-style-button img{
+ max-width: 90%;
+ max-height: 90%;
+ padding-top: 10px;
+ padding-bottom: 5px;
}
-
- /* .fullsize {
- max-height: 100% !important;
+ .img-half{
max-width: 100% !important;
- } */
-
- .header-container {
- padding-top: 380px;
- padding-bottom: 60px;
- background-color: var(--ourbeige);
}
+}
+/*Bigger than smartphones*/
+@media only screen and (min-width: 768px) {
+ .col-1 {width: 8.33%;}
+ .col-2 {width: 16.66%;}
+ .col-3 {width: 25%;}
+ .col-4 {width: 33.33%;}
+ .col-5 {width: 41.66%;}
+ .col-6 {width: 50%;}
+ .col-7 {width: 58.33%;}
+ .col-8 {width: 66.66%;}
+ .col-9 {width: 75%;}
+ .col-10 {width: 83.33%;}
+ .col-11 {width: 91.66%;}
+ .col-12 {width: 100%;}
+
- .null {
- padding: 0% !important;
- margin: 0% !important;
+}
+
+
+/* * * * * * * */
+/* * EFFECTS * */
+/* * * * * * * */
+@keyframes effect{
+ 0%{
+ stroke-dasharray:0 70%;
}
-
-
- .center {
- display: flex !important;
- align-items: center !important;
- text-align: center;
+ 100%{
+ stroke-dasharray:10% 0%;
+ stroke-dashoffset:20%;
}
-
- .shadow {
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+}
+@keyframes dash {
+ 0% {
+ stroke-dashoffset: 1300;
}
-
-
- /* * * * * * * */
-
-
-
-
- /* * NAVBAR * */
-
-
-
-
- /* * * * * * * */
-
-
-
- .navbar {
- backdrop-filter: blur(5px);
- transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
+ 35% {
+ fill-opacity: 0;
}
-
- nav.navbar {
- padding-top: 1rem;
- padding-bottom: 1rem;
+ 50% {
+ stroke-dashoffset: 0;
}
-
-
-
- .nav-item.dropdown:hover {
- display: block;
- background-color: white;
- border-color: var(--text-primary);
- border-radius: 7px;
+ 100% {
+ stroke-dashoffset: 0;
+ fill-opacity: 1;
}
-
+}
-
- /* TABLES */
-
-
- table {
- font-family: arial, sans-serif;
- border-collapse: collapse;
- width: 100%;
- }
-
- td, th {
- border: 1px solid black;
- text-align: left;
- padding: 8px;
+/* Headings */
+.revealUp {
+ opacity: 0;
+ visibility: hidden;
+}
+.spacer {
+ height: 50vh;
+ background-color: #000;
+}
+
+.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: black;
+}
+
+.error{
+ background-color: lightgray;
+ border-radius: 10px;
+ color: black;
+ padding-left: 1vw;
+ padding-right: 1vw;
+}
+
+
+/* TIMELINE EINS */
+
+.timeline-container {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ margin: 40px 0;
+}
+
+.timeline-container::after {
+ background-color: var(--text-primary);
+ position: absolute;
+ left: calc(50% - 2px);
+ content: "";
+ width: 4px;
+ height: 100%;
+ z-index: 0;
+}
+.timeline-item {
+ min-width: 100px;
+ /* display: flex; */
+ justify-content: flex-end;
+ padding-right: 30px;
+ position: relative;
+ margin: 10px 0;
+ width: 50%;
+}
+
+.timeline-item:nth-child(odd) {
+ align-self: flex-end;
+ justify-content: flex-start;
+ padding-left: 30px;
+ padding-right: 0;
+}
+.timeline-item-content {
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+ border-radius: 5px;
+ background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ padding: 15px;
+ position: relative;
+ text-align: right;
+}
+.timeline-end{
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+ border-radius: 5px;
+ background-color: #fff;
+ padding: 15px;
+ position: relative;
+ text-align: center;
+ z-index: 1;
+ margin-top: 8vw;
+}
+.timeline-begin{
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+ border-radius: 5px;
+ background-color: #fff;
+ padding: 15px;
+ position: relative;
+ text-align: center;
+ z-index: 1;
+ margin-bottom: 8vw;
+}
+
+.timeline-item-content::after {
+ background-color: #fff;
+ box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+ position: absolute;
+ right: -7.5px;
+ top: calc(50% - 7.5px);
+ transform: rotate(45deg);
+ width: 15px;
+ height: 15px;
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content {
+ text-align: left;
+ align-items: flex-start;
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content::after {
+ right: auto;
+ left: -7.5px;
+ box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+}
+.timeline-item-content .tag {
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ top: 5px;
+ left: 5px;
+ letter-spacing: 1px;
+ padding: 5px;
+ position: absolute;
+ text-transform: uppercase;
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content .tag {
+ left: auto;
+ right: 5px;
+}
+
+.timeline-item-content time {
+ color: var(--lightblue);
+ font-size: 12px;
+ font-weight: bold;
+}
+
+.timeline-item-content p {
+ font-size: 16px;
+ line-height: 24px;
+ margin: 15px 0;
+ max-width: 250px;
+}
+
+.timeline-item-content a {
+ font-size: 14px;
+ font-weight: bold;
+}
+
+.timeline-item-content a::after {
+ font-size: 12px;
+}
+
+.timeline-item-content .circle {
+ background-color: #fff;
+ border: 3px solid var(--text-primary);
+ border-radius: 50%;
+ position: absolute;
+ top: calc(50% - 10px);
+ right: -40px;
+ width: 20px;
+ height: 20px;
+ z-index: 100;
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content .circle {
+ right: auto;
+ left: -40px;
+}
+@media only screen and (max-width: 1023px) {
+ .timeline-item-content {
+ max-width: 100%;
}
-
- tr:nth-child(even) {
- background-color: #ededed;
+}
+
+@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;
}
- tr:nth-child(odd) {
- background-color: #f3f3f3;
+ .timeline-item-content .tag {
+ width: calc(100% - 10px);
+ text-align: center;
}
- tr:nth-child(1) {
- background-color: var(--lightblue) !important;
+ .timeline-item-content time {
+ margin-top: 20px;
}
-
-
- /* * * * * * * */
-
-
-
-
- /* BACKGROUND */
-
-
-
-
- /* * * * * * * */
-
-
- .bg-video-container {
- margin-bottom: 10vw !important;
+ .timeline-item-content a {
+ text-decoration: underline;
}
- .bg-d {
- background-color: var(--text-primary) !important;
+ .timeline-item-content a::after {
+ display: none;
}
-
+}
+/* Horizontal */
+.timeline {
+ white-space: nowrap;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
-
- .bg-transp {
- background: transparent;
- color: var(--text-primary);
- }
-
-
-
- /* * * * * * * */
-
-
-
-
- /* *HEADINGS * */
-
-
-
-
- /* * * * * * * */
-
-
-
- .base {
- width: 100%;
- background-color: var(--accent-primary);
- padding: 120px 30px;
- }
-
- .header-title {
- color: var(--text-primary);
- text-align: left;
- align-self: flex-start;
- 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: 5vw;
- 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(--mediumpurple),
- 0.8vw 0.8vw var(--offblack);
- }
-
- h2 {
- font-size: 3rem !important;
- -webkit-background-clip: text !important;
- -webkit-text-stroke-width: 2px !important;
- -webkit-text-stroke-color: var(--text-primary) !important;
- background-clip: text !important;
- color: transparent !important;
- padding-top: 15px !important;
- background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
- }
-
- .underline--magical {
- background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
- background-repeat: no-repeat;
- color: black;
- background-size: 100% 0.2em;
- background-position: 0 105%;
- transition: background-size 0.25s ease-in;
- }
-
- .underline--magical:hover {
- background-size: 100% 100%;
- color: black !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: #000;
- background-size: 0% 100%;
- }
-
-
-
-
- /* * * * * * * */
-
-
-
-
- /* * CALLOUT * */
-
-
-
-
- /* * * * * * * */
-
-
-
- .bg-b {
- background-color: var(--ourbeige);
- }
-
+.timelineol {
+ font-size: 0;
+ width: 100vw;
+ padding: 250px 0;
+ transition: all 1s;
+}
-
-
-
- /* * * * * * * */
-
-
-
-
- /* * FOOTER * */
-
-
-
-
- /* * * * * * * */
-
-
- footer {
- background-color: var(--background);
- }
-
- footer a {
- color: white;
- font-weight: bold;
- text-decoration: none;
- }
-
- footer a:hover {
- color: white;
- 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{
- filter: brightness(0.5);
- }
-
+.t-tag{
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 1px;
+ padding: 5px;
+ margin-bottom: 10px;
+ text-transform: uppercase;
+ width: fit-content !important;
+}
+.All{
+ background-color: white;
+}
+button.tabbutton.Patient.active, button.tabbutton.All.active,
+button.tabbutton.Industry.active, button.tabbutton.Academia.active,
+button.tabbutton.Medical.active{
+ border-color: black;
+}
- button.tabbutton.Patient.active, button.tabbutton.All.active,
- button.tabbutton.Industry.active, button.tabbutton.Academia.active,
- button.tabbutton.Medical.active {
- border-color: black;
- }
-
- .tabbutton {
- 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;
- }
-
- .village-style-button {
- box-shadow: 5px 5px 15px gray !important;
- border-radius: 2rem !important;
- padding: 0 !important;
- max-width: 12% !important;
- aspect-ratio: 2 / 3 !important;
- margin-left: 1vw;
- }
-
- .village-style-button:hover {
- box-shadow: 5px 5px 15px black !important;
- }
-
- .village-style-button h3 {
- text-align: center !important;
- font-size: 10px;
- font-weight: bold;
- color: #000;
- }
-
- .village-style-button img {
- max-width: 70% !important;
- max-height: 70% !important;
- padding-top: 20px !important;
+.Patient{
+ background-color: var(--accen-secondary);
+}
+
+.Medical{
+ background-color: var(--accent-primary);
+}
+
+.Academia{
+ background-color: var(--lightblue);
+}
+
+.Industry{
+ background-color: var(--mediumpurple);
+}
+
+.timelineolli {
+ position: relative;
+ display: inline-block;
+ list-style-type: none;
+ width: 160px;
+ height: 5px;
+ /* background-image: url("../components/data/stroke.svg");
+ background-size: auto 100%;
+ background-repeat: round;
+ background-position: 0em; */
+ background: var(--text-primary);
+}
+.timeline ol li:last-child {
+ width: 280px;
+}
+
+
+.timeline ol li:not(:first-child) {
+ margin-left: 14px;
+}
+
+.timeline ol li:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: calc(100% + 1px);
+ bottom: 0;
+ width: 12px;
+ height: 12px;
+ transform: translateY(-50%);
+ border-radius: 50%;
+ background: var(--text-primary);
+}
+
+
+.timeline ol li .timeline-item {
+ min-height: 310%;
+ position: absolute;
+ left: calc(100% + 7px);
+ width: 280px;
+ padding: 15px;
+ font-size: 1rem;
+ white-space: normal;
+ color: black;
+ background: white;
+}
+.timeline ol li:nth-child(2n+1) .moretop{
+ top: -30px !important;
+}
+
+.timeline ol li .timeline-item::before {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 0;
+ height: 0;
+ border-style: solid;
+
+}
+
+.timeline ol li:nth-child(odd) .timeline-item {
+ top: -16px;
+ transform: translateY(-100%);
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+}
+
+.timeline ol li:nth-child(even) .timeline-item {
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+ top: calc(100% + 16px);
+}
+.timeline ol li:nth-child(odd) .timeline-item::before {
+ top: 100%;
+ border-width: 8px 8px 0 0;
+ border-color: white transparent transparent transparent;
+}
+.timeline ol li:nth-child(even) .timeline-item::before {
+ top: -8px;
+ border-width: 8px 0 0 8px;
+ border-color: transparent transparent transparent white;
+}
+
+
+
+
+.timeline {
+ background-color: inherit;
+ font-size: 1rem;
}
-
-
-
- /* * * * * * * * * */
-
-
-
-
- /* * * IMAGES * * */
-
-
-
-
- /* * * * * * * * * */
-
-
- img,
- picture,
- svg {
- max-width: 100%;
+
+.card {
+ border-radius: 4px;
+ background-color: #fff;
+ color: #333;
+ padding: 10px;
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+ width: 100%;
+ max-width: 560px;
+
+}
+
+.date {
+ background-color: var(--text-primary) !important;
+ padding: 4px !important;
+ color: #fff !important;
+ border-radius: 4px !important;
+ font-weight: 500;
+ font-size: .85rem;
+}
+.imageAtom{
+ object-fit: cover;
+ overflow: hidden;
+ width: 100%;
+ max-height: 400px;
+}
+.imageCredit { margin-top: 10px; font-size: 0.85rem }
+.imageText { margin-bottom: 10px; font-size: 1rem }
+.events{ padding: 10px }
+.event { margin-bottom: 20px }
+
+.date-col{
+ position: relative;
+ background-color: #fff ;
+ padding: 10px;
+ width: 10%;
+ border-right: #000;
+ border-right-width: 2px;
+}
+
+.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{
+ background-color: var(--text-primary);
+ padding: 0.5vw;
+ border-radius: 5px;
+ margin: auto !important;
+ width: fit-content !important;
+}
+.download-col{
+ height: 5vw !important;
+ display: flex;
+ align-items: center !important;
+}
+.small-i{
+ width: 80%;
+}
+
+
+/* SHAPES */
+.circle {
+ display: flex;
+ width: 10vw;
+ height: 10vw;
+ background-color: var(--lightblue) !important;
+ box-shadow: 3px 3px 10px black !important;
+ border-radius: 50%;
+ margin: 1vw;
+}
+.shape-text {
+ margin: auto;
+ text-align: center;
+}
+
+
+/*collapsible*/
+
+.collapse-card {
+ border-radius: 4px;
+ background-color: #fff;
+ color: #333;
+ padding: 10px;
+ 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)
+}
+
+
+/*POPUP*/
+.popup {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ -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: #fff;
+ 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 black;
+}
+/* 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: #fff;
+ 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: #fff;
+}
+
+
+.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: 16rem !important;
+ max-width: 66% !important;
+ transition: all 1s ease;
+ border: 5px solid var(--text-primary);
+}
+.lnp:hover > img{
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100% !important;
+ max-width: 100% !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: #0000;
+ 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: #0000;
+ 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: #fff;
+ border: 1px solid #f5f5f5;
+ box-shadow: 3px 3px 3px #0000001a;
+ 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 #ffffff80
+ }
+
+ .chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table {
+ background: #fff;
+ 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;
+ }
+ .datawrapper-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;
- }
-
- img .middle {
- vertical-align: middle;
- }
-
- .socials {
- height: 1.5rem;
- width: auto;
- margin: 0.5rem;
- }
-
- .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-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;
- }
-
- .img-round {
- border-radius: 50%;
- max-width: 80%;
- }
-
- .updown {
- max-width: 3vw;
- }
-
-
- /* * * * * * * */
-
-
-
-
- /* * * 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)
- }
-
-
-
-
-
-
- /* * * * * * * */
-
-
-
-
- /* MEDIA RULES */
-
-
-
-
- /* * * * * * * */
-
-
-
-
- /*For tablet or bigger*/
-
-
- @media screen and (min-width: 992px) {
- /* navbar opens on hover*/
-
-
-
- .dropdown:hover{
- display: block;
- }
- }
-
-
- /*For Tablet and smaller*/
-
-
- @media screen and (max-width: 992px) {
- }
-
-
- /*For Smartphones*/
-
-
- @media screen and (max-width: 768px) {
- svg text{
- font-size: 9vw;
- stroke-width: 1px;
- }
-
- .village-style-button h3 {
- display: none !important;
- }
-
- .village-style-button {
- box-shadow: 1px 1px 1px gray;
- border-radius: 10px;
- border-color: black;
- }
-
- .village-style-button:hover {
- box-shadow: none;
- }
-
- .village-style-button img {
- max-width: 90%;
- max-height: 90%;
- padding-top: 10px;
- padding-bottom: 5px;
- }
-
- .img-half {
- max-width: 100% !important;
- }
- }
- /*Bigger than smartphones*/
- @media only screen and (min-width: 768px) {
- .col-1 {width: 8.33%;
- }
-
- .col-2 {
- width: 16.66%;
- }
-
- .col-3 {
- width: 25%;
- }
-
- .col-4 {
- width: 33.33%;
- }
-
- .col-5 {
- width: 41.66%;
- }
-
- .col-6 {
- width: 50%;
- }
-
- .col-7 {
- width: 58.33%;
- }
-
- .col-8 {
- width: 66.66%;
- }
-
- .col-9 {
- width: 75%;
- }
-
- .col-10 {
- width: 83.33%;
- }
-
- .col-11 {
- width: 91.66%;
- }
-
- .col-12 {
- width: 100%;
- }
-
-
- }
-
- /* * * * * * * */
- /* * 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 */
-
-
-
-
-
- .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: black;
- }
-
- .error {
- background-color: lightgray;
- border-radius: 10px;
- color: black;
- padding-left: 1vw;
- padding-right: 1vw;
- }
-
-
-
-
- /* TIMELINE EINS */
-
-
-
- .timeline-container {
- display: flex;
- flex-direction: column;
- position: relative;
- margin: 40px 0;
- }
-
- .timeline-container::after {
- background-color: var(--text-primary);
- position: absolute;
- left: calc(50% - 2px);
- content: "";
- width: 4px;
- height: 100%;
- z-index: 0;
- }
-
- .timeline-item {
- min-width: 100px;
- /* display: flex; */
-
-
-
- justify-content: flex-end;
- padding-right: 30px;
- position: relative;
- margin: 10px 0;
- width: 50%;
- }
-
- .timeline-item:nth-child(odd) {
- align-self: flex-end;
- justify-content: flex-start;
- padding-left: 30px;
- padding-right: 0;
- }
-
- .timeline-item-content {
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- padding: 15px;
- position: relative;
- text-align: right;
- }
-
- .timeline-end {
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- padding: 15px;
- position: relative;
- text-align: center;
- z-index: 1;
- margin-top: 8vw;
- }
-
- .timeline-begin {
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- padding: 15px;
- position: relative;
- text-align: center;
- z-index: 1;
- margin-bottom: 8vw;
- }
-
- .timeline-item-content::after {
- background-color: #fff;
- box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
- position: absolute;
- right: -7.5px;
- top: calc(50% - 7.5px);
- transform: rotate(45deg);
- width: 15px;
- height: 15px;
- }
-
- .timeline-item:nth-child(odd) .timeline-item-content {
- text-align: left;
- align-items: flex-start;
- }
-
- .timeline-item:nth-child(odd) .timeline-item-content::after {
- right: auto;
- left: -7.5px;
- box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
- }
-
- .timeline-item-content .tag {
- color: #fff;
- font-size: 12px;
- font-weight: bold;
- top: 5px;
- left: 5px;
- letter-spacing: 1px;
- padding: 5px;
- position: absolute;
- text-transform: uppercase;
- }
-
- .timeline-item:nth-child(odd) .timeline-item-content .tag {
- left: auto;
- right: 5px;
- }
-
- .timeline-item-content time {
- color: var(--lightblue);
- font-size: 12px;
- font-weight: bold;
- }
-
- .timeline-item-content p {
- font-size: 16px;
- line-height: 24px;
- margin: 15px 0;
- max-width: 250px;
- }
-
- .timeline-item-content a {
- font-size: 14px;
- font-weight: bold;
- }
-
- .timeline-item-content a::after {
- font-size: 12px;
- }
-
- .timeline-item-content .circle {
- background-color: #fff;
- border: 3px solid var(--text-primary);
- border-radius: 50%;
- position: absolute;
- top: calc(50% - 10px);
- right: -40px;
- width: 20px;
- height: 20px;
- z-index: 100;
- }
-
- .timeline-item:nth-child(odd) .timeline-item-content .circle {
- right: auto;
- left: -40px;
- }
-
- @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;
- }
- }
-
-
- /* Horizontal */
-
-
- .timeline {
- white-space: nowrap;
- overflow-x: auto;
- overflow-y: hidden;
- }
-
- .timelineol {
- font-size: 0;
- width: 100vw;
- padding: 250px 0;
- transition: all 1s;
- }
-
- .t-tag {
- color: #fff;
- font-size: 12px;
- font-weight: bold;
- letter-spacing: 1px;
- padding: 5px;
- margin-bottom: 10px;
- text-transform: uppercase;
- width: fit-content !important;
- }
-
- .All {
- background-color: white;
- }
-
-
-
- .Patient {
- background-color: var(--accen-secondary);
- }
-
- .Medical {
- background-color: var(--accent-primary);
- }
-
- .Academia {
- background-color: var(--lightblue);
- }
-
- .Industry {
- background-color: var(--mediumpurple);
- }
-
- .timelineolli {
- position: relative;
- display: inline-block;
- list-style-type: none;
- width: 160px;
- height: 5px;
- /* background-image: url("../components/data/stroke.svg");
- background-size: auto 100%;
- background-repeat: round;
- background-position: 0em; */
-
-
-
- background: var(--text-primary);
- }
-
- .timeline ol li:last-child {
- width: 280px;
- }
-
- .timeline ol li:not(:first-child) {
- margin-left: 14px;
- }
-
- .timeline ol li:not(:last-child)::after {
- content: '';
- position: absolute;
- top: 50%;
- left: calc(100% + 1px);
- bottom: 0;
- width: 12px;
- height: 12px;
- transform: translateY(-50%);
- border-radius: 50%;
- background: var(--text-primary);
- }
-
- .timeline ol li .timeline-item {
- min-height: 310%;
- position: absolute;
- left: calc(100% + 7px);
- width: 280px;
- padding: 15px;
- font-size: 1rem;
- white-space: normal;
- color: black;
- background: white;
- }
-
- .timeline ol li:nth-child(2n+1) .moretop {
- top: -30px !important;
- }
-
- .timeline ol li .timeline-item::before {
- content: '';
- position: absolute;
- top: 100%;
- left: 0;
- width: 0;
- height: 0;
- border-style: solid;
- }
-
- .timeline ol li:nth-child(odd) .timeline-item {
- top: -16px;
- transform: translateY(-100%);
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- }
-
- .timeline ol li:nth-child(even) .timeline-item {
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- top: calc(100% + 16px);
- }
-
- .timeline ol li:nth-child(odd) .timeline-item::before {
- top: 100%;
- border-width: 8px 8px 0 0;
- border-color: white transparent transparent transparent;
- }
-
- .timeline ol li:nth-child(even) .timeline-item::before {
- top: -8px;
- border-width: 8px 0 0 8px;
- border-color: transparent transparent transparent white;
- }
-
- .timeline {
- background-color: inherit;
- font-size: 1rem;
- }
-
- .card {
- border-radius: 4px;
- background-color: #fff;
- color: #333;
- padding: 10px;
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- width: 100%;
- max-width: 560px;
- }
-
- .date {
- background-color: var(--text-primary) !important;
- padding: 4px !important;
- color: #fff !important;
- border-radius: 4px !important;
- font-weight: 500;
- font-size: .85rem;
- }
-
- .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*/
-
-
- .download-butt {
- background-color: var(--text-primary);
- padding: 0.5vw;
- border-radius: 5px;
- margin: auto !important;
- width: fit-content !important;
- }
-
- .download-col {
- height: 5vw !important;
- display: flex;
- align-items: center !important;
- }
-
- .small-i {
- width: 80%;
- }
-
-
-
-
- /* SHAPES */
-
-
- .circle {
- display: flex;
- width: 10vw;
- height: 10vw;
- background-color: var(--lightblue) !important;
- box-shadow: 3px 3px 10px black !important;
- border-radius: 50%;
- margin: 1vw;
- }
-
- .shape-text {
- margin: auto;
- text-align: center;
- }
-
-
-
-
- /*collapsible*/
-
-
-
- .collapse-card {
- border-radius: 4px;
- background-color: #fff;
- color: #333;
- padding: 10px;
- 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)
- }
-
-
-
-
- /*POPUP*/
-
-
- .popup {
- position: relative;
- display: inline-block;
+ overflow: hidden;
+
+
+ margin: 0;
+
+ padding: 0;
+
+}
+
+.slick-list:focus
+
+{
+
+ outline: none;
+
+}
+
+.slick-list.dragging
+
+{
+
cursor: pointer;
- -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: #fff;
- text-align: center;
- border-radius: 6px;
- z-index: 1;
- position: absolute;
+
+ 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;
- 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 black;
- }
-
-
- /* 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: 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;
- 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;
+ float: left;
+
+
height: 100%;
- background: #fff;
- margin: 15px auto 0;
- }
-
-
- .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 */
-
-
- .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 {
+
+ 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;
- margin-left: auto;
- margin-right: auto;
- width: 16rem !important;
- max-width: 66% !important;
- transition: all 1s ease;
- border: 5px solid var(--text-primary);
- }
-
- .lnp:hover > img {
+
+}
+
+.slick-loading .slick-slide
+
+{
+
+ visibility: hidden;
+
+}
+
+.slick-vertical .slick-slide
+
+{
+
display: block;
- margin-left: auto;
- margin-right: auto;
- width: 100% !important;
- max-width: 100% !important;
- }
-
-
-
-
- /* datawrapper */
-
-
- .chart.vis-d3-maps-choropleth {
- overflow: hidden;
- position: relative
- }
- .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 div.label {
+ 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;
- 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-combined {
- gap: 10px
- }
-
-
- .chart.vis-d3-maps-choropleth .map-key.mobile {
- background: #0000;
- 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: #0000;
+
+ top: 50%;
+
+
+ display: block;
+
+
+ width: 20px;
+
+ height: 20px;
+
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: #fff;
- border: 1px solid #f5f5f5;
- box-shadow: 3px 3px 3px #0000001a;
- font-size: 11px;
- max-width: 200px;
- padding: 10px;
+
+ -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: white;
+
+
+ -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;
- 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 #ffffff80
- }
-
- .chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table {
- background: #fff;
- border-radius: 1px;
+
+ bottom: -25px;
+
+
display: block;
- font-weight: 400;
- margin-top: 10px;
- padding: 1px 4px
- }
-
- .chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td {
+
+
+ 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;
- 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 .inset-map-container {
+
+}
+
+.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;
- 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
- }
-
- .d3-maps-zoomed-in .annotations {
- overflow: hidden
- }
-
- .chart.dir-rtl .dw-chart-body.svelte-9ysojt {
- direction: rtl
- }
-
- .chart.js.svelte-9ysojt .noscript {
- display: none
- }
-
- .chart .hidden {
- 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 {
+
+}
+
+.slick-dots li button:before
+
+{
+
+ font-family: 'slick';
+
+ font-size: 6px;
+
+ line-height: 20px;
+
+
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;
- }
-
- .datawrapper-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-loading {
- visibility: hidden;
- }
-
- .slick-initialized {
- display: block;
- }
-
- .slick-loading {
- visibility: hidden;
- }
-
- .slick-vertical {
- display: block;
- height: auto;
- border: 1px solid transparent;
- }
-
-
-
-
-
-
- /* Dots */
-
-
-
-
-
- .sponsor-container {
- align-items: center !important;
- display: flex !important;
- }
-
- #All {
- display: block;
- }
-
- .tabtabs, .tabbys {
- display: none;
- }
-
-
\ No newline at end of file
+
+
+ width: 20px;
+
+ height: 20px;
+
+
+ content: '•';
+
+ text-align: center;
+
+
+ opacity: .25;
+
+ color: black;
+
+
+ -webkit-font-smoothing: antialiased;
+
+ -moz-osx-font-smoothing: grayscale;
+
+}
+
+.slick-dots li.slick-active button:before
+
+{
+
+ opacity: .75;
+
+ color: black;
+
+}
+
+
+.sponsor-container{
+ align-items: center !important;
+ display: flex !important;
+}
+
+#All {
+ display: block;
+}
+
+.tabtabs, .tabbys{
+ display: none;
+}
+
+.tabbutton{
+ padding: 5px;
+ border-radius: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-left: 5px;
+ margin-right: 5px;
+}