/* * * * * * * */
/* * COLOURS * */
/* * * * * * * */
:root {
  /* our colours*/
  --text-primary: #850F78; 
  --mediumpurple: #bc15aa; 
  /*--purple: #B85BD1; */
  --accen-secondary: #F57D22; 
  --accent-primary: #F4CC1E; 
  --lightyellow: #fae99e; 
  --lightblue: #A0A7F3 ; 
  --verylightblue: #ebecfd; 
  --offblack: #32232C ; 
  --cebitecgray: #8295A4; 
  /*--offwhite: #e9dff1; */
  --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); 
    --note-title-color: var(--text-primary);
    --note-code-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-title-color: var(--text-primary);
    --warning-code-bg-color: var(--lightorange); 

}



/* * * * * * * */
/* * * BODY* * */
/* * * * * * * */
body {
  /* padding-top: 56px; */
  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;
}



/* * * * * * * */
/* *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);
}
  

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

/* .sponsor-portrait{
  border: 5px solid var(--accent-primary);
} */
.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-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;
}

.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%);
}
.sponsor-portrait{
  border: 5px solid var(--accent-primary);
  background-color: white;
}

.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/photos/lab/in-inhaler-flipped.jpg);
  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: white;
}
#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)
}




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

@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{
  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
  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;
}



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

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

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