/* PARA OCUPAR A TELA INTEIRA */


body {
	height:100%;
	margin:0;
	padding:0;
	background:#e6cea8;
}

/* CONTAINER PRINCIPAL */
.container { 
    display: grid; 
	grid-template-areas: "topo topo topo" 
                         "esquerda conteudo direita" 
                         "rodape rodape rodape"; 
	grid-row-gap: 0px;
	grid-column-gap: 2%;
	grid-template-columns: 13% 70% 13%;
	grid-template-rows: auto auto auto;
}


/* 1 COLUNA */
.g-topo { 
    grid-area: topo;
} 

/* COLUNA DA ESQUERDA */
.g-esquerda { 
    grid-area: esquerda;
} 

/* COLUNA CENTRAL */
.g-conteudo { 
    grid-area: conteudo;
} 

/* COLUNA DA DIREITA */
.g-direita { 
    grid-area: direita;
} 

/* RODAPÉ */
.g-rodape { 
    grid-area: rodape;
	background-color:#000;
	color:#ffff00;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
}

/* TEXTO PRINCIPAL */
.textoReportagem {
	font-size: large;
	line-height: 1.4em;
	text-align: left;
	width: 100%;
	letter-spacing: .006em;
	color: #290002;
	initial-letter: 3;
}

.credito {
	font-family:Verdana, Geneva, sans-serif;
	color: #666;	
	font-size: 12px;
}

.autor {
	color: #000;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight:bold;
    text-align:center;
    width:100%;
}

.titulo {
	font-family: "Playfair Display", Times, serif;
	font-size: 50px;
	font-weight: bold;
	color: #470306;
	line-height: 1em;
	text-align: center;
}

.intertitulo {
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1em;
	font-family: "Playfair Display";
}

.chapeu {
    text-transform: uppercase;
    letter-spacing: .35em;
    font-size: 12px;
    color:#962020;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.fotoDestaque img {
    width:100%;
	width: auto\9; /* ie8 */
}


/* CENTRALIZA */
.centraliza {
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:0.7em;
	color: #494848;
	border-bottom:1px #000 solid;
	margin: 20px 50px; 20px; 50px;
}

/* FRASE CENTRAL */
.citacao-central {
	width: 90%;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 2em;
	line-height: 30px;
	color: #000000;
	text-align: center;
}

.citacao-credito {
	margin-bottom:30px;
	width:auto;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-weight:bold;
	font-size:15px;
	line-height:30px;
	color:#000;
	float:none;
}

/* FRASE LATERAL */
.citacao-materia-wrapper {
	width:350px;
	margin-top:10px;
	float:direita;
}

.aspas-interna {
	margin-right: 5px;
	width:25px;
	height:17px;
	background-image:url(aspas.png);
	float:left;
}

.citacao-materia {
	width: 350px;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 30px;
	line-height: 30px;
	color: #290002;
	margin-esquerda: 25px;
	float: esquerda;
}

/* BOX */
.frase-materia {
	width:350px;
	font-family:Arial,Helvetica,sans-serif;color:#666;
	background-color:#d9d8d8;
	border-top:2px #000 solid;
	border-bottom:2px #000 solid;
	margin:10px 0 10px 5px;
	padding-esquerda:10px;
	padding-direita:10px;
	float:direita;
}

.texto10BoldBranco { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px ; font-weight: bold ; color: #FFFFFF}
.texto10Azul { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px ; color: #6088B0}
.texto10BoldRed { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px ; font-weight: bold ; color: #FF0000}
.texto10Red { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px ; font-weight: normal; color: #FF0000 }
.texto10Branco { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px ; color: #FFFFFF}
.laranja { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px ; color: #FF9933; font-weight: bold}
.texto12Bold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold }
.texto10Green { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px ; font-weight: normal; color: #006633}
.texto10Verde { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px ; font-weight: bold; color: #009645}
.texto10 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px}
.texto12 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px}
.texto10Bold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px ; font-weight: bold}
.texto11 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; color: #000000}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.container { 
    display: grid; 
	grid-template-areas: "topo topo topo" 
                         "esquerda conteudo direita" 
                         "rodape rodape rodape"; 
	grid-row-gap: 0px;
	grid-column-gap: 2%;
	grid-template-columns: 2% 92% 2%;
	grid-template-rows: auto auto auto;
}

}  
.container .g-conteudo .autor em {
	color: #000;
	text-align: right;
	font-family: Georgia, "Times New Roman", Times, serif;
	
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: "Playfair Display", Times, serif;
	font-size: 20px;
	font-weight: bold;
	color: #000;
	line-height: 1em;
	text-align: center;
}

li {
  float: right;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #470306;
  color:white;
 }


span {
   font-family: "Playfair Display", Times, serif;
	font-size: 4rem;
	font-weight: bold;
	color: #000;
	line-height: 1em;
	text-align: center;
	 margin-top: 5rem;
  margin-left: 1rem;
  padding-right: -5rem;
}
}