/* 

RESOLUÇÃO SITE CENTRALIZADO RESPONSIVO 4.0

PARA SITES QUE POSSUEM TELA RESPONSIVA CENTRALIZADA, QUANDO A RESOLUÇÃO FOR MAIOR QUE 1200px, DEIXA TELA FIXA EM 1200px E CONTINUA AUMENTANDO AS MARGENS.

*/


/************* CONFIGURACOES DA PAGINA (BODY) ***************/

body {
		margin: 0px;								                /* SEM MARGENS NA BODY */
		line-height: 0px;                                           /* ESPAÇAMENTO GERAL ENTRE AS LINHAS NA PÁGINA, EVITA ESPAÇAMENTO TAMBÉM ENTRE DIVS */
		overflow-x: hidden;							                /* RETIRA SCROLL INFERIOR DA BODY*/
		background-image: url("imagens/paginas/body_fdo.png");		/* IMAGEM DEGRADE, FUNDO DA BODY */
}


/********* CONFIGURAÇÃO E TAMANHO DO CONTAINER *************/

#container{                
			display: flex;    
			margin: 0 auto;    
			width: 100%;      /* CENTRALIZA ÁREA ÚTIL DA DIV container, baseado NO TAMANHO MÁXIMO de 1208px da DIV resolucao, SEM MARGENS (1200px imagens + 8px bordas) */
}


/*********** CONFIGURAÇÃO DA DIV RESOLUÇÃO ****************/

#resolucao {
			margin: 0 auto;     
			border: 4px solid #474741;			                                /* ESPESSURA DA BORDA E COR */
			background-color: #000000; 			                                /* COR DE FUNDO DA DIV PRINCIPAL */
			overflow-x: hidden;					                                /* RETIRA SCROLL INFERIOR */
			overflow-y: hidden;					                                /* RETIRA SCROLL LATERAL */
			border-radius: 0px 0px 0px 0px;                                     /* ARREDONDAMENTO DO TRAÇOS DA BORDA */
			background-image: url("imagens/paginas/body_fdo.png") ;				/* IMAGEM FUNDO DA DIV RESOLUCAO */
			background-size: 100% 100%;
			text-align: center;
}




/********* RESPONSIBILIDADE DA DIV RESOLUCAO ************/




@media only screen and (min-width: 1px) and (max-width: 320px) {		/* TELAS DE ATÉ 320PX - REDUÇÃO DA ORIGINAL */
	#resolucao {
				width: 300px;		/* TAMANHO MÍNIMO DA TELA PARA MOSTRAGEM - TELA SEM MARGEM */
				height: 334px;	    
	}
	#logotipo {						/* IMAGEM LOGOTIPO */
	    		width: 300px;
				height: 254px;
				margin-top: 40px;
				margin-bottom: 40px;
    }

}




@media only screen and (min-width: 321px) and (max-width: 375px)  {		/* TELAS DE ATÉ 375PX - REDUÇÃO DA ORIGINAL  321x270 */
	#resolucao {														/* DEIXA DE AUMENTAR A DIV E CENTRALIZA na container aumentando apenas a margem*/
	    		width: 321px;
				height: 370px;

    }
	#logotipo {						/* IMAGEM LOGOTIPO */
				width: 321px;
				height: 270px;
				margin-top: 50px;
				margin-bottom: 50px;
    }

}




@media only screen and (min-width: 376px) and (max-width: 574px)  {		/* TELAS DE ATÉ 574PX - REDUÇÃO DA ORIGINAL 6,78 */
	#resolucao {														/* DEIXA DE AUMENTAR A DIV E CENTRALIZA na container aumentando apenas a margem*/
				width: 376px;
				height: 418px;
    }
	#logotipo {						/* IMAGEM LOGOTIPO */
				width: 376px;
				height: 318px;
				margin-top: 50px;
				margin-bottom: 50px;
    }

}




@media only screen and (min-width: 575px) and (max-width: 718px)  {		/* TELAS DE ATÉ 718PX - REDUÇÃO DA ORIGINAL 575x493 */
	#resolucao {														/* DEIXA DE AUMENTAR A DIV E CENTRALIZA na container aumentando apenas a margem*/
				width: 575px;
				height: 593px;
    }
	#logotipo {						/* IMAGEM LOGOTIPO */
				width: 575px;
				height: 493px;
				margin-top: 50px;
				margin-bottom: 50px;
    }


}



@media only screen and (min-width: 719px) and (max-width: 907px)  {		/* TELAS DE ATÉ 907PX - REDUÇÃO DA ORIGINAL 719x612 */
	#resolucao {														/* DEIXA DE AUMENTAR A DIV E CENTRALIZA na container aumentando apenas a margem*/
				width: 719px;
				height: 712px;
    }
	#logotipo {						/* IMAGEM LOGOTIPO */
				width: 719px;
				height: 612px;
				margin-top: 50px;
				margin-bottom: 50px;
    }

}




@media only screen and (min-width: 908px) and (max-width: 1078px)  {	/* TELAS DE ATÉ 1078PX - REDUÇÃO DA ORIGINAL = 908px / 926px = 0,98 # 0,98 x 795 = 779, logo logotipo = 908x779 */
	#resolucao {														/* DEIXA DE AUMENTAR A DIV E CENTRALIZA na container aumentando apenas a margem*/
				width: 908px;
				height: 879px;
    }
	#logotipo {						/* IMAGEM LOGOTIPO */
				width: 908px;
				height: 779px;
				margin-top: 50px;
				margin-bottom: 50px;
    }

}




@media only screen and (min-width: 1079px) and (max-width: 1307px)  {	/* TELAS ACIMA DE DE ATÉ - TAMANHO ORIGINAL 926x795 */
	#resolucao {														/* DEIXA DE AUMENTAR A DIV E CENTRALIZA na container aumentando apenas a margem*/
				width: 926px;
				height: 895px;
	}
	#logotipo {							/* IMAGEM LOGOTIPO */
				width: 926x;
				height: 795px;
				margin-top: 50px;
				margin-bottom: 50px;
    }

}




@media only screen and (min-width: 1308px) {							/* TELAS ACIMA DE DE ATÉ - TAMANHO ORIGINAL 926x795 */
	#resolucao {														/* DEIXA DE AUMENTAR A DIV E CENTRALIZA na container aumentando apenas a margem*/
				width: 926px;
				height: 895px;
	}
	#logotipo {							/* IMAGEM LOGOTIPO */
				width: 926px;
				height: 795px;
				margin-top: 50px;
				margin-bottom: 50px;
    }

}