/* ----------------------------------------

Obrigada por acessar o cĆ³digo fonte.

Gostou? Entre em contato conosco!

Respeite nosso trabalho- NĆ£o copia comĆ©dia!

Personalizado por: sites.etc.br

/* Geral*/

@charset "utf-8";

a, li {

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

/**** Global CSS-Todos os tamanhos****/

.nav ul {

	max-width: 1240px;

	margin: 0;

	padding: 0;

	list-style: none;

	font-size: 1.9em;

	font-weight: 300;

	text-transform: uppercase;

}

.nav li span {

	display: block;

}

.nav a {

	display: block;

	color: rgba(249, 249, 249, .9);

	text-decoration: none;

	-webkit-transition: color .5s, background .5s, height .5s;

	-moz-transition: color .5s, background .5s, height .5s;

	-o-transition: color .5s, background .5s, height .5s;

	-ms-transition: color .5s, background .5s, height .5s;

	transition: color .5s, background .5s, height .5s;

}

.nav i {

	/* smoother for Chrome */

	-webkit-transform: translate3d(0, 0, 0);

	-moz-transform: translate3d(0, 0, 0);

	-o-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

}

/* Remove quando tapped */



a, button {

	-webkit-tap-highlight-color: rgba(0,0,0,0);

}

/* Hover effect */



.nav ul:hover a {

	color: rgba(249, 249, 249, .5);

}

.nav ul:hover a:hover {

	color: rgba(249, 249, 249, 0.99);

}

/* bg Menu */

.nav li {

	background: url(../images/menu_border.gif) top right no-repeat;

}

/* hover: muda de cor ->legado do site antigo*/

.nav1#ativo {

	background-color: #006700;

	background-image: none;

}

.nav2#ativo {

	background-color: #670000;

	background-image: none;

}

.nav3#ativo {

	background-color: #000067;

	background-image: none;

}



.nav4#ativo {

	background-color: #e65d00;

	background-image: none;

}

.nav5#ativo {

	background-color: #ffc000;

	background-image: none;

}





/****** maior que 800px ******/

@media (min-width: 50em) {

/* transformando list em nav horizontal */

.nav li {

	float: left;

	width: 19.98666666667%;

	text-align: center;

	-webkit-transition: border .5s;

	-moz-transition: border .5s;

	-o-transition: border .5s;

	-ms-transition: border .5s;

	transition: border .5s;

}

.nav a {

	display: block;

	width: auto;

}

.nav li:nth-child(5n+1) a:hover, .nav li:nth-child(5n+1) a:active, .nav li:nth-child(5n+1) a:focus {

	border-bottom: 4px solid rgb(53,161,109);

	background-color: #006700;

	-webkit-transition: border .5s;

	-moz-transition: border .5s;

	-o-transition: border .5s;

	-ms-transition: border .5s;

	transition: border .5s;

}

.nav li:nth-child(5n+2) a:hover, .nav li:nth-child(5n+2) a:active, .nav li:nth-child(5n+2) a:focus {

	border-bottom: 4px solid rgb(180, 0, 2);

	background-color: #670000;

	-webkit-transition: border .5s;

	-moz-transition: border .5s;

	-o-transition: border .5s;

	-ms-transition: border .5s;

	transition: border .5s;

}

.nav li:nth-child(5n+3) a:hover, .nav li:nth-child(5n+3) a:active, .nav li:nth-child(5n+3) a:focus {

	border-bottom: 4px solid rgb(12, 110, 149);

	background-color: #000067;

	-webkit-transition: border .5s;

	-moz-transition: border .5s;

	-o-transition: border .5s;

	-ms-transition: border .5s;

	transition: border .5s;

}

.nav li:nth-child(5n+4) a:hover, .nav li:nth-child(5n+4) a:active, .nav li:nth-child(5n+4) a:focus {

	border-bottom: 4px solid rgb(230,151,0);

	background-color: #e65d00;

	-webkit-transition: border .5s;

	-moz-transition: border .5s;

	-o-transition: border .5s;

	-ms-transition: border .5s;

	transition: border .5s;

}

.nav li:nth-child(5n+5) a:hover, .nav li:nth-child(5n+5) a:active, .nav li:nth-child(5n+5) a:focus {

	border-bottom: 4px solid rgb(255,235,0);

	background-color: #ffc000;

	-webkit-transition: border .5s;

	-moz-transition: border .5s;

	-o-transition: border .5s;

	-ms-transition: border .5s;

	transition: border .5s;

}

/* Lugar do Icone */

	

.icon {

	padding-top: 0.45em;

}

.icon + span {

	margin-top: 2.8em;

	-webkit-transition: margin .5s;

	-moz-transition: margin .5s;

	-o-transition: margin .5s;

	-ms-transition: margin .5s;

	transition: margin .5s;

}

.nav a {

	height: 5.86em;

}

/* Animando a altura do elemento



.nav a:hover,  .nav a:active,  .nav a:focus {

	height: 7.8em;

	

	-webkit-transition: margin .5s;

	-moz-transition: margin .5s;

	-o-transition: margin .5s;

	-ms-transition: margin .5s;

	transition: margin .5s;

	

}

/* fazendo o texto seguir a altura da animaĆ§Ć£o 

.nav a:hover {

	margin-top: 1.2em;

	-webkit-transition: margin .5s;

	-moz-transition: margin .5s;

	-o-transition: margin .5s;

	-ms-transition: margin .5s;

	transition: margin .5s;

}margin-top: 1.2em;

	-webkit-transition: margin .5s;

	-moz-transition: margin .5s;

	-o-transition: margin .5s;

	-ms-transition: margin .5s;

	transition: margin .5s;

/********Ć­cones***********/

.nav i {

	position: relative;

	display: inline-block;

	margin: 0 auto;

	padding: 0.324em;/*Tamanho do circulo*/

	border-radius: 50%;

	font-size: 1.459em;/*Tamanho do icone*/

	box-shadow: 0 0 0 30px transparent;

	background: rgba(255,255,255,0.1);

	-webkit-transform: translate3d(0, 0, 0);

	-moz-transform: translate3d(0, 0, 0);

	-o-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

	-webkit-transition: box-shadow .6s ease-in-out;

	-moz-transition: box-shadow .6s ease-in-out;

	-o-transition: box-shadow .6s ease-in-out;

	-ms-transition: box-shadow .6s ease-in-out;

	transition: box-shadow .6s ease-in-out;

}

/* animando o box-shadow para criar o efeito*/

.nav a:hover i, .nav a:active i, .nav a:focus i {

	box-shadow: 0 0 0 0 rgba(255,255,255,0.2);

	-webkit-transition: box-shadow .4s ease-in-out;

	-moz-transition: box-shadow .4s ease-in-out;

	-o-transition: box-shadow .4s ease-in-out;

	-ms-transition: box-shadow .4s ease-in-out;

	transition: box-shadow .4s ease-in-out;

}

}

 @media (min-width: 50em) and (max-width: 61.250em) {

/* Size and font adjustments to make it fit into the screen*/

.nav ul {

	font-size: 1.2em;

}

.nav ul {

	background: none;

}

.nav li {

	background: none;

}

}



/*******TABLETS*****/



@media (max-width: 49.938em) {

	

.nav4 {

	font-size:0.785em;}	

.pecas ul li {

	width: 49%;

}

.pecasunica ul li {

	width: 100%;

}

/* Menus */

.nav ul li:nth-child(5n+1) a:hover, .nav ul li:nth-child(5n+1) a:active, .nav ul li:nth-child(5n+1) a:focus {

	background: rgb(53,161,109);

}

.nav li:nth-child(5n+2) a:hover, .nav li:nth-child(5n+2) a:active, .nav li:nth-child(5n+2) a:focus {

	background: rgb(180, 0, 2);

}

.nav li:nth-child(5n+3) a:hover, .nav li:nth-child(5n+3) a:active, .nav li:nth-child(5n+3) a:focus {

	background: rgb(12, 110, 149);

}

.nav li:nth-child(5n+4) a:hover, .nav li:nth-child(5n+4) a:active, .nav li:nth-child(5n+4) a:focus {

	background: rgb(230,151,0);

}

.nav li:nth-child(5n+5) a:hover, .nav li:nth-child(5n+5) a:active, .nav li:nth-child(5n+5) a:focus {

	background: #ffcd33;

}

/*.nav li:nth-child(6n+6) a:hover,  .nav li:nth-child(6n+6) a:active,  .nav li:nth-child(6n+6) a:focus {

	background: rgb(32, 54, 68);

}  ---- Legado original _Source*/

.nav ul li {

	-webkit-transition: background 0.5s;

	-moz-transition: background 0.5s;

	-o-transition: background 0.5s;

	-ms-transition: background 0.5s;

	transition: background 0.5s;

}

}



/* CSS specific to the 2x3 columns version */

@media (min-width:32.5em) and (max-width: 49.938em) {

/* Creating the 2 column layout using floating elements once again */

.nav li {

	display: block;

	float: left;

	width: 50%;

}

/* Adding some padding to make the elements look nicer*/

.nav a {

	padding: 0.8em;

}

/* Displaying the icons on the left, and the text on the right side using inlin-block*/

.nav li span, .nav li span.icon {

	display: inline-block;

}

.nav li span.icon {

	width: 50%;

}

.nav li .icon + span {

	font-size: 1em;

}

.icon + span {

	position: relative;

	top: -0.2em;

}

/* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */

.nav li i {

	display: inline-block;

	padding: 8% 9%;

	border: 4px solid transparent;

	border-radius: 50%;

	font-size: 1.5em;

	background: rgba(255,255,255,0.1);

	-webkit-transition: border .5s;

	-moz-transition: border .5s;

	-o-transition: border .5s;

	-ms-transition: border .5s;

	transition: border .5s;

}

/* Transition effect on the border color */

.nav li:hover i, .nav li:active i, .nav li:focus i {

	border: 4px solid rgba(255,255,255,0.1);

}

}



/* Adapting the font size and width for smaller screns*/

@media (min-width: 32.5em) and (max-width: 38.688em) {

.nav li span.icon {

	width: 50%;

}

.nav li .icon + span {

	font-size: 0.9em;

}

}

/* Styling the toggle menu link and hiding it */

.nav .navtoogle {

	display: none;

	width: 100%;

	padding: 0.5em 0.5em 0.5em;

	font-weight: normal;

	text-align: left;

	color: #fff;

	font-size: 1.82em;

	background: none;

	border: none;

	border-bottom: 1px solid rgb(221, 221, 221);

	cursor: pointer;

}

.navtoogle i {

	z-index: -1;

}

.icon-menu {

	position: relative;

	top: 3px;

	line-height: 0;

	font-size: 1.86em;

}

/*******CELULAR******/



 @media (max-width: 32.438em) {



.pecas ul li {

	width: 100%;

}

.pecas:hover {

	transition: none;

	transform: none;

}

/* Menu */

.nav .navtoogle {

	margin: 0;

	display: block;

}

/* Animating the height of the navigation when the button is clicked */

	

	/* When JavaScript is disabled, we hide the menu */

.no-js .nav ul {

	max-height: 30em;

	overflow: hidden;

}

/* When JavaScript is enabled, we hide the menu */

.js .nav ul {

	max-height: 0em;

	overflow: hidden;

}

/* Displaying the menu when the user has clicked on the button*/

.js .nav .active + ul {

	max-height: 30em;

	overflow: hidden;

	-webkit-transition: max-height .4s;

	-moz-transition: max-height .4s;

	-o-transition: max-height .4s;

	-ms-transition: max-height .4s;

	transition: max-height .4s;

}

/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/

	

.nav li span {

	display: inline-block;

	height: 100%;

}

.nav a {

	padding: 0.5em;

}

.icon + span {

	margin-left: 1em;

	font-size: 0.8em;

}



.nav li:nth-child(5n+1) {

	border-left: 8px solid rgb(53,161,109);

	background-color: #006700;

}

.nav li:nth-child(5n+2) {

	border-left: 8px solid rgb(180, 0, 52);

	background-color: #670000;

}

.nav li:nth-child(5n+3) {

	border-left: 8px solid rgb(13, 111, 150);

	background-color: #000067;

}

.nav li:nth-child(5n+4) {

	border-left: 8px solid rgb(230,151,0);

	background-color: #e65d00;

}

.nav li:nth-child(5n+5) {

	border-left: 8px solid rgb(255,235,0);

	background-color: #ffd500;

}

.nav li:nth-child(5n+6) {

	border-left: 8px solid rgb(9, 18, 25);

	background-color: #ffd500;

}

/* make the nav bigger on touch screens */

.touch .nav a {

	padding: 0.8em;

}

}