* {
    box-sizing: border-box;
}

:root {

    --cor-nao-dep: #718c35;
    --cor-dep: #f2ac29;

}

body {
    font-family: 'Lora', Georgia, serif;
    /*margin: 0;*/
}

header.abertura {
    width: 100%
}

header img.logo-tt {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 1000px;
    right: 0;
    top: 20px;
}

header img.abertura {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
    filter: blur(5px);
}

header div.sobre-imagem {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 680px;
}

header div.sobre-imagem h1 {
    font-size: 3.2rem;
    margin: 0;
    line-height: 1.2;
    color: #f2ac29;
    text-shadow: 0px 0px 10px rgb(59,55,52);
      
}

header div.sobre-imagem h2 {
    font-weight: normal;
    color: rgb(255,255,255);
    margin: 1em 0;
}

header div.sobre-imagem p {
    font-weight: normal;
    color: rgb(255,255,255);
    font-size: 18px;
}

section.content {
    color: rgb(59,55,52);
    max-width: 680px;
    font-size: 18px;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
}

section.content ol.partes {
    /*font-style: italic;*/
}

section.content ol.little-roman {

    list-style: lower-roman;

}

section.content h2 {
    margin-top: 2em;
    color: maroon;
}

section.content blockquote {
    font-style: italic;
    font-size: 0.9em;
}

section.content div.container-grupo-com-quadro {
    position: relative; /* isso para o aside, que é filho e está com position: absolute, ser posicionado relativo a este div!*/
}

section.content span.termo-destaque-lateral {
    background-color: antiquewhite;
}

section.content aside.conteudo-destaque-lateral {
    position: absolute;
    right: calc(50% - 340px - 200px - 20px);
    width: 200px;
    font-size: 13px;
    background-color: antiquewhite;
    padding: 10px;
    top: 0; /*só funciona se o pai for relative */
}

section.content aside.conteudo-destaque-lateral a{
    text-decoration: none;
    border-bottom: 1px solid rgb(59,55,52);
}

section.content aside.conteudo-destaque-lateral a:hover{
    background-color: rgb(59,55,52);
    color: antiquewhite;
}

section.content img.gif {
    display: block;
    width: 75%;
    margin: auto;
}

section.content div.grafico-vetado {
    display: none;
}

section.content figure.plot-container {
    margin: 0;
}

section.content figure.plot-container img.plot, img.plot {
    display: block;
    width: 75%;
    margin: auto;
}

section.content figure.plot-container h3.plot-title {
    border-left: 5px solid maroon;
    padding-left: 15px;
    font-size: 18px;
    color: #333;
    margin-bottom: 5px;
}

section.content figure.plot-container h4.plot-subtitle {
    padding-left: 20px;
    margin-top: 0;
    font-size: 14px;
    color: #333;
    font-weight: normal;
    margin-bottom: 5px;
}

p.caption {
    font-size: 13px;
    font-style: italic;
}

section.content figure.plot-container ul.plot-legenda {
    display: flex;
    flex-direction: row;
    justify-content: left;
    color: #444;
    margin-top: 0;
    font-size: 14px;
    padding-left: 20px; /* 15 + 5 da borda do h3, ver acima */
    font-family: Source Sans Pro;
}

section.content figure.plot-container ul.plot-legenda > li {
    list-style-type: none;
    padding-right: 10px;

}

section.content figure.plot-container ul.plot-legenda span.plot-legenda-key {
    
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 2px;
    margin-bottom: 2px;
}

section.content video {
    width: 100%;
}

section.destaque {
    margin-top: 60px;
    background-color: #333;
    color: silver;
    font-family: "Source Sans Pro";
    font-size: 14px;
    padding: 10px;
}

section.destaque h3 {
    margin: 1em auto;
    max-width: 680px;
    font-family: "Lora";
}

section.destaque p {
    margin: 1em auto;
    max-width: 680px;
}

section.destaque a {
    color: ghostwhite;
    text-decoration: none;
    padding: 5px 0;
    border-bottom: 2px solid ghostwhite;
}

section.destaque a:hover{
    color: #333;
    background-color: ghostwhite;

}

.box-meio-texto {

    font-size: .9rem;
    padding: .4rem 1rem;
    background-color: antiquewhite;

}

.box-meio-texto h3 {

    display: inline-block;
    padding-bottom: .25em;
    border-bottom: 3px solid currentColor;
    margin-bottom: 0;

}

section.content a {

    color: currentColor;
    font-style: normal;
    text-decoration: none;
    position: relative;

}

section.content a::after {

    content: '';
    height: .5em;
    position: absolute;
    transform: scaleY(25%);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2ac29;
    z-index: -1;
    transition: transform .5s;
    transform-origin: bottom;
    border-bottom: 2px solid #f2ac29;

}

section.content a:hover::after {

    transform: scaleY(100%);

}

section.content nav.links-versoes {

    display: flex;
    justify-content: center;

}

section.content nav.links-versoes a {

    font-size: .9rem;
    text-align: center;
    /*border: 2px solid currentColor;
    padding: 2px 4px;
    border-radius: 10px;*/

}

/*section.content nav.links-versoes a::after {

    display: none;
}*/

section.content nav.links-versoes a + a {

    margin-left: 2rem;

}


@media (max-width: 1080px) {
    section.content aside.conteudo-destaque-lateral {
        position: static;
        right: auto;
        width: 100%;
        font-size: 13px;
        background-color: antiquewhite;
        padding: 10px;
        margin-top: 18px;
    }
}

@media (max-width: 680px){
    header div.sobre-imagem {
        position: absolute;
        bottom: 5%;
        left: 5%;
        transform: unset;
        width: unset;
    }

    header div.sobre-imagem h1 {
        font-size: 2rem;
        margin: 0;
        line-height: 1.2;
        color: #f2ac29;
    }

    header div.sobre-imagem h2 {
        font-size: 1.4rem;
    }

    header div.sobre-imagem p {
        font-weight: normal;
        color: white;
        font-size: 16px;
    }

    section.content {
        font-size: 16px;
        padding-left: 5px;
        padding-right: 5px;
    }

    section.content img.gif,
    section.content figure.plot-container img.plot, img.plot  {
        width: 100%;
    }

    section.content figure.plot-container ul.plot-legenda {
        font-size: 12px;
    }

    section.content figure.plot-container ul.plot-legenda span.plot-legenda-key {
    
        width: 12px;
        height: 12px;
        margin-right: 1px;
    }

    section.content iframe.plot-interativo {
        width: 100%;
    }

    

}

/* vis do mapa */

#seletor-setores {
    font-family: Lora;
    border: 1px solid maroon;
    border-radius: .25rem;
}

.boxes-definicao {
    position: relative;
}

.box-definicao {
    position: absolute;
    opacity: 0;
    /*display: none;*/
}

.box-definicao.ativo {
    /*display: block;*/
    opacity: 1;
}

.box-definicao h2 {
    font-size: 1rem;
    padding-left: .5rem;
}

.box-definicao p {
    padding: .5rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
}

figure.vis-mapa {
    margin: 0;
    margin-top: 1rem;
}

/* tabela */

table {
    font-family: 'Source Sans Pro';
    font-size: 0.75rem;
    border-collapse: collapse;
    color: #444;
    margin: 0;
    text-align: left;
    margin-top: 1rem;
}

table tr {
    border-bottom: 1px solid #d0d0d0;
    border-top: 1px solid #d0d0d0;
}

table tr:first-of-type {
    border-bottom: 3px solid #d0d0d0;
    border-top: 3px solid #d0d0d0;
}

table td, table th {
    padding: .25rem;
}

table .value-cell, table .cell-align-right {

    text-align: right;

}

table .value-cell-neg {

    color: firebrick;

}


table .nome-empresa-cell {

    text-transform: uppercase;

}



/* ************************** */
/* Vis dos Cards das Empresas */
/* ************************** */

section.content figure.plot-container.vis-cards {

    --size: 10px;
    --cor-independente: #718c35;
    --cor-dependente: #f2ac29;

    /* remover depois */
    max-width: 680px;
    margin: 0 auto;

}

section.content figure.plot-container.vis-cards .container-setor {

    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;

}

section.content figure.plot-container.vis-cards .container-setor::before {

    content: attr(data-container-setor);
    flex-basis: 100%;
    margin-bottom: .2rem;
    font-family: 'Source Sans Pro';
    font-size: .8rem;

}

/* bolinhas das empresas */

section.content figure.plot-container.vis-cards .empresa {

    width: var(--size);
    height: var(--size); 
    background-color: #718c35;
    margin-right: 4px;
    margin-bottom: 4px;
    border-radius: 50%;
    transition: all .3s;

}

section.content figure.plot-container.vis-cards .empresa:hover {

    transform: scale(1.4);

}

section.content figure.plot-container.vis-cards .empresa.selected {

    transform: scale(1.4);
    border: 1px solid black;

}

section.content figure.plot-container.vis-cards .empresa.dependente {

    background-color: #f2ac29;

}

section.content figure.plot-container.vis-cards .empresa.indicios-dependencia {

    background: linear-gradient(-45deg, var(--cor-dependente) 0, var(--cor-dependente) 50%, var(--cor-independente) 50%, var(--cor-independente) 100%);

}

/* Seletor */

section.content figure.plot-container.vis-cards select {

    margin-bottom: 1rem;
    border: none;
    padding-bottom: .2rem;
    border-bottom: 2px solid currentColor;
    font-family: inherit;
    font-size: inherit;
    opacity: .8;

}

/* layout */

section.content figure.plot-container.vis-cards .container-vis-and-cards {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*align-items: flex-start;*/

}

section.content figure.plot-container.vis-cards .container-vis-and-cards > div {

    flex: 0 0 320px;

}

section.content figure.plot-container.vis-cards .card-container-wrapper {

    position: relative;

}

/* card */

section.content figure.plot-container.vis-cards .card-container {

    --accent-color: var(--cor-independente);

    border: 2px solid var(--accent-color);
    padding: 1rem;
    position: sticky;
    top: 1rem;
    /*background-color: cornsilk;
    box-shadow: 2px 2px 0px 0px gray;*/
    font-family: 'Source Sans Pro';
    transition: all .3s;


}

section.content figure.plot-container.vis-cards .card-container[data-dependencia="Dependente"] { --accent-color: var(--cor-dependente); }

/*.card-container[data-dependencia="Dependente"] { border-color: var(--cor-independente); }*/

section.content figure.plot-container.vis-cards .card-container p {

    margin: 0;
    margin-bottom: .25rem;
    line-height: initial;
    font-size: .8rem;

}

/* campos */

section.content figure.plot-container.vis-cards p[data-cardinfo="Nome_estado"] {

    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: grey;
    margin-bottom: .25rem;

}

section.content figure.plot-container.vis-cards p[data-cardinfo="emp"] {

    font-weight: bold;
    margin-bottom: .4rem;
    font-size: 1rem;

}

section.content figure.plot-container.vis-cards span[data-cardinfo] {

    font-weight: bold;

}

section.content figure.plot-container.vis-cards span[data-cardinfo="dep"] {

    background-color: var(--accent-color);
    padding: 2px 10px 3px;
    border-radius: 15px;
    color: white;
    font-weight: normal;
    font-size: .8rem;

}

section.content figure.plot-container.vis-cards [data-tipo-indicio="NA"] {

    display: none;

}

section.content figure.plot-container.vis-cards [data-tipo-indicio="subvenções"] span.tipo-indicio-reforco,
section.content figure.plot-container.vis-cards [data-tipo-indicio="reforço capital"] span.tipo-indicio-subvencao {

    display: none;

}

section.content figure.plot-container.vis-cards .mini-vis-container {

    position: relative;
    margin-top: .5rem;

}

section.content figure.plot-container.vis-cards .mini-vis-container p {

    /*position: absolute;*/
    margin-top: .5rem;

}

section.content figure.plot-container.vis-cards .mini-vis-rect {

    transition: all .3s;
    height: 20px;
    width: 0;
    background-color: #008080; /*var(--accent-color);*/

}

section.content figure.plot-container.vis-cards .mini-vis-rect.negativo {

    background-color: #DC143C;

}

section.content figure.plot-container.vis-cards [data-cardinfo-value] { color : #008080; }

section.content figure.plot-container.vis-cards [data-cardinfo-value].negativo { color : #DC143C; }

section.content figure.plot-container.vis-cards p.link-carta {

    margin-top: 1rem;

}





figure.vis-mapa {
  text-align: center;
}