.menu-front-toggle{ top:0; width:2rem; height:2rem; margin:0; text-align:center; line-height:3rem; cursor:pointer; }
.menu-front-toggle > div{ position:absolute; width:100%; height:1px; background-color:var(--primaryColor); }
.menu-front-toggle > div:nth-child(1){ top:0.3rem; }
.menu-front-toggle > div:nth-child(2){ top:0.9rem; }
.menu-front-toggle > div:nth-child(3){ top:1.5rem; }

.menu-front-mobile{ display:block; text-align:left; }
.menu-front-user{ display:block; margin-bottom:2rem; text-align:left; }
.menu-front-back{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:9; }

.menu-front-container{ display:block; position:fixed; top:0; left:0; padding:0; width:70%; max-height:1px; overflow:hidden; z-index:10; transition:all 0.3s ease; }
.menu-front-padding{ display:flex; flex-direction:column; padding:2rem; }
.menu-front-container .header-marca{ margin:0 0 1.5rem 0; }
.menu-front{ display:block; text-align:left; }
.menu-front li{ padding:0.5rem 0; margin:0 0 1rem 0; }
.menu-front li a{ display:block; width:100%; padding:0; color:var(--color); font-size:1rem; line-height:1.2; font-weight:400; text-decoration:none; }
.menu-front li a:hover{ color:var(--primaryColor); }

/* atividade mobile para menu quando click */
.header.menu-open .menu-front-back{ display:block; }
.header.menu-open .menu-front-container{ max-height:100%; overflow:auto; background-color:var(--menuColor); }

.menu-front-close{ position:absolute; top:-1.5rem; right:-1.5rem; width:2rem; height:2rem; text-align:center; line-height:2rem; cursor:pointer; }
.menu-front-close > div{ position:absolute; width:1.2rem; height:1px; background-color:var(--primaryColor); }
.menu-front-close > div:nth-child(1){ left:0.3rem; top:0.9rem; transform:rotate(45deg); }
.menu-front-close > div:nth-child(2){ left:0.3rem; top:0.9rem; transform:rotate(-45deg); }

@media (min-width:768px){
	.menu-front-toggle{ display:none; }
	.menu-front-close{ display:none; }
	.menu-front-mobile{ display:none; }
	.menu-front-container{ display:block; position:relative; top:0; width:auto; max-height:100%; }
	.menu-front-padding{ flex-direction:row-reverse; }
	.menu-front{ display:flex; padding:0; align-items:center; justify-content:flex-end; background-color:transparent; box-shadow:none; }
	.menu-front-padding{ padding:0; }
	.menu-front li{ padding:0; text-align:left; margin:0; }
	.menu-front li a{ color:var(--color); padding:0 0 0 2.5rem; font-size:1rem; }
	.menu-front-user{ margin:0 0 0 2rem; }
}