
* {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,#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: 10001;
                       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 */

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

/* Texto do Menu NAVBAR e DropDown */
#navbarToggler01 > ul > li.nav-item >a{	color: black;
					z-index: 10000;
					font-size: 4vw;
}

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

#navbarToggler01 > ul { margin-left: 5vw; 
                        z-index: 10000;
                        width: 48vw;
                        border: 1px solid silver; 
                        margin-left: 40vw;
                        background: white;
}

/*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: 4vw;
			margin-left: 5px;
			padding-top: .6vw;
}

/*Tarja Cinza abaixo da laranja do topo */

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

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


/*Button Toggle do MENUBAR */

body > div:nth-child(1) > div.fundoNav > nav > button  {   border: 2px solid lightblue; 
                                                           height: 7vw ; 
                                                           width: 9vw; 
                                                           margin-left: 15vw;
                                                           padding-top: 0vw;
                                                           background:darkred;
}
body > div:nth-child(1) > div.fundoNav > nav > button >span {   height: 3vw ; 
                                                                width: 3vw; 
                                                                background: none;
}

/*Button do MENUBAR Dropdown*/
#navbarToggler01 > ul > li.nav-item.dropdown.show>div{width: 80vw;}

#navbarToggler01 > ul > li.nav-item.dropdown.show>div>a:hover {background-color: lightgreen;}

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


} /* Final @media 299 max*/




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

/* Small devices (landscape phones, 300px and up)*/
@media (min-width: 300px) and (max-width: 499.99px) {
#navbarToggler01 > ul {	z-index: 10000;}

#navbarToggler01 > ul > li.nav-item >a{	color: black;
					font-size: 4vw;
					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: 40vw;
                                                        padding: 0.1vw;
                                                        top: 0vw;
                                                        background: 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: 3vw;}



} /* Final @media max 300 */


/*Ponto final de fechamento na minha tela
----------- Segunda Tela com Botão Toggle / Final da redução-----------*/
 
/* 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: 10000;
}

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

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

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; 
                                                              background: none;
}

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

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

} /* 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 {	z-index: 9000;}
#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 { margin-left: 5vw; 
                        width: 38vw;
                        border: 1px solid silver; 
                        background: rgba(242, 242, 242, 0.9);
                        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: 14vw; margin-left: 0vw;
}

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

/*Button do MENUBAR Dropdown*/

body > div:nth-child(1) > div.fundoNav > nav > button  { border: 2px solid lightblue; 
                                                         height: 5vw ; width: 6vw; 
                                                         margin-left: 44vw;
                                                         padding: auto;
                                                         z-index: 9000;
                                                         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; 
					padding-top: .5vw;
}
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 998*/
 

/* 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 */


/*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 */











