/*
Theme Name: Reportagens simples – Estadão
Author: Fabio Sales
Version: 1.0.0.


Shorthand para margens e paddings: top right bottom left


/*
5px = 1rem (base)
8px = 1.6rem
9px = 1.8rem
10px = 2rem
11px = 2.2rem
12px = 2.4rem
13px = 2.6rem
14px = 2.8rem
15px = 3rem
16px = 3.2rem
18px = 3.6rem
20px = 4rem
22px = 4.4rem
24px = 4.8rem
26px = 5.2rem
28px = 5.6rem
30px = 6rem
32px = 6.4rem
34px = 6.8rem
36px = 7.2rem
38px = 7.6rem
40px = 8rem

*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Reset
2.0 - Tipografia
    2.1 - Estilos
3.0 - Alinhamentos
4.0 - Cores
5.0 - Layout







4.0 - Forms
5.0 - Navigation
	5.1 - Links
	5.2 - Menus
6.0 - Accessibility
7.0 - Alignments
8.0 - Clearings
9.0 - Widgets
10.0 - Content
	10.1 - Posts and pages
	10.2 - Asides
	10.3 - Comments
11.0 - Infinite scroll
12.0 - Media
	12.1 - Captions
	12.2 - Galleries

--------------------------------------------------------------*/


/*--------------------------------------------------------------
1.0 Reset
--------------------------------------------------------------*/

h1 {
    margin: 80px auto -5px auto;
    font-size: 40px;
    line-height: 50px;
    letter-spacing: -0.04rem;
    width: 95%;
    max-width: 960px;
}

h2 {
    width: 95%;
    max-width: 960px;
    margin: 30px auto 60px auto;
    font-size: 1.2rem;
    line-height: 1.7rem;
}

p {
    margin: 0 auto 30px auto;
    width: 95%;
    max-width: 550px;
    font-family: freight-text-pro, Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    line-height: 30px;
    color: #333333;
    text-rendering: optimizeLegibility !important;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.assinatura {
    font-size: 15px;
    line-height: 15px;
    margin-top: 40px auto 0 auto;
}

.nome_artista {
    font-size: 17px;
    line-height: 20px;
}

.nome_artista_descricao {
    font-size: 13px;
    line-height: 17.5px;
}

.titulo_grafico {
    font-size: 18px;
    line-height: 22px;
}

.texto_grafico {
    font-size: 15px;
    line-height: 18.5px;
}

.balance-text {
      text-wrap: balance;
  }


/*--------------------------------------------------------------
2.0 Tipografia
--------------------------------------------------------------*/

.estado_headline_roman {
    font-family: "Estado Headline", sans-serif;
    font-weight: normal;
}

.estado_headline_bold {
    font-family: "Estado Headline", sans-serif;
    font-weight: 700;
}

.freight_text_pro {
    font-family: freight-text-pro, Georgia, "Times New Roman", Times, serif;
    font-weight: 600;
}

.freight_text_bold_italic {
    font-family: freight-text-pro, Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    font-style: italic;
}

.flama_book {
    font-family: flama, serif;
    font-style: normal;
}

.flama_bold {
    font-family: flama, serif;
    font-weight: 700;
}


/*--------------------------------------------------------------
2.1 Estilos
--------------------------------------------------------------*/

.caixa_alta {
    text-transform: uppercase;
}

.capitular_4 {
    float: left;
    font: normal normal 900 129px/101px "Flama Semicondensed";
    text-rendering: optimizeLegibility !important;
    padding: 0px 5.5px 0px 0px;
}


/*--------------------------------------------------------------
3.0 Alinhamentos
--------------------------------------------------------------*/

.centralizado {
    text-align: center;
}


/*--------------------------------------------------------------
4.0 Cores
--------------------------------------------------------------*/

.cor_texto {
    color: #333333;
}

.cinza {
    color: #585D5D;
}

.cor_primaria {
    color: #843939;
}

.cor_secundaria {
    color: rgb(181, 41, 47);
}


/*--------------------------------------------------------------
5.0 Layout
--------------------------------------------------------------*/

.discos {
    width: 95%;
    max-width: 550px;
    display: grid;
    grid-template-columns: 19.4% 19.4% 19.4% 19.4% 19.4%;
    grid-column-gap: 2%;
}

.grafico {
    width: 95%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -40px;
    margin-bottom: -50px;
}


@media screen and (max-width: 959px) {
    #chart {
        display: none;
    }
}

@media screen and (min-width: 960px) {
    #chart_estatico {
        display: none;
    }
}

@media screen and (max-width: 550px) {
    .discos {
        width: 95%;
        display: block;
    }
}

.discos_img {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 5px;
}

.col1 {
    grid-column: 1/2;
}

.col2 {
    grid-column: 2/3;
}

.col3 {
    grid-column: 3/4;
}

.col4 {
    grid-column: 4/5;
}

.col5 {
    grid-column: 5/6;
}