/*Uso deste recurso faz com que as propriedades 
	definidas aqui sejam aplicadas em todas as tags*/
	/*A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. 
	É um atalho que evita definir uma distância para cada lado separadamente 
	( padding-top , padding-right , padding-bottom , padding-left ).*/
	*{
	margin: 0;
	padding: 0;

	/*A propriedade font-family do CSS permite que se faça uma lista de prioridades de familias de fontes 
	e/ou nomes genéricos de famílias a serem especificados para um elemento selecionado.
	A seleção de fontes não para simplesmente na primeira fonte nomeada na lista que está no sistema do usuário.*/
	/*fonte, fonte, familia*/ 
	font-family: arial, verdana, sans-sherif;
	}

	/*Corpo do documento onde será inserida toda codificação de informações, 
	que estarão visíveis ao usuário.*/
body{

	/*Define o tamanho da fonte padrão para 
	todo o documento html*/
	font-size: 16px;
	/*background-color configura a cor de fundo de um elemento, 
	com qualquer valor de cor ou a palavra-chave transparent*/
	background-color: #FFF; 
	}

	/*Esse container engloba toda minha pagina.*/
#container{
	/*Definição do layout semi-fluido, onde o máximo
	de largura suportado será 960px e mínimo será 600px*/
	max-width: 1200px;
	min-width: 400px;
	height: 1600px;
	margin: 0 auto;
	background-color: white;
	/*Essa propriedade com valor "auto" vai 
	centralizar o elemento*/
	margin:auto;
	}

	/*Destinado a estabelecer áreas de cabeçalho.
	em um documento HTML*/
	/*A propriedade CSS width determina a largura da área de conteúdo de um elemento. 
	A área de conteúdo fica dentro do preenchimento, da borda, e da margem de um elemento. 
	As propriedades min-width e max-width sobrescrevem o width*/
	/*A propriedade height do CSS determina a altura da área do conteúdo de um elemento. 
	A área de conteúdo consiste no padding , margin e border do elemento.*/
	/*background-color configura a cor de fundo de um elemento, 
	com qualquer valor de cor ou a palavra-chave transparent */
header{
	width: 100%;
	height: 80px;
	background-color: white;
	text-align: center;
	}

	/*As Heading Tags (H1, H2, H3, ...)são recursos de programação HTML utilizados 
	para destacar títulos e sub-títulos de uma página. 
	H1 é a abreviação do inglês para Header 1, ou Cabeçalho 1, logo, o mais importante dos Headers*/
header h1{

	/*As propriedades de padding CSS são usadas para gerar espaço em torno do conteúdo de um elemento, 
	dentro de qualquer borda definida.*/
	padding: 10px 20px;
	color: blue;
	/* A propriedade CSS text-align descreve como conteúdo inline, como texto, 
	é alinhado no elemento pai em bloco. 
	text-align não controla o alinhamento de elementos em bloco, apenas o seu conteúdo inline.*/
	text-align: center;
	}

	/*O .class seletor seleciona elementos com um atributo de classe específico.*/
	/*Nesta seção com fotos e texto faço a apresentação com histórico da propriedade (marqueting)*/
	/*Estabelece seções em um site, funcionamento parecido com a tag <div>,porém com poder semântico maior.*/
	#apresentacao{
	width: 100%;
	height: 560px;
	background-color: #ADF571;
	}

	#apresentacao  
	h2{
	padding: 10px 20px;
	color: black;
	text-align: center;
	}
	/*Estabelece uma área com uma ou mais imagens 
	podendo associar elementos de legenda*/
	#apresentacao figure{
	width: 38%;
	height: 480px;
	margin: 20px auto;
	/*Essa propriedade faz com que o elemento tenda
	à ficar alinhado à esquerda, permitindo que os demais 
	elementos sejam alocados ao lado dele*/	
	float: left;}
	/*indica	o	caminho	onde	está	a	imagem, alt (descrição da imagem), 
	title (titulo da imagem), width (Define a largura da imagem); 
	height (Define a altura da imagem)*/
	#apresentacao img{
		margin:10px auto;
		border: 5px solid blue;
	}
	
	/*Aplica as propriedades ao elemento "p" que esta dentro
	de um elemento com a classe destaque"*/
	#apresentacao article{
	width: 57%;
	margin-top: 25px;
	float: right;
	}
	
	/*Estabelece seções em um site, funcionamento parecido com a tag <div>,
	porém com poder semântico maior.*/
	#vendas{
	width: 100%;
	height: 640px;
	background-color: #A0F5F3;
	}

	#vendas h2{
	padding: 10px 20px;
	color: black;
	text-align: center;
	}

	#vendas figure{
	width: 38%;
	height: 480px;
	margin: 20px auto;
	/*Essa propriedade faz com que o elemento tendaà ficar alinhado à esquerda, 
	permitindo que os demais elementos sejam alocados ao lado dele*/	
	float: left;
	text-align: center; 
	}

	#vendas img{
	margin:10px auto;
	border: 5px solid blue;
	}

	#vendas article{
	width: 61%;
	margin-top: 25px;

	/*Essa propriedade faz com que o elemento tendaà ficar alinhado à direita, 
	permitindo que os demais elementos sejam alocados ao lado dele*/
	float: right;
	}

	#cadastro{
	width: 100%;
	height: 100px;
	text-align: center;
	}

	#legend{
	text-align: center;
	}

	#fieldset{
	width: 90%;
	height: 100px;
	}

	/*Estabelece seções em um site, funcionamento parecido com a tag <div>,
	porém com poder semântico maior.*/
	#receitinhas{
	width: 100%;
	height: 600px;
	background-color: #ADF571;
	text-align: center;
	}
	
	#receitinhas figure{
	width: 45%;
	height: 540px;

	/*A propriedade margin do CSS define a área de margem nos quatro lados do elemento. 
	É uma abreviação que define todas as margens individuais de uma só vez: 
	margin-top , margin-right , margin-bottom , e margin-left*/
	margin: 20px auto;

	/*Essa propriedade faz com que o elemento tenda
	à ficar alinhado à esquerda, permitindo que os demais 
	elementos sejam alocados ao lado dele*/	
	float: left;
	}

	#receitinhas img{
		width: 90%;
		margin: 10px auto;
		border: 5px solid blue;
	}
	
	#receitinhas article{
	width: 50%;
	margin-top: 35px;
	float: right;
	}
	
	#valores-nutricionais{
	width: 100%;
	height: 850px;
	background-color: #A0F5F3;
	text-align: center;
	}

	#valores-nutricionais h2{
	padding: 10px 20px;
	color: black;
	text-align: center;
	}

	#valores-nutricionais figure{
	width: 97%;
	height: 770px;
	margin: 20px auto;
	float: left;
	}

	#valores-nutricionais img{
		width: 90%;
		margin: 10px auto;
		border: 5px solid blue;
	}
	

	#aquifero-guarani{
	width: 100%;
	height: 580px;
	background-color: #ADF571;
	text-align: center;
	}

	#aquifero-guarani figure{
	width: 30%;
	height: 500px;
	margin: 20px auto;
	/*Essa propriedade faz com que o elemento tenda
	à ficar alinhado à esquerda, permitindo que os demais 
	elementos sejam alocados ao lado dele*/	
	float: left;}

	#aquifero-guarani img{
	width:90%;  
	margin: 10px auto; 
	border: 5px solid blue;
	}

	#aquifero-guarani article{
	width: 30%;
	margin-top: 35px;
	float: left;
	}


	/*Estabelece conteúdos complementares aos da página,
	tais como banners de publicidade, links externos 
	e conteúdos adicionais*/
	main aside{ 
	width: 30%;
	height: 500px;
	background-color: #A0F5F3;
	float: right; 
	}

	#Feirinha div{ 
	width: 90%;
	height: 145px;
	background-color: #19F6B2;
	margin: 10px auto;
	}

 	/* redimensionar imagem */
 	#Feirinha img{
    width: 75px;
    margin:10px auto;
	}

	#Emater div{ 
	width: 90%;
	height: 145px;
	background-color: #19F6B2;
	margin: 10px auto;
	}

 	/* redimensionar imagem */
 	#Emater img{
    width: 161px;
    margin:10px auto;
	}

	/*Destinado a estabelecer áreas de rodapé,
	em um documento HTML*/
	footer{
	width: 100%;
	height: 50px;
	background-color: #1AFFD3;
	text-align: center;
	}