/********************************/
/*                              */
/*     LBGB website css file    */
/*                              */
/********************************/

/* NOTE that LBGB_ggb.css is dedicated to nda websites hosting Gbrowse2, webBlat... */

:root {
    --transition-duration: 300ms;
    --blur-radius: 10px;
}

.navbar-brand img {
    height: 27px;
}

#cover {
    height: 200px;
    background-image:    url("../images/facade.jpg");
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: center;
}

#assemblies_cover {
    height: 130px;
    background-color: black;
    background-image:    url("../images/assemblies_myCover.png");
    background-repeat:   no-repeat;
    background-size:     100%;
    background-position: right;
}


#lang-toggle {
    --size: 35px;
    cursor: pointer;
    height: var(--size);
    width:  var(--size);
    right:  10px;
    bottom: 10px;
}

body #loader {                        /* #loader must add a parent selector otherwise does not apply on innerHTML update... */
    min-height: calc(100vh - 100px);  /* so that footer is at the bottom even for small pages */
}

body #tools {                        /* #tools must add a parent selector otherwise does not apply on innerHTML update... */
    min-height: calc(70vh - 100px);   /* so that footer is at the bottom even for small pages */
}


div #top-button {
    padding: 25px 75px 0px 0px;
}

h1 {
    padding:75px 0px 25px 0px;
}

h2 {
    padding:50px 0px 15px 0px;
}

h3 {
    padding:25px 0px 10px 0px;
}

h4 {
    padding:15px 0px 5px 0px;
}


p {
    padding:10px 0px 5px 0px;
    text-align: justify;
}

p.grayText {
    color: #808080;
    text-align: justify;
}

/* utile a le footer de chaque page.html */
.grayItalicLink {
    color: #212529;
}
.grayItalicLinkOver {
    color: #212529;
    text-decoration: underline;
}

/* utile a la page index.html pour le trombinoscope */

.container img {
    width: 100%;
}

.team-member img {
    height: 130px;
}

.team-member .overlay {
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(var(--blur-radius));
    transition: opacity var(--transition-duration);
}

.team-member .overlay img {
    height: 20px;
}

.team-member .img-container:hover .overlay {
    opacity: 1;
    pointer-events: initial;
}

.team-member .team-member-info {
    width: 250px;
}



/* utile pour les pages dediees aux outils de l'equipe */

.left_float{
    float:left;
}
.right_float{
    float:right;
}