body {
	background-color: #DEDEDD;
}

/* contorno envolvendo todo conteude das páginas. garante alinhamento no meio da página com margem iguais nas laterais*/
 .caixa {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	border-radius: 25px;
 }
 

 
 /* é o contorno das páginas dos livros que são mostradas abaixo dos livros*/
 .contorno-paginas {
	 border: 1px solid #9A9697;
 }
 
 /*espaco-menu é o espaço entre os links principais no topo da página*/
 .espaco-menu {
	 word-spacing: 8px;
 }
 
 @media (min-width: 100px) {
    .espaco-menu { word-spacing: 5px; }
}

@media (min-width: 300px) {
    .espaco-menu { word-spacing: 8px; }
}

@media (min-width: 600px) {
    .espaco-menu { word-spacing: 9px; }
}

@media (min-width: 800px) {
    .espaco-menu { word-spacing: 10px; }
}

/* é para garantir que o layout seja carregada conforme a largura especificada, ignorando o conteúdo. o que vale é o valor de largura fixado*/
 .topo {
	 table-layout:fixed;
 }
 
 /*os atributos abaixo com after são os nomes de cada página, grande, encima antes do logo*/
 .topo-texto-brasil:after {
	content: 'Brasil em Cores';
}

.topo-texto-rio:after {
	content: 'Rio em Cores';
}

 .topo-texto-comprar:after {
	content: 'Comprar Livros';
}
 
  .topo-texto-quem:after {
	content: 'Entre em Contato';
}

.topo-texto-livros:after {
	content: 'Livros do Brasil';
}

.topo-texto-apps:after {
	content: 'Ficção e opinião';
}

.topo-texto-literatura:after {
	content: 'Literatura Brasileira';
}

 
 /* menu garante um alinhamento cortando espaços vazios (na altura) de uma linha. tudo fica mais justo*/
 .menu{
    margin: 0;
    padding: 0;
    line-height: 0;
    clear: both;
}

.espaco-linhas {
	line-height: 100%;
}

@media (min-width: 100px) {
   .espaco-linhas { line-height: 50%; }
}

@media (min-width: 300px) {
   .espaco-linhas { line-height: 60%; }
}

@media (min-width: 350px) {
   .espaco-linhas { line-height: 80%; }
}

@media (min-width: 400px) {
   .espaco-linhas { line-height: 90%; }
}
   
@media (min-width: 600px) {
   .espaco-linhas { line-height: 100%; }
}
   
   /* controla o esdpaço entre as linhas. uso essa formatação espaco-linhas02 quando uso o texto normal, por exemplo descrição dos livros */
   .espaco-linhas02 {
	line-height: normal;
}

@media (min-width: 100px) {
   .espaco-linhas02 { line-height: 70%; }
}

@media (min-width: 300px) {
   .espaco-linhas02 { line-height: 80%; }
}

@media (min-width: 350px) {
   .espaco-linhas02 { line-height: 90%; }
}

@media (min-width: 400px) {
   .espaco-linhas02 { line-height: 100%; }
}
   
@media (min-width: 500px) {
   .espaco-linhas02 { line-height: normal; }
}

/*espaco-linhaslivro é o espaço usado entre as linhas ao lado dos livros nas páginas de cada livro*/
.espaco-linhaslivro {
	line-height: 120%;
}

@media (min-width: 100px) {
   .espaco-linhaslivro { line-height: 50%; }
}

@media (min-width: 300px) {
   .espaco-linhaslivro { line-height: 60%; }
}

@media (min-width: 350px) {
   .espaco-linhaslivro { line-height: 80%; }
}

@media (min-width: 400px) {
   .espaco-linhaslivro { line-height: 90%; }
}
   
@media (min-width: 600px) {
   .espaco-linhaslivro { line-height: 100%; }
}

@media (min-width: 700px) {
   .espaco-linhaslivro { line-height: 120%; }
}

/* os after abaixo são os nomes dos links principais no topo das páginas*/
.menu-brasil:after {
	content: 'Brasil';
}

.menu-rio:after {
	content: 'Rio';
}

.menu-livros:after {
	content: 'Livros';
}

.menu-apps:after {
	content: 'Coluna';
}

.menu-comprar:after {
	content: 'Comprar';
}

.menu-contato:after {
	content: 'Contato';
}

/* para justificar e alinhar os textos variados do site, independente do tamanho da fonte*/
.corpo {
text-align: justify;
    text-justify: inter-word;
}

/* linha no topo da página. linha preta de 1px */
.linha {
	height:1px; border:none; color:#000; background-color:#000; width:100%; text-align:center; margin: 0 auto;
	}

/*linha cinza, de 1px. divisorias */	
.linha-cinza {
	height:1px; border:none; color:#9A9697; background-color:#9A9697; width:100%; text-align:center; margin: 0 auto;
	}
	
/* altura01 é usado para acertar a altura numa coluna ou tabela, quando essa altura deve variar dependendo da midia.*/

.altura01 { 
height: 10px; 
}

 @media (min-width: 100px) {
    .altura01 { height: 2px; }
}

@media (min-width: 300px) {
    .altura01 { height: 3px; }
}

@media (min-width: 600px) {
    .altura01 { height: 7px; }
}

@media (min-width: 800px) {
    .altura01 { height: 10px; }
}

 /* fonte do texto lá em cima, no topo da página, título principal */
 .texto-titulo {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-style: italic;
	font-size: 7.5vw;
}

@media (min-width: 100px) {
    .texto-titulo { font-size: 8.0vw; }
}

@media (min-width: 400px) {
    .texto-titulo { font-size: 7.5vw; }
}

@media (min-width: 800px) {
    .texto-titulo { font-size: 7.0vw; }
}

@media (min-width: 900px) {
    .texto-titulo { font-size: 6.5vw; }
}


@media (min-width: 1000px) {
    .texto-titulo { font-size: 5.5vw; }
}

@media (min-width: 1200px) {
    .texto-titulo { font-size: 4.5vw; }
}

@media (min-width: 1400px) {
    .texto-titulo { font-size: 4.0vw; }
}

@media (min-width: 1600px) {
    .texto-titulo { font-size: 3.5vw; }
}

@media (min-width: 1800px) {
    .texto-titulo { font-size: 3.0vw; }
}

@media (min-width: 2200px) {
    .texto-titulo { font-size: 2.5vw; }
}

/*fonte dos links no topo*/
.links-topo {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #00B865;
	font-style: italic;
	font-size: 2.5vw;
}

a.links-topo:link {
	text-decoration: none;
	color: #00B865;
}
a.links-topo:visited {
	text-decoration: none;
	color: #00B865;
}
a.links-topo:hover {
	text-decoration: none;
	color: #9A9697;
}
a.links-topo:active {
	text-decoration: none;
	color: #9A9697;
}


@media (min-width: 100px) {
    .links-topo { font-size: 3.0vw; }
}

@media (min-width: 300px) {
    .links-topo { font-size: 3.5vw; }
}

@media (min-width: 500px) {
    .links-topo { font-size: 3.0vw; }
}

@media (min-width: 700px) {
    .links-topo { font-size: 2.8vw; }
}


@media (min-width: 800px) {
    .links-topo { font-size: 2.5vw; }
}

@media (min-width: 900px) {
    .links-topo { font-size: 2.2vw; }
}


@media (min-width: 1000px) {
    .links-topo { font-size: 1.8vw; }
}

@media (min-width: 1200px) {
    .links-topo { font-size: 1.4vw; }
}

@media (min-width: 1400px) {
    .links-topo { font-size: 1.2vw; }
}

/*fonte para diferenciar o link especifico que está carregado, a página que está aberta*/
.links-atual {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #9A9697;
	font-style: italic;
	font-size: 2.5vw;
}

a.links-atual:link {
	text-decoration: none;
	color: #9A9697;
}
a.links-atual:visited {
	text-decoration: none;
	color: #9A9697;
}
a.links-atual:hover {
	text-decoration: none;
	color: #9A9697;
}
a.links-atual:active {
	text-decoration: none;
	color: #9A9697;
}

@media (min-width: 100px) {
    .links-atual { font-size: 3.0vw; }
}

@media (min-width: 300px) {
    .links-atual { font-size: 3.5vw; }
}

@media (min-width: 500px) {
    .links-atual { font-size: 3.0vw; }
}

@media (min-width: 700px) {
    .links-atual { font-size: 2.8vw; }
}


@media (min-width: 800px) {
    .links-atual { font-size: 2.5vw; }
}

@media (min-width: 900px) {
    .links-atual { font-size: 2.2vw; }
}



@media (min-width: 1000px) {
    .links-atual { font-size: 1.8vw; }
}

@media (min-width: 1200px) {
    .links-atual { font-size: 1.4vw; }
}

@media (min-width: 1400px) {
    .links-atual { font-size: 1.2vw; }
}



/*fonte padrão do corpo*/
.texto-corpo {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-style: italic;
	font-size: 1.9vw;
}

@media (min-width: 100px) {
    .texto-corpo { font-size: 3.3vw; }
}

@media (min-width: 400px) {
    .texto-corpo { font-size: 3.0vw; }
}

@media (min-width: 500px) {
    .texto-corpo { font-size: 2.7vw; }
}

@media (min-width: 600px) {
    .texto-corpo { font-size: 2.4vw; }
}

@media (min-width: 700px) {
    .texto-corpo { font-size: 2.1vw; }
}


@media (min-width: 800px) {
    .texto-corpo { font-size: 1.9vw; }
}

@media (min-width: 900px) {
    .texto-corpo { font-size: 1.7vw; }
}


@media (min-width: 1000px) {
    .texto-corpo { font-size: 1.6vw; }
}

@media (min-width: 1100px) {
    .texto-corpo { font-size: 1.5vw; }
}

@media (min-width: 1200px) {
    .texto-corpo { font-size: 1.4vw; }
}

@media (min-width: 1300px) {
    .texto-corpo { font-size: 1.3vw; }
}


@media (min-width: 1400px) {
    .texto-corpo { font-size: 1.2vw; }
}

@media (min-width: 1500px) {
    .texto-corpo { font-size: 1.1vw; }
}

@media (min-width: 1600px) {
    .texto-corpo { font-size: 1.0vw; }
}

@media (min-width: 1800px) {
    .texto-corpo { font-size: 0.9vw; }
}

/*fonte padrão do corpo na cor de link para destacar endereço de email*/
.texto-corpo02 {
	font-family: Arial, Helvetica, sans-serif;
	color: #0005FD;
	font-style: italic;
	font-size: 1.9vw;
}

@media (min-width: 100px) {
    .texto-corpo02 { font-size: 3.3vw; }
}

@media (min-width: 400px) {
    .texto-corpo02 { font-size: 3.0vw; }
}

@media (min-width: 500px) {
    .texto-corpo02 { font-size: 2.7vw; }
}

@media (min-width: 600px) {
    .texto-corpo02 { font-size: 2.4vw; }
}

@media (min-width: 700px) {
    .texto-corpo02 { font-size: 2.1vw; }
}


@media (min-width: 800px) {
    .texto-corpo02 { font-size: 1.9vw; }
}

@media (min-width: 900px) {
    .texto-corpo02 { font-size: 1.7vw; }
}


@media (min-width: 1000px) {
    .texto-corpo02 { font-size: 1.6vw; }
}

@media (min-width: 1100px) {
    .texto-corpo02 { font-size: 1.5vw; }
}

@media (min-width: 1200px) {
    .texto-corpo02 { font-size: 1.4vw; }
}

@media (min-width: 1300px) {
    .texto-corpo02 { font-size: 1.3vw; }
}


@media (min-width: 1400px) {
    .texto-corpo02 { font-size: 1.2vw; }
}

@media (min-width: 1500px) {
    .texto-corpo02 { font-size: 1.1vw; }
}

@media (min-width: 1600px) {
    .texto-corpo02 { font-size: 1.0vw; }
}

@media (min-width: 1800px) {
    .texto-corpo02 { font-size: 0.9vw; }
}

.texto-corpo03 {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-style: italic;
	font-size: 1.6vw;
}

/* fonte menor, usada para os preços em baixo dos livros */

@media (min-width: 100px) {
    .texto-corpo03 { font-size: 2.5vw; }
}

@media (min-width: 400px) {
    .texto-corpo03 { font-size: 2.3vw; }
}

@media (min-width: 500px) {
    .texto-corpo03 { font-size: 2.1vw; }
}

@media (min-width: 600px) {
    .texto-corpo03 { font-size: 1.9vw; }
}

@media (min-width: 700px) {
    .texto-corpo03 { font-size: 1.8vw; }
}


@media (min-width: 800px) {
    .texto-corpo03 { font-size: 1.7vw; }
}

@media (min-width: 900px) {
    .texto-corpo03 { font-size: 1.5vw; }
}


@media (min-width: 1000px) {
    .texto-corpo03 { font-size: 1.4vw; }
}

@media (min-width: 1100px) {
    .texto-corpo03 { font-size: 1.3vw; }
}

@media (min-width: 1200px) {
    .texto-corpo03 { font-size: 1.2vw; }
}

@media (min-width: 1300px) {
    .texto-corpo03 { font-size: 1.1vw; }
}


@media (min-width: 1400px) {
    .texto-corpo03 { font-size: 1.0vw; }
}

@media (min-width: 1500px) {
    .texto-corpo03 { font-size: 0.9vw; }
}

@media (min-width: 1600px) {
    .texto-corpo03 { font-size: 0.8vw; }
}

@media (min-width: 1800px) {
    .texto-corpo03 { font-size: 0.7vw; }
}

/*fonte maior, usada em títulos, como nome dos livros*/
.texto-corpo04 {
	font-family: Arial, Helvetica, sans-serif;
	color: #9A9697;
	font-style: italic;
	font-size: 2.1vw;
}

@media (min-width: 100px) {
    .texto-corpo04 { font-size: 3.6vw; }
}

@media (min-width: 400px) {
    .texto-corpo04 { font-size: 3.2vw; }
}

@media (min-width: 500px) {
    .texto-corpo04 { font-size: 2.9vw; }
}

@media (min-width: 600px) {
    .texto-corpo04 { font-size: 2.5vw; }
}

@media (min-width: 700px) {
    .texto-corpo04 { font-size: 2.3vw; }
}


@media (min-width: 800px) {
    .texto-corpo04 { font-size: 2.1vw; }
}

@media (min-width: 900px) {
    .texto-corpo04 { font-size: 1.9vw; }
}


@media (min-width: 1000px) {
    .texto-corpo04 { font-size: 1.8vw; }
}

@media (min-width: 1100px) {
    .texto-corpo04 { font-size: 1.7vw; }
}

@media (min-width: 1200px) {
    .texto-corpo04 { font-size: 1.6vw; }
}

@media (min-width: 1300px) {
    .texto-corpo04 { font-size: 1.5vw; }
}


@media (min-width: 1400px) {
    .texto-corpo04 { font-size: 1.4vw; }
}

@media (min-width: 1500px) {
    .texto-corpo04 { font-size: 1.3vw; }
}

@media (min-width: 1600px) {
    .texto-corpo04 { font-size: 1.2vw; }
}

@media (min-width: 1800px) {
    .texto-corpo04 { font-size: 1.1vw; }
}

/* text-livroinfos é o texto usado ao lado dos livros*/
.texto-livroinfos {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-style: italic;
	font-size: 1.6vw;
}



@media (min-width: 100px) {
    .texto-livroinfos { font-size: 2.5vw; }
}

@media (min-width: 400px) {
    .texto-livroinfos { font-size: 2.3vw; }
}

@media (min-width: 500px) {
    .texto-livroinfos { font-size: 2.2vw; }
}

@media (min-width: 600px) {
    .texto-livroinfos { font-size: 2.1vw; }
}

@media (min-width: 700px) {
    .texto-livroinfos { font-size: 2.0vw; }
}


@media (min-width: 800px) {
    .texto-livroinfos { font-size: 1.9vw; }
}

@media (min-width: 900px) {
    .texto-livroinfos { font-size: 1.6vw; }
}


@media (min-width: 1000px) {
    .texto-livroinfos { font-size: 1.5vw; }
}

@media (min-width: 1100px) {
    .texto-livroinfos { font-size: 1.4vw; }
}

@media (min-width: 1200px) {
    .texto-livroinfos { font-size: 1.3vw; }
}

@media (min-width: 1300px) {
    .texto-livroinfos { font-size: 1.2vw; }
}


@media (min-width: 1400px) {
    .texto-livroinfos { font-size: 1.1vw; }
}

@media (min-width: 1500px) {
    .texto-livroinfos { font-size: 1.0vw; }
}

@media (min-width: 1600px) {
    .texto-livroinfos { font-size: 0.9vw; }
}

@media (min-width: 1800px) {
    .texto-livroinfos { font-size: 0.8vw; }
}

/*quando uso links dentro do texto. tem o mesmo tamanho do texto-corpo e texto-corpo02*/
.links-baixo {
	font-family: Arial, Helvetica, sans-serif;
	color: #0005FD;
	font-style: italic;
	font-size: 1.8vw;
}
a.links-baixo:link {
	text-decoration: none;
	color: #0005FD;
}
a.links-baixo:visited {
	text-decoration: none;
	color: #0005FD;
}
a.links-baixo:hover {
	text-decoration: none;
	color: #00B865;
}
a.links-baixo:active {
	text-decoration: none;
	color: #0005FD;
}

@media (min-width: 100px) {
    .links-baixo { font-size: 3.3vw; }
}

@media (min-width: 400px) {
    .links-baixo { font-size: 3.0vw; }
}

@media (min-width: 500px) {
    .links-baixo { font-size: 2.7vw; }
}

@media (min-width: 600px) {
    .links-baixo { font-size: 2.4vw; }
}


@media (min-width: 700px) {
    .links-baixo { font-size: 2.1vw; }
}


@media (min-width: 800px) {
    .links-baixo { font-size: 1.9vw; }
}

@media (min-width: 900px) {
    .links-baixo { font-size: 1.7vw; }
}


@media (min-width: 1000px) {
    .links-baixo { font-size: 1.6vw; }
}

@media (min-width: 1100px) {
    .links-baixo { font-size: 1.5vw; }
}

@media (min-width: 1200px) {
    .links-baixo { font-size: 1.4vw; }
}

@media (min-width: 1300px) {
    .links-baixo { font-size: 1.3vw; }
}


@media (min-width: 1400px) {
    .links-baixo { font-size: 1.2vw; }
}

@media (min-width: 1500px) {
    .links-baixo { font-size: 1.1vw; }
}

@media (min-width: 1600px) {
    .links-baixo { font-size: 1.0vw; }
}

@media (min-width: 1800px) {
    .links-baixo { font-size: 0.9vw; }
}