:root {
    --dark-green:#008F07;
    --light-green:#00DB0A;
    --pink:#DB005B;
    --dark-pink:#8F003C;
    --light-pink:#FF1979;
    --darker-pink: #6B002D;
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-color1 { background-color: var(--dark-pink) !important; }
.bg-color2 {background-color: var(--darker-pink) !important;}
.bg-banner 
{ 
    background-color: var(--dark-green);
}
.bg-hero { background-color: #7952b3; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#598d56 }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }
.footer-logo{
    height: 70px;
    margin: 13px;
}
#social-container{
    font-size: 30px;
}

#social-container a{
    text-decoration: none;
}

/* menu */
#main-logo 
{
    height: 40px;
    padding: 4px;
    transition: 1s;
    transform: rotate(180deg);
}

#main-logo:hover{
    transform: rotate(360deg);
}

/* properties */
.justify-content-center
{
    justify-content: center;
}
.text-right
{
    text-align: right;
}

/* index */
.index-section{
    color: white;
}

#index-section-1{
    background-color: var(--light-green);
}

#index-section-2{
    background-color: var(--light-pink);
}
#index-section-3{
    background-color: var(--pink);
}

#index-section-4 {
    background-color: var(--dark-pink);
    padding-bottom: 100px;
}

.index-link-card{
    background-color: white;
    border-radius: 40px;
    color: white;
    text-decoration: none;
    filter: brightness(0.5);
    background-size: cover;
    font-size: 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    height: 200px;
    transition: 0.5s;
    text-shadow: 0px 0px 10px black;
}

.index-link-card:hover{
    filter:brightness(1);
    color: white!important;
}

#project-card{
    background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/card-bg/project.jpg);
}

#team-card{
    background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/card-bg/team.jpg);
}

#video-card{
    background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/card-bg/video.jpg);
}

#wetlab-card{
    background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/card-bg/wetlab.jpg);
}

#human-practices-card{
    background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/card-bg/human-practices.jpg);
}

#model-card{
    background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/card-bg/model.jpg);
}

/* banners */
.bg-banner-project
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/project.jpg); 
    background-size: cover;
}
.bg-banner-team
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/team.jpg); 
    background-size: cover;
}
.bg-banner-safety
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/safety.jpg); 
    background-size: cover;
}
.bg-banner-model
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/model.jpg); 
    background-size: cover;
}
.bg-banner-human-practices
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/human-practices.jpg); 
    background-size: cover;
}
.bg-banner-communication
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/communication.jpg); 
    background-size: cover;
}
.bg-banner-partnership
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/partnership.jpg); 
    background-size: cover;
}
.bg-banner-attributions
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/attributions.jpg); 
    background-size: cover;
}
.bg-banner-sponsors
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/sponsors-banner.jpg); 
    background-size: cover;
}
.bg-banner-tribute
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/tribute.jpg); 
    background-size: cover;
}
.bg-banner-description
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/description.jpg); 
    background-size: cover;
}
.bg-banner-plant
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/plant.jpg); 
    background-size: cover;
}
.bg-banner-concept
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/concept.jpg); 
    background-size: cover;
}
.bg-banner-engineering
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/engineering.jpg); 
    background-size: cover;
}
.bg-banner-contribution
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/contribution.jpg); 
    background-size: cover;
}
.bg-banner-implementation
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/implementation.jpg); 
    background-size: cover;
}
.bg-banner-sustainable
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/sustainable.jpg); 
    background-size: cover;
}
.bg-banner-protocols
{ 
    background-image: linear-gradient(transparent, #FFFFFF), url(https://static.igem.wiki/teams/5011/wiki/web-img/banner/protocols.jpg); 
    background-size: cover;
}

/* side menu */

#page-side-menu{
    position: sticky;
    top: 100px;
    height: fit-content;
    max-height: 100vh;
    overflow-y: auto;
}

.side-menu-title{
    border: 2px solid var(--dark-green);
    width: 100%;
    margin-bottom: 30px;
    border-radius: 100px;
    cursor: pointer;
    text-align: center;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 20px;
    padding-right: 20px;
    color: var(--dark-green);
    transition-duration: 0.5s;
}

.side-menu-title:hover, .side-menu-title-active{
    background-color: var(--dark-green);
    color: white;
}

/* team new */

.team-member-card{
    aspect-ratio: 0.9;
    margin-bottom: 1.5rem;
    background: green;
    border-radius: 10px;
    background-size: cover;
    cursor: pointer;
    transition: 0.5s;
}

.team-back-fade{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #0000008a;
    z-index: 5000000;
    display: none;
    top: 0;
    cursor: pointer;
}

.team-member-card:hover{
    filter: brightness(1.2);
    transform: scale(1.05);
}

.team-member-card-container{
    height: fit-content;
}

.team-member-info-window{
    background: white;
    border-radius: 10px;
    height: fit-content;
}

#team-member-info-name{
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
}

#team-member-info-text{
    text-align: center;
}

#member1{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/1.jpg);}
#member2{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/2.jpg);}
#member3{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/3.jpg);}
#member4{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/4.jpg);}
#member5{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/5.jpg);}
#member6{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/6.jpg);}
#member7{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/7.jpg);}
#member8{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/8.jpg);}
#member9{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/9.jpg);}
#member10{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/10.jpg);}
#member11{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/11.jpg);}
#member12{background-image: url(https://static.igem.wiki/teams/5011/wiki/web-img/team/members/12.jpg);}


/* image gallery */
.close {
    font-size: 1.5rem;
    border: none;
}

.col-12 img {
    opacity: 0.7;
    cursor: pointer;
    width: 100%;
    margin-bottom: 1rem;
}

.col-12 img:hover {
    opacity: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* general */
.pdf-viewer{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 141%;
}

.margin-v-40{
    margin-top: 40px;
    margin-bottom: 40px;
}
figcaption{
    font-style: italic;
    font-weight: 300;
    color: gray;
}
.col-img{
    width: 100%;
}
.col-img-half{
    max-width: 50%;
    display: block;
    margin-right: auto!important;
    margin-left: auto!important;
}
.col-align-items-center{
    display: flex;
    align-items: center;
}
.col-middle-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.half {
    max-width: 50%;
    margin: auto;
}

@keyframes pulse-ring {
  0% {
    transform: scale(.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}

.animate-character
{
  background-image: linear-gradient(-225deg, rgba(164,94,63,1) 0%, rgba(108,187,35,1) 10%, rgba(192,76,17,1) 30%, rgba(72,52,148,1) 50%, rgba(89,141,86,1) 70%, rgba(219,0,91,1) 90%, rgba(164,94,63,1) 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 10s linear infinite;
  display: inline-block;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}