@charset "utf-8";

/*
RESOLUÇÃO SITE CENTRALIZADO RESPONSIVO 4.0 - PARA TODOS OS SITES QUE POSSUEM TELA RESPONSIVA CENTRALIZADA,
RESOLUÇÃO MÍNIMA 320PX E QUANDO A RESOLUÇÃO FOR MAIOR QUE 1208px, DEIXA TELA FIXA EM 1208px E CONTINUA AUMENTANDO AS MARGENS AUTOMÁTICO.
MANTER PÁGINA FIXA SEM ALTERAÇÕES...
*/


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

body {
    margin: 0px;								                /* SEM MARGENS NA BODY */
    line-height: 0px;                                           /* SEM ESPAÇAMENTO GERAL */
    overflow-x: hidden;							                /* RETIRA SCROLL INFERIOR DA BODY*/
    background-image: url("imagens/layout/body_fdo.jpg");		/* IMAGEM FUNDO DA BODY DEGRADE */
}

a {
    text-decoration: none;
}

section {
    line-height: 20px;  
}


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

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


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

#resolucao {
        width: 320px;                                                       /* MENOR RESOLUÇÃO DE TELA 320px */
        position: absolute;
		border: 4px solid #170b0b;			                                /* ESPESSURA E COR DA BORDA */
		background-color: #cccccc; 			                                /* COR DE FUNDO DA DIV RESOLUCAO */
		overflow-x: hidden;					                                /* RETIRA SCROLL INFERIOR */
		overflow-y: hidden;					                                /* RETIRA SCROLL LATERAL */
	    border-radius: 0px 0px 0px 0px;                                     /* ARREDONDAMENTO DOS CANTOS NA BORDA */
	    background-image: url("imagens/layout/div_resolucao_fdo.jpg");		/* IMAGEM FUNDO DA DIV RESOLUCAO */
}


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

@media only screen and (min-width: 329px) and (max-width: 378px) {	
#resolucao {
            margin-left: calc((100% - 328px)/2);
}
}


@media only screen and (min-width: 379px) {	
#resolucao {
            width: 100%;											/* (%) RESERVADA PARA TODA ÁREA ÚTIL DO SITE */
		    left: 50%;											/* ALINHA INICIO DA DIV APÓS 50% DE TELA À ESQUERDA */
		    margin-left: -50%;									/* TRAZ A DIV DEVOLTA METADE DO TAMANHO DA PRÓPRIA DIV CENTRALIZANDO*/
}
}


@media only screen and (min-width: 1418px) {	
#resolucao {                                    /* DEIXA DE AUMENTAR A DIV E CENTRALIZA NA CONTAINER AUMENTANDO APENAS A MARGEM */
        position: relative;
        width: 1210px;
        left: 0px;
        margin-left: 0px;
}
}