/* Palette: https://coolors.co/palette/e63946-f1faee-a8dadc-457b9d-1d3557*/
:root
{
    /*PALLETE 1: BLUES*/
    --colorLightA:#f1faee;
    --colorLightB:#a8dadc;
    --colorMedA: #457b9d;
    --colorDarkA: #1d3557;
    --colorContrastA: #e63946;

    /*PALLETE 2: GREEN-BROWN*/
    --colorLightA:#fefae0;
    --colorLightB:#dda15e;
    --colorMedA: #bc6c25;
    --colorDarkA: #283618;
    --colorContrastA: #606c38;

    /*PALLETE 3: COLORS*/
    --colorLightA:#f4f1de;
    --colorLightB:#f2cc8f;
    --colorMedA: #e07a5f;
    --colorDarkA: #3d405b;
    --colorContrastA: #81b29a;

    /*PALETTE 4: SINESBIO */
    
    --colorLightA:#ecefe0;
    --colorLightB:#cedebf;
    --colorMedA: #168AAD;
    --colorDarkA: #1a8a6b;
    --colorContrastA: #184E77;
    




    --topbarbg: var(--colorDarkA);



    --heavyweight:600;
    --font-family:'Titillium Web', sans-serif;
    --font-family-title:'Titillium Web', sans-serif;


    --heavyweight:700;
    --font-family:'Libre Baskerville', serif;
    --font-family-title:'Libre Baskerville', serif;

    --heavyweight:800;
    --font-family:'Sora', sans-serif;

    --font-family-title:'Libre Baskerville', serif;
    --font-family-title: 'Sora', serif;
    --font-family:'Nunito', sans-serif;
    --font-family-title: 'Nunito', serif;
    --font-family:'Sora', sans-serif;
    --weight:500;
    --font-size:110%;
    --weight-title:800;
}

.red-text
{
    color:red;
    font-weight:800;
}
.green-text
{
    color:rgb(126, 190, 100);
    font-weight:800;
}
.blue-text
{
    color:dodgerblue;
    font-weight:800;
}

.possible-fonts
{
font-family: 'Andada Pro', serif;
font-family: 'Libre Baskerville', serif;
font-family: 'Manrope', sans-serif;
font-family: 'Sora', sans-serif;
font-family: 'Spectral', serif;
font-family: 'Titillium Web', sans-serif;
}


body
{
    font-family:var(--font-family);
    font-size:var(--font-size);
    font-weight:var(--weight);
    background-color: var(--colorLightA);
    color:var(--colorLightA);
}


h1
{
    font-family: var(--font-family-title);
    background-color: var(--colorLightA);
    color:var(--colorMedA);
    font-variant: small-caps;
    font-weight:var(--weight-title)
}

h1 {
    overflow: hidden;
    text-align: center;
    background-color: var(--colorlightB);
  }
  
  h1:before,
  h1:after {
    background-color: var(--colorlightB);
    content: "";
    display: inline-block;
    height: 5px;
    position: relative;
    vertical-align: middle;
    width: 20%;
    border-bottom: 1px solid var(--colorDarkA);
    border-top: 1px solid var(--colorDarkA);
  }
  
  h1:before {
    right: 0.5em;
    margin-left: -30%;
  }
  
  h1:after {
    left: 0.5em;
    margin-right: -30%;
  }



section{
    font-family:var(--font-family);
    background-color: var(--colorLightB);
    color:var(--colorDarkA);
    padding-bottom:50px;
    padding-left:10px;
    padding-right:10px;
    text-align: justify;
    text-justify: inter-word;
    box-shadow: 0 3px 5px rgb(0 0 0 / 0.2);
    margin:10px;
    /*border: 0.1px solid black;*/
    border-radius:10px;
}




ul.numbered-list {
  counter-reset: li;
  list-style-type: none;
  /*font-size: 14px;
  line-height: 18px;*/
  padding-left: 10px;
}

ul.numbered-list li {
    position: relative;   
    padding: 5px 10px 15px 40px;
}
ul.numbered-list li:before {
      content: counter(li);
      counter-increment: li;
      height: 28px;
      width: 28px;
      border: 1px solid var(--colorDarkA);
      background:var(--colorDarkA);
      border-radius: 50%;
      color: var(--colorLightA);
      text-align: center;
      position: absolute;      
      left: 0;
      top: 2px;
    }





section.alternate
{
    /*background-color: var(--colorLightB);
    color:var(--colorDarkA);*/
}

section.alternate h1
{
    /*background-color: var(--colorLightB);
    color:var(--colorMedA);*/
}

.top-bar, .top-bar ul 
{
    background-color: var(--topbarbg);
    color:var(--colorLightB);
}

.top-bar .top-bar-right ul li a
{
    color:var(--colorLightB);
}
.logo-ack{
    max-height:150px;
    padding-left: 0px;
}

.objlist
{
  padding-left:20px;
  padding-right:20px;
}
.objlist li
{
padding:10px;

}

.is-active
{
    font-weight: var(--heavyweight);
    color:var(--colorLightA) !important;

}

.hero-section {
    background: url("../img/logoSINESBIO.png") no-repeat;
    background-size: contain;
    background-position:center;
    height: 200px;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  .hero-section .hero-section-text {
    color: #fefefe;
    text-shadow: 1px 1px 2px #0a0a0a;
  }



.social-footer {
    padding: 1rem;
    background-color: var(--topbarbg);
    color:var(--colorLightB);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  
  .social-footer .social-footer-icons li:last-of-type {
    margin-right: 0;
  }
  
  .social-footer .social-footer-icons .fab {
    font-size: 1.3rem;
    color: var(--colorLightB);
  }
  
  .social-footer .social-footer-icons .fab:hover {
    color: var(--colorMedA);
    transition: color 0.3s ease-in;
  }
  



  /* width */
::-webkit-scrollbar {
    width: 10px;
    border-radius: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--colorLightA);
    border-radius: 5px;
    
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--colorDarkA);
    border-radius: 5px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--colorMedA);
  }

  .tippy-box[data-theme~='light'] {
    background-color: var(--colorLightA);
    color: var(--colorDarkA);
    border:3px solid var(--colorDarkA);
    
   }


   .tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--colorDarkA);
    bottom:-11px;
  }
  .tippy-box[data-theme~='light'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--colorDarkA);
    top:-11px;
    
  }
  .tippy-box[data-theme~='light'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--colorDarkA);
  }
  .tippy-box[data-theme~='light'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--colorDarkA);
  }