html {
  scroll-behavior:smooth;
  /* Adjust font size */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* Font varient */
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  /* Smoothing */
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  /* font-smoothing: antialiased; */
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0, 0, 0, .01) 0 0 1px;

}


/* Typography
------------------------------------------------ */

.f45, .f45-ns {
  font-size: 1.15rem;
}

.serif {
  font-family: 'Roboto Slab', Georgia, serif  !important;
  font-weight: 400;
  color: #2F2F2F;
}

.sans-serif {
  /* font-family: "Inter", Helvetica, Arial, sans-serif; */
  font-family: 'Roboto Slab',serif !important;
  font-weight: 400;
}

h1, h2, h3, h4 {
  /* font-family: "Inter", Helvetica, Arial, sans-serif; */
    /* font-weight: 600; */
  font-family: 'Roboto Slab',serif !important;
  font-weight: 700;
  line-height: 1.16;
  color: #111;
  font-size: 14px;
  font-style: normal;
}

.sans-serif.b {
  font-weight: 600;
}

b {
  color: #222;
  font-weight: 600
}

a {
  color: #333;
}

a:hover {
  text-decoration: none;
}

a:hover {
  text-decoration: none !important;
}

h3.sub-titulo {
  scroll-margin-top: 75px; /* para fazer scroll uns pixels mais acima */
}

#nota_metodologica h3 {
  scroll-margin-top: 110px;
}

ul.index {
  list-style-position: inside;
}


/* Progress indicator
------------------------------------------------ */

progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 25;
  opacity: 1;

  /* Dimensions */
  width: 100%;
  height: 3px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  /*  color: #0074FF;*/
  color: #555; /* #6997aa; #1163D9: */
}

progress::-webkit-progress-bar {
  background-color: transparent;
 
}

progress::-webkit-progress-value {
/*  background-color: #0074FF;*/
   background-color: #555; /* #6997aa; */
}

progress::-moz-progress-bar {
/*  background-color: #0074FF;*/
background-color: #555; /* #6997aa; */
}

/* for when it goes below header */
progress.transparent_white {
  background-color: rgba(255,255,255, 0.97)
} 


/* Barra
------------------------------------------------ */
.barra_rr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 3px;
  z-index: 100;
  height: auto;
  /* max-height: 100px; /* workaround to height being auto and allowing transitions */
  background-color: rgba(255,255,255, 0.97);
  /* background-color: red; */
  border-bottom: 1px solid #eee;
  opacity: 1;
  /* transition: max-height 0.4s ease, opacity 0.2s linear; */
  transition: opacity 0.25s linear;
  box-shadow: 0 4px 8px -2px rgba(204,204,204, 0.2);
  visibility: visible;
}

.stuck {
  position:fixed;
  top:0;
  width: 100%;
  z-index: 100;
}

.barra_rr.hide {
  /* max-height: 0; */
  opacity: 0;
  visibility: hidden;
  /* transition: max-height 0s ease, opacity 0s linear; */
  transition: opacity 0s linear;
}

.barra_rr h2.titulo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.h15 {
  max-height: 1.5rem;
}

.barra_rr a {
  text-decoration: none;
}

.barra_rr a:hover {
  opacity: 0.7;
}



/* Headers
------------------------------------------------ */

/* Full height test */
.full_height {
  min-height: 100%; /* Chrome windows support */
  max-height: 100%; /* Chrome windows support */
  height: 100vh; /* Mobile chrome support*/
  min-height: 100vh;
  max-height: 100vh;
  min-height: -webkit-fill-available;
}


/* Half header */
.header_half {
  
}

.header_full .image_container img,
.header_half .image_container img {
  object-fit: cover;
  max-height: 100%;
  min-width: 100%;
  height: 100%;
}



/* Video header
------------------------------------------------ */

.header_video {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 0.5s, opacity 1s linear; 
}

.header_video .video_container {
  z-index: 10;
}

.header_full .logo_rr,
.header_half .logo_rr,
.header_video .logo_rr {
  z-index: 40;
  position: absolute;
  top: 10;
  left: 0;
}

.header_video .black_overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: 30;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  pointer-events: none;
  opacity: 0;
}

.header_video .black_overlay.show {
  opacity: 0.75;
  transition: opacity 0.25s linear; 
}


.header_full .info_desktop,
.header_video .info_desktop {
  position: absolute;
  left: 20px;
  bottom: 20px;
  text-shadow: 0 0 5px rgba(0,0,0,0.2);
  z-index: 35;
}

.header_video .info_desktop.play_has_started {
  bottom: 80px;
  transition: bottom 1s linear;
}

.header_video .info_desktop h1 {
  z-index: 40;
}

.header_video .info_desktop p {
  z-index: 40;
}

.header_video .w-125 {
  width:  12.5%;
}

.header_video .hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;  
}


/* header_video se o circulo for só para ser nos headers com vídeo */
.jw-icon.jw-icon-display.jw-button-color.jw-reset {
  color: #FFF !important;
  border-radius: 100%; 
  border: 2px solid rgba(255,255,255,0.8);
  padding: 5px;
  z-index: 80 !important; /* para tentar que fique acima do título, mas sem sucesso */
  
}

.other_article_box a {
  text-decoration: none;
}

.other_article_box a:hover {
  text-decoration: none;
}

.other_article_box h4 {
  font-weight: 700 !important;
  color: #222;
}

.other_article_box a:hover h4 {
  text-decoration: underline;
}

.other_article_box a:hover img {
  opacity: 0.75;
}


.other_article_box img.article_img {
  height: 100%;
  width: auto;
  object-fit: cover;
}


/* .autores a {
  font-weight: 700;
} */

.share a {
  text-decoration: none
}

.share a:hover {
  text-decoration: none;
  opacity: 0.5;
}

/* Hide Flourish credits */
.flourish-credit {
  display: none !important;
}


.mw65 {
  max-width: 40rem;
}



/* Zoomed image open */
.medium-zoom-image--opened {
  border: 0;
}


/* Homepage
------------------------------------------------ */
.space-icon {
  margin: 0 7px 0 7px;
}

a.autor {
  text-decoration: none;
}

a.autor:hover {
  text-decoration: underline !important;
}

.homepage_background {
  background-color: #010101;
}

header .top_logo_social {
  position: absolute;
  top: 0;
  left: 0;
}

header > a {
  text-decoration: none;
}

header a:hover {
  opacity: 0.8;
}

.hp_artigos img {
  border: 1px solid #444;
}

.hp_artigos h2 {
  font-weight: 700;  
}

.hp_artigos a {
  text-decoration: none;
}

.hp_artigos .artigo a div img {
  opacity: 1;
  transition: opacity 0.25s;
}


.hp_artigos .artigo a:hover div img {
  opacity: 0.8;
  transition: opacity 0.25s;
}

.hp_artigos .artigo a div {
  background-color: #FFF;
  transition: background-color 0.25s;
}

.hp_artigos .artigo a:hover div {
  background-color: #F4F4F4;
  transition: background-color 0.25s;
}


/* videos box in article 6 */
.videos_box {
  flex-direction: row;
}

#container {
  margin: 0;
}

.infoHeader {
  text-align: center;
}

#pageTitle {
  font-size: 2rem;
  color: #FFF;
}

#topTitle {
  font-family: 'Roboto Slab',serif !important;
  font-weight: 700;
  font-size: 5rem;
  color: #FFF;
  text-align: center;
}


/* Aside
------------------------------------------------ */
.aside a {
  text-decoration: none;
}

.aside a:hover h6 {
  text-decoration: underline;
}

.aside a:hover img {
  opacity: 0.7;
}




/* Footer
------------------------------------------------ */
footer .artigo a {
  text-decoration: none;
}


footer .artigo a:hover img {
  opacity: 0.8;
}

footer .artigo a:hover p {
  text-decoration: underline;
}

footer .logo_rodape:hover {
  opacity: 0.75;
}

footer .ficha_tecnica a {
  text-decoration: none;
}

footer .ficha_tecnica a:hover {
  text-decoration: underline !important;
}

.bg-almost-white {
  background-color: #FBFBFA;
}


/* forms de acesso */
.tipo {
  background-color: #F4F4F4;
  padding: 1rem;
  border: 1px solid #ccc;
  margin-bottom: 2rem;
}

.tipo p,
.tipo li {
  line-height: 1.5;
}

.button_gerar {
  cursor: pointer;
}

.button_gerar:hover {
  background-color: #DDD;
}


/* Logos de acesso */

#logos_acesso a:hover  {
  opacity: 0.7;
}

/* Footer */
.footerInfo {
  text-align: center;
  /* font-family: "Inter", Helvetica, Arial, sans-serif; */
  font-family: 'Roboto Slab',serif;
  font-weight: 400;
  font-size: .875rem;
}

/* Parceiro */

.partner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.67em !important;
    font-size: 8pt;
}

/* Custom Responsive
------------------------------------------------ */


/* Small */
@media (min-width: 320px) { 
    #pageTitle {
        font-size: 1.5rem;
    }
  
    #topTitle {
        font-size: 3rem;
    }

    /* bug on mobile, not sure how to fix or use this */
    .full_height {
        min-height: initial; /* Chrome windows support */
        max-height: none; /* Chrome windows support */
        height: auto; /* Mobile chrome support*/
        max-height: none;
        min-height: 0;
    }
  
    .f45, .f45-ns {
        font-size: 1rem;
    }
  
    .header_video .w-125 {
        width:  30%;
    }
  
    article img {
        border: 0 !important;
    }
  
    .videos_box {
        flex-direction: column;
    }
  
    .black_overlay,
    .black_overlay.show {
        display: none;
    }

    .footerInfo {
        font-size: .75rem;
    }

    .infoHeader {
        top: -100px;
        position: relative;
    }

    #imageHeaderTitle {
        margin-top: -100px;
        position: relative;
        padding: 0px 40px 40px 40px;
    }
  

}

/* Medium */
@media (min-width: 768px) {
    #pageTitle {
        font-size: 3rem;
    }

    #topTitle {
    font-size: 3rem;
    }
  
    .full_height {
        min-height: initial; /* Chrome windows support */
        max-height: none; /* Chrome windows support */
        height: auto; /* Mobile chrome support*/
        max-height: none;
        min-height: 0;
    }
  
    .header_video .w-125 {
        width:  20%;
    }
  
    article img {
        border: 0 !important;
    }
  
    .black_overlay,
    .black_overlay.show {
        display: none;
    }
  
    .aside {
        margin-right: 15px;
    }

    .infoHeader {
        top: -150px;
        position: relative;
    }

    #imageHeaderTitle {
        margin-top: -150px;
        position: relative;
    }
  


}

/* Large */
@media (min-width: 992px) { 
    .w-60 {
        width: 40%;
    }

    .aside {
        margin-right: 150px;
    }

}

@media (min-width: 1400px) {
    #pageTitle {
        /*        margin: 0 1.4rem 2rem 1.4rem;*/
        /*        margin: 1.5rem 1.4rem 2rem 1.4rem;*/
        margin: -3.5rem 1.4rem 2rem 1.4rem;
        font-size: 4rem;
    }

     .aside {
        margin-right: 200px;
     }

}

/* Extra Large */
  @media (min-width: 2500px) {
    #pageTitle {
        /*        margin: 0 1.4rem 2rem 1.4rem;*/
        margin: 1.5rem 1.4rem 2rem 1.4rem;
/*        margin: -3.5rem 1.4rem 2rem 1.4rem*/
    }
    
     .aside {
       margin-right: 200px;
     }
    
     .f5-ns {
      font-size: 2rem;
    }
    
    .f3 {
      font-size: 2rem !important;
    }
    
    .f6 {
      font-size: 1.8rem !important;
    }
    
}