/*Menu mobile MECPRECI*/
/* menu mobile*/
	/*Sem barra de rolagem horizontal*/
	html, body {overflow-x: hidden;}	
	menu img{display: none;}
	
	.menu-anchor {
	width: 40px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	background: #0888B9; /*Background envoltada da ancora do menu antes de ser clicado(Por padrão)*/
	z-index:999;
	margin-top: 10px;
	}

.menu-anchor:before {
	content: "";
	display: block;
	margin: 7px auto;
	width: 70%;
	height: 0.25em;
	/*Cor dos riscos no botão do menu*/
	background: #888;
	box-shadow: 0 .45em 0 0 #888, 0 .9em 0 0 #888;
	}
	
/*posição do menu-archor dps de ativo*/
/*
@media screen and (min-width: 768px){
	.menu-active .menu-anchor{
		margin: auto 50%;
		}
	}
	
@media screen and (max-width: 767px) and (min-width: 480px){
	.menu-active .menu-anchor{
		margin: auto 45%;
		}
	}
	
@media screen and (max-width: 480px) and (min-width: 360px){
	.menu-active .menu-anchor{
		margin: auto 50%;
		}
	}

@media screen and (max-width: 360px) and (min-width: 320px){
	.menu-active .menu-anchor{
		margin: auto 85%;
		}
	}
	
@media screen and (max-width: 320px){
	.menu-active .menu-anchor{
		margin: auto 80%;
		}
	}
	
*/
/*--------*/
.menu-active .menu-anchor {
		background: #FFF; /*Background do botão de clique dps de ativo*/
	}
	
menu {	
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 180px;
	height: 100%;
	padding-top: 10px;
	background: #4a72b1; /*Background do menu*/
/*	box-shadow: inset -5px -10px 10px 0 rgba(0,0,0,.3);*/
	z-index:9999;
	}
menu li{width: 100%}
menu li a {		
	display: block;
	border-bottom: 1px solid rgba(255,255,255,.3);
	/*margin: 0 10px;*/
	padding: 10px;		
	color: #FFF;
	text-decoration: none;
	z-index: 9999;
	}

menu li a:hover {
	background: #FFF;
	color: #0E4480;
	z-index:9999;
	}
/*
	Aqui você esconde o menu para fora da tela 
	O valor é exatamente a largura da sidebar
*/
menu {
	-webkit-transform: translateX(-220px);
	-moz-transform: translateX(-220px);
	-ms-transform: translateX(-220px);
	transform: translateX(-220px);
	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-ms-transition: all .25s linear;
	transition: all .25s linear;
	}
	
/*
	Essa é a posição original do HEADER e do MAIN
*/
.main {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	}

/*
   Com a classe menu-active na tag HTML
*/
.menu-active menu {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	}

/*.menu-active header,(empurra o "header" junto qdo o menu está ativo)*/
.menu-active .main {
	-webkit-transform: translateX(220px);
	-moz-transform: translateX(220px);
	-ms-transform: translateX(220px);
	transform: translateX(220px);		
	/*Colocado para retirar a margem branca a esquerda*/
	margin: 0 -220px;
	}