@import url('../config.header.php');


nav{
			background-color: @nav-bg-color !important;

	height: 250px;
	position: relative;

		.logo-principal{
			width:  calc(@largura-logo-nav / 2);
		}


	.left{
		width: @div-largura;
		left: 0;
		height: @div-altura;
        position: absolute;
		background-color: #ccc;
		top: @div-altura-center;
		margin-top: -@div-altura;
		padding-right: @div-padding-left;
		z-index: 10;
	}
	.center{
		position: absolute;
		left: 50%;
		margin-left: calc( @largura-logo-nav-left / 2 );
		width: @largura-logo-nav;
		height: @altura-logo-nav ;
		background-color: red;
		z-index: 11;
	}
	.right{
		width: @div-largura;
		right: 0;
		height: @div-altura;
        position: absolute;
		background-color: blue;
		top: @div-altura-center;
		margin-top: -@div-altura;
		padding-left: @div-padding-right;
		z-index: 10;
	}

}

// 
// 

header{

	padding: @padding-header; 
	background-color: @bg-header;
	background-image: url(@bg-img-header);
	background-size: cover;
	background-position: top center;
	width: 100%;



    // BRAND - Logo
	.navbar-brand{
		color: @text-navbar-brand;
		float: none;
		padding: @padding-navbar-brand;
		display: block;
		margin: @margin-navbar-brand;
	}

	//buscador
	.busca {

		padding: @padding-buscador;

	}

	nav{

		// MENU HAMBURGUER
		.navbar-toggler{
				z-index: 11;
				background-color : @bg-menu-hamburguer;
			    background-image: url(@bar-menu-hamburguer) !important;
			    border-color: @border-menu-hamburguer;
		}

		//NAVBAR  UL
		.navbar-nav{
			text-align: center;
			width: 100%;

			//ESTRUTURA LI
			.nav-item{
               display: inline-block;
               float: none !important;
	            border-radius: @nav-item-border;

			   // LI HOVER
			   &:hover,
			   &:focus{
			   	  background-color: @bg-nav-item;
			   }

				// ESTRUTURA LINK "A"
				.nav-link{
	               
	               padding: @padding-nav-link; 
	               margin: 0 auto;
	               color: @text-nav-item;

	               // A HOVER
				   &:hover,
				   &:focus{
				      color: @text-nav-link-hover;
				   }

				}
			}

			.nav-item.nav-brand{
				background-color: transparent !important;
			}

			//ESTRUTURA LI HOVER ATIVO
			.nav-item.active{
				background-color: @bg-nav-item-active;

				//ESTRUTURA LI ATIVO
				.nav-link{
				   color: @text-nav-item-active;

				   //A HOVER ATIVO
				   &:hover,
				   &:focus{
				       color: @text-nav-item-active-hover;
				   }
				}
			}
		}

	}

}