:root{/*se declaran las variables que usaremos*/
    --fuenteHeadings: 'PT Sans', sans-serif;
    /*Colores ordenados del mas fuerte al mas claro*/
    --color1:#0E4562;
    --color2:#156A78;
    --color3:#1E8C85;
    --color4:#299F7F;
    --color5:#35B075;
    --color6:#45C168;
    --color7:#57D15C;
    --color8:#82DE6B;
    --color9:#AEE882;
    --color10:#D5F19A;
    --color11:#F2F8B5;
    --color12:#F7F7F7;
    

}

 h1,h2{
    text-align: center !important;
}



.logo-home{
    max-width: 500px;
}
li{
    /*list-style-type: ;*/
    margin-bottom: 5px;
}


p{
    text-align: justify;
    text-justify: inter-word;
}



body { 
    padding-top: 56px; 
    margin-top: 50px;
}

@media (min-width:768px){
    ::-webkit-scrollbar{
        width: 10px;
    }
    body::-webkit-scrollbar-track{
        background: var(--color2);
    }
    ::-webkit-scrollbar-thumb{
        background: var(--color5);
        border-radius: 100vw;
    
        
    }
    
}


.bg-home{
    background-color: var(--color5);
}

.nav-link{
    color: var(--color4)  !important;
}


.logo{
    max-width: 100px;
}


.dropdown-menu {
    
    background-color: var(--color12);
    border: 1px solid var(--color3);
    
}
.dropdown-menu a:hover {
    
    background-color: var(--color9);
    color: var(--color3);
    
}

.dropdown-item{
    color: var(--color5);
}


.left-aligned {
     margin-left: auto;
}
.bg-dark { 
    background-color: var(--color3) !important; 
}
.bg-hero { 
    background-color: var(--color4); 
}

/* 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:#5bc0de 
}
.bd-callout-warning { 
    border-left-color:#f0ad4e 
}
.bd-callout-danger { 
    border-left-color:#d9534f 
}

/*utilites*/

.flecha{
    font-weight: bold;
    font-size: 30px;
    text-align: end;
}

/*Cards for team*/

.tarjeta{
    background-color: var(--color4);
    border-radius: 50% 10% / 10% 40%;
}

@media (min-width:768px){
    
    .member-img{
        max-height: 350px !important;
        width: 100%;
    }
}
.member-img{
    max-height: auto !important;
}
.cuerpo-card {
    border-radius: 50% 10% / 10% 40% !important;
    background-color: var(--color12);
    max-height: 700px;
    overflow: auto ;
    border: var(--color4) solid 3px;    

}

.cuerpo-card::-webkit-scrollbar-track{
    margin: 20px ;
    
}



/* footer */
footer a { 
    color: white; font-weight: bold; text-decoration: none; 
}
footer a:hover { 
    color: white; text-decoration: underline; 
}
.back-fix--projectDescription{
    background-image: url("https://static.igem.wiki/teams/4422/wiki/home/fondo3.jpg");
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
}
.our-project{
    background-color: var(--color12);
    border-radius: 15px;
    margin-top: 100px;
    margin-bottom: 100px;
    
}
@media (min-width:768px){
    .our-project{
        opacity: 70%!important;
        
    }
    
    .our-project:hover{
        opacity: 100%!important;
    }
    
}

@media (min-width:768px){
    .back-fix--projectDescription{
        
        background-attachment: fixed;
    }
}

/*second section main page*/

.boton-team{
    border: solid 1px   var(--color6);

    padding: 10px;
    margin-top: 30px;
    text-align: center;
    border-radius: 30px;
}
.boton-team a{
    text-decoration: none;
    color: var(--color1);
    font-weight: bold;
    transition: all 0.2s;
    display: block;
}
.boton-team a:hover{
    color: var(--color12);

}
.boton-team:hover{
    letter-spacing: 2px;
    background-color: var(--color1);
    color: var(--color12);

}

/*FAQS*/

.pregunta{
    border-bottom: 2px solid var(--color4);
    margin-top: 50px;
}
.pregunta:last-of-type{
    border-bottom:none;

}

.member-img:hover{
    opacity: 80%;
}


/*Entrepreneurship*/
.entrepreneurship{
    border-radius: 30px;
    background-color: var(--color12);
}
.entrepreneurship-title{
    border-bottom: 1px solid var(--color2);
}

.entrepreneurship-topic{
    margin: 40px;
    background-color: var(--color1);
    color: var(--color12);
    border-radius:0px 40px 0px 40px;
    padding: 10px;
    transition: 0.3s ease all;

}
.entrepreneurship-topic:nth-child(odd){
    background-color: var(--color4);

}
.entrepreneurship-topic:hover{
    border-radius: 40px 0px 40px 0px;
    background-color: var(--color5);
}

.entrepreneurship-topic:hover:nth-child(odd){
    border-radius: 40px 0px 40px 0px;
    background-color: var(--color2);
}


/*clases qgenerales para colocar informacion en forma de blog*/
.blog-title{
    margin-bottom: 20px;
    color: var(--color1);
    
}
.blog-title-line{
    border-bottom: 2px solid var(--color4);

}
.blog-table{
    max-width: 100%;
    overflow: auto;
}
.table-modal p{
    text-align: start;
}
.table-modal  tr:nth-child(odd){
    background-color: var(--color9);
}


/*Atributtions*/
.info ul{
    list-style-type: square;

}

/*safety*/

.esquema-circulo{
    margin-top: 200px;

}
.esquema-circulo2{
    margin-top: -200px;

}
.bg-b-b{
    background-color: var(--color1);

}
.button-b-b{
    background-color: var(--color3);
}

.picudito-top{
    margin-top: 200px;
}
.picudito-bottom{
    margin-top: -100px;
}

.nopal-alone{
    margin-top: -200px;
}
.picudo{
    border: none;
}
.img-duda{
    margin-top: -100px;
}

/*Human*/
.human h2{
    color: var(--color4) !important;
}
@media (min-width:768px){
    
    .tabla2-attribution{
        margin-top: -80px;
    }
}
h2{
    color: var(--color4);
}