
* {box-sizing: border-box;
   padding: 0px;
   margin: 0px;
   font-family: 'PT Sans Caption', sans-serif;
 }

div.tarjaTopo {	width: 100%; height: 3vw; 
				background-color: darkorange; 
				text-align: center;
}


div.tarjaTopo>a>i {	color: white;
					font-size: 2vw;
					margin-left: 2vw; 
					padding-top: .5vw;
}

div.tarjaTopo>span {	color: white;
						font-size: 1.5vw;
						margin-left: 5px;
						padding-top: .7vw;
}


nav>a.logoTopo>img {width: 11vw; margin-left: 2vw;
                    padding-top: 0px; z-index: 2006; }


div.fundoNav {	width: 100%; height: 5vw;
				background-color: silver;
				vertical-align: middle;
				background-image: linear-gradient(#e6e6e6,#686868,#b3b3b3,#b3b3b3,#686868,#e6e6e6);
}

body > div:nth-child(1) > div.fundoNav > div.fundoCinzaEscuroMeio{  width: 100%; height: 2vw;
                                                                    background-color: grey;

}

/* Estilos do Texto do menu NAVBAR */
#navbarToggler01 > ul {margin-left: 5vw; 
                       z-index: 2001;
                       position: absolute;
}



/* Efeitos hover no link a */

#navbarToggler01 > ul > li.nav-item >a:visited{	color: black;
                                                background-color: black ;
}

#navbarToggler01 > ul > li.nav-item >a:hover{	color: white;
                                                background-color: darkorange ;
}


body > div:nth-child(1) > div.fundoNav > nav > button  {border: 2px solid lightblue; 
margin-left: 0vw ; 
z-index: 2000; 
text-align: right;}
body > div:nth-child(1) > div.fundoNav > nav > button >span {background: silver; z-index: 2001;
}



/* Midia Queries */ /* Midia Queries *//* Midia Queries */ /* Midia Queries */


/*Extra small devices (portrait phones, less than 300px)*/
@media (max-width: 299.99px) { 

#navbarToggler01 > ul > li.nav-item >a{	color: black;
										font-size: 2.9vw;
										z-index: 2001;
}

#navbarToggler01 > ul > li:nth-child(8)>a{	color: black;
											z-index: 2001;
}

#navbarToggler01 > ul { margin-left: 5vw; 
                        z-index: 2001; 
                        width: 48vw;
                        border: 1px solid silver; 
                        background: rgba(242, 242, 242, 0.9);
                        margin-left: 40vw; 
                        padding-left: 2vw;
}

/*Tarja Laranja do topo */
div.tarjaTopo {	width: 100%; height: 9vw; 
}

div.tarjaTopo>a>i {	color: white;
					font-size: 5vw;
					margin-left: 2vw; 
					padding-top: .85vw;
}

div.tarjaTopo>span {	font-size: 4.4vw;
						margin-left: 5px;
						padding-top: .6vw;
}

/*Tarja Cinza abaixo da laranja do topo */

nav>a.logoTopo>img {width: 20vw; margin-left: .5vw; top: 0vw;
}

div.fundoNav {	height: 20vw;
				background-color: silver;
				background-image: linear-gradient(#e6e6e6,#686868,#b3b3b3,#686868,#e6e6e6);
}


/*Button Toggle do MENUBAR */

body > div:nth-child(1) > div.fundoNav > nav > button { border: 2px solid lightblue; 
                                                        height: 7vw ; width: 10vw; 
                                                        margin-left: 32vw;
                                                        padding: 0.1vw;
                                                        top: 0vw;
                                                        background-color: darkred;
}

body > div:nth-child(1) > div.fundoNav > nav > button >span { height: 4vw ; width: 4vw; 
                                                              background: none;
}

/*Button do MENUBAR Dropdown*/
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a:hover {background-color: lightgreen;}

#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a {font-size: 2vw;}


} /* Final @media 299 max*/




/*----------- OK -----------*/

/* Small devices (landscape phones, 300px and up)*/
@media (min-width: 300px) and (max-width: 499.99px) {

#navbarToggler01 > ul > li.nav-item >a{	color: black;
										font-size: 2.9vw;
										z-index: 2001;
}

#navbarToggler01 > ul > li:nth-child(8)>a{	color: black;
											z-index: 2001;
}

#navbarToggler01 > ul { margin-left: 5vw; 
                        z-index: 2001; 
                        width: 48vw;
                        border: 1px solid silver; 
                        background: rgba(242, 242, 242, 0.9);
                        margin-left: 40vw; 
                        padding-left: 2vw;
}

/*Tarja Laranja do topo */
div.tarjaTopo {	width: 100%; height: 7vw; 
}

div.tarjaTopo>a>i {	color: white;
					font-size: 4vw;
					margin-left: 2vw; 
					padding-top: .85vw;
}

div.tarjaTopo>span {	font-size: 3.4vw;
						margin-left: 5px;
						padding-top: .6vw;
}

/*Tarja Cinza abaixo da laranja do topo */

nav>a.logoTopo>img {width: 20vw; margin-left: .5vw; top: 0vw;
}

div.fundoNav {	height: 15vw;
				background-color: silver;
				background-image: linear-gradient(#e6e6e6,#686868,#b3b3b3,#686868,#e6e6e6);
}


/*Button Toggle do MENUBAR */

body > div:nth-child(1) > div.fundoNav > nav > button { border: 2px solid lightblue; 
                                                        height: 6vw ; width: 9vw; 
                                                        margin-left: 45vw;
                                                        padding: 0.1vw;
                                                        top: 0vw;
                                                        background-color: darkred;
}

body > div:nth-child(1) > div.fundoNav > nav > button >span { height: 4vw ; width: 4vw; 
                                                              background: none;
}

/*Button do MENUBAR Dropdown*/
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a:hover {background-color: lightgreen;}

#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a {font-size: 2.5vw;}



} /* Final @media max 300 */


/*----------- Segunda Tela com Botão Toggle -----------*/
 
/* Small devices (landscape phones, 500px and up)*/
@media (min-width: 500px) and (max-width: 599.99px) {


#navbarToggler01 > ul > li.nav-item >a{	color: black;
										font-size: 2.5vw;
										z-index: 2001;
}

#navbarToggler01 > ul > li:nth-child(8)>a{  color: black;
                                            z-index: 2001;
}

#navbarToggler01 > ul { margin-left: 5vw; z-index: 2001; 
                        width: 38vw;
                        border: 1px solid silver; 
                        background: rgba(242, 242, 242, 0.8);
                        margin-left: 40vw; 
                        padding-left: 1vw;
}										

div.tarjaTopo {	width: 100%; height: 10vw; 
				
}

/*Tarja Laranja do topo */
div.tarjaTopo {	width: 100%; height: 5vw; 
				
}

div.tarjaTopo>a>i {	color: white;
					font-size: 3vw;
					margin-left: 2vw; 
					padding-top: .85vw;
}

div.tarjaTopo>span {	font-size: 2.4vw;
						margin-left: 5px;
						padding-top: .6vw;
}

/*Tarja Cinza abaixo da laranja do topo */

nav>a.logoTopo>img {width: 16vw; 
                    margin-left: 1vw;
}

div.fundoNav {	height: 10vw;
				background-color: silver;
				background-image: linear-gradient(#e6e6e6,#686868,#b3b3b3,#686868,#e6e6e6);
}

/*Button Toggle do MENUBAR */

body > div:nth-child(1) > div.fundoNav > nav > button { border: 2px solid lightblue; 
                                                        height: 6vw ; width: 9vw; 
                                                        margin-left: 55vw;
                                                        padding-top: .25vw;
                                                        background-image: linear-gradient(#e6e6e6,#686868,#686868,#e6e6e6);
}
body > div:nth-child(1) > div.fundoNav > nav > button >span { height: 4vw ; width: 4vw; 
}

/*Button do MENUBAR Dropdown*/
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a:hover {background-color: lightgreen;}

#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a {font-size: 2.2vw;;}


} /* Final @media 500px */


/*----------- Pimeira Tela com Botão Toggle -----------	*/


/* Medium devices (tablets, 600px and up)*/
 @media (min-width: 600px) and (max-width: 768px) { 

#navbarToggler01 > ul > li.nav-item >a { color: black;
										 font-size: 2vw;
										 z-index: 2001;
}

#navbarToggler01 > ul > li:nth-child(8)>a{	color: black;
											z-index: 2001;
}

#navbarToggler01 > ul { z-index: 2001; 
                        width: 35vw;
                        border: 1px solid silver; 
                        background: rgba(242, 242, 242, .9);
                        margin-left: 37vw; 
                        padding-left: 1vw;
}										

div.tarjaTopo {	width: 100%; height: 10vw; 
				
}

/*Tarja Laranja do topo */
div.tarjaTopo {	width: 100%; height: 5vw; 
				
}

/* Simbolos Redes Sociais */
div.tarjaTopo>a>i {	color: white;
					font-size: 3vw;
					margin-left: 2vw; 
					padding-top: .85vw;
}

div.tarjaTopo>span {	font-size: 2.4vw;
						margin-left: 5px;
						padding-top: .6vw;
}

/*Tarja Cinza abaixo da laranja do topo */

nav>a.logoTopo>img {width: 14vw; margin-left: 0vw;
}

div.fundoNav {	height: 9vw;
				background-color: silver;
				background-image: linear-gradient(#e6e6e6,#686868,#b3b3b3,#686868,#e6e6e6);
}

/*Button do MENUBAR Dropdown - Botão Toggler*/

body > div:nth-child(1) > div.fundoNav > nav > button { border: 2px solid lightblue; 
                                                        height: 5vw ; 
                                                        width: 6vw; 
                                                        margin-left: 44vw;
                                                        background-image: linear-gradient(#e6e6e6,#686868,#686868,#e6e6e6);
}
body > div:nth-child(1) > div.fundoNav > nav > button >span { height: 3vw; 
                                                              width: 3vw; 
                                                              background: none;
}

/*TEXTO Button do MENUBAR Dropdown*/
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a:hover {background-color: lightgreen;}
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a {font-size: 1.8vw;;}


} /* Final @media 600*/

/*----------- Final da Pimeira Tela com Botão Toggle -----------	*/



/*----------- Inicio do Menu na barra expandido -----------	*/


/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768.1px) and (max-width: 991.98px) { 
#navbarToggler01 > ul > li.nav-item >a{	color: black;
										border-left: 1px solid grey; z-index: 2001;
}

#navbarToggler01 > ul > li:nth-child(8)>a{ 	color: black;
											border-right: 1px solid grey; 
											z-index: 2001;
}

/*Tarja Laranja do topo */


/*Tarja Laranja do topo */
div.tarjaTopo {	width: 100%; height: 4vw; 
}

div.tarjaTopo>a>i {	color: white;
					font-size: 2.6vw;
					margin-left: 2vw; 
}
div.tarjaTopo>span {	font-size: 2.1vw;
						margin-left: 5px;
						padding-top: .6vw;
}

/*Tarja Cinza abaixo da laranja do topo */

nav>a.logoTopo>img {width: 12vw; margin-left: 1vw;
}

div.fundoNav {	height: 7.5vw;
				background-color: silver;
                background-image: linear-gradient(#e6e6e6,#686868,#b3b3b3,#b3b3b3,#b3b3b3,#b3b3b3,#686868,#e6e6e6);
}

/*Texto do menu barra de navegação (NAVBAR) */


#navbarToggler01 > ul > li.nav-item >a{	font-size: 1.3vw;
}



/*Button do MENUBAR Dropdown*/
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a:hover {background-color: gold;}
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a {font-size: 1.4vw;}


}/* Final @media 768 */
 




/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {

#navbarToggler01 > ul > li.nav-item >a{	color: black;
										border-left: 1px solid grey; z-index: 2001;
}

#navbarToggler01 > ul > li:nth-child(8)>a{	color: black;
										   	border-right: 1px solid grey; z-index: 2001;
}


/*Tarja Laranja do topo */


/*Tarja Laranja do topo */
div.tarjaTopo {	width: 100%; height: 4vw; 
				padding: .3vw;
}

div.tarjaTopo>a>i {	color: white;
					font-size: 2vw;
					margin-left: 2vw; 
}
div.tarjaTopo>span {	font-size: 1.8vw;
						margin-left: 5px;
}

/*Tarja Cinza abaixo da laranja do topo */

nav>a.logoTopo>img {width: 12vw; margin-left: 1.5vw;
}

div.fundoNav {	height: 7vw;
				background-color: silver;
				background-image: linear-gradient(#e6e6e6,#686868,#b3b3b3,#b3b3b3,#b3b3b3,#b3b3b3,#686868,#e6e6e6);
}


/*Texto do menu barra de navegação (NAVBAR) */

#navbarToggler01 > ul > li.nav-item >a{	font-size: 1.3vw;
}


/*Button do MENUBAR Dropdown*/
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a:hover {background-color: gold;}
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a {font-size: 1.2vw;;}


 }/* Final @media 992*/
 

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
#navbarToggler01 > ul > li.nav-item >a{	color: black;
										border-left: 1px solid grey; z-index: 2001;
}

#navbarToggler01 > ul > li:nth-child(8)>a{	color: black;
										   border-right: 1px solid grey; z-index: 2001;
}


/*Tarja Laranja do topo */
div.tarjaTopo {	width: 100%; height: 2.5vw; 
				padding: 0vw;
}

div.tarjaTopo>a>i {	color: white;
					font-size: 1.6vw;
					margin-left: 2vw; 
}
div.tarjaTopo>span {	font-size: 1.3vw;
						margin-left: 5px;
}

/*Tarja Cinza abaixo da laranja do topo */

nav>a.logoTopo>img {width: 8.5vw; margin-left: 1vw; 
					margin-right: 2vw; padding: 0vw;
}

div.fundoNav {	height: 4vw;
				background-color: silver;
				background-image: linear-gradient(#e6e6e6,#686868,#b3b3b3,#b3b3b3,#b3b3b3,#b3b3b3,#686868,#e6e6e6);
}

/*Texto do menu barra de navegação (NAVBAR) */

#navbarToggler01 > ul > li.nav-item >a{	font-size: .9vw;
}


/*Button do MENUBAR Dropdown*/
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a:hover {background-color: gold;}
#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a {font-size: 1vw;;}


 }/* Final @media */











