header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	.header-blocos{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60px;
		transition: 0.2s;
		@include desktop {
			height: 160px;
		}
		.btn-menu{
			flex-grow: 0;
			flex-shrink: 0;
			>a{
				display: block;
				padding: 5px;
				cursor: pointer;
				@include tablet {
					padding: 10px;
				}
				.barras{
					position: relative;
					display: block;
					width: 20px;
					height: 18px;
					.barra{
						position: absolute;
						left: 0;
						right: 0;
						display: block;
						height: 4px;
						background-color: $color2;
						border-radius: 2px;
						transition: 0.5s;
						&.barra-1{
							top: 0;
						}
						&.barra-2{
							top: 50%;
							margin-top: -2px;
						}
						&.barra-3{
							bottom: 0;
							right: 7px;
						}
					}
				}
				&:hover .barras{
					.barra{
						background-color: darken($color2, 20%);
					}
				}
			}
		}
		.logo{
			flex-grow: 0;
			flex-shrink: 0;
			margin-left: 5px;
			max-width: 80px;
			transition: 0.2s;
			@include tablet {
				margin-left: 15px;
				max-width: 120px;
			}
			@include desktop {
				margin-left: 30px;
				max-width: 200px;
			}
			img{
				display: block;
				margin: 0 auto;
				max-width: 100%;
				height: auto;
			}
		}
		.social{
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			align-items: center;
			margin-left: 5px;
			@include tablet {
				margin-left: 15px;
			}
			@include desktop {
				margin-left: 30px;
			}
			a{
				display: block;
				color: $color2;
				font-size: 18px;
				padding: 5px;
				transition: 0.2s;
				cursor: pointer;
				@include tablet {
					padding: 10px;
				}
				&:hover{
					color: darken($color2, 20%);
				}
			}
		}
		.btn-pesquisa{
			flex-grow: 0;
			flex-shrink: 0;
			margin-left: 15px;
			@include desktop {
				margin-left: 30px;
			}
			a{
				display: block;
				color: $color2;
				font-size: 18px;
				padding: 5px;
				transition: 0.2s;
				cursor: pointer;
				@include tablet {
					padding: 10px;
				}
				&:hover{
					color: darken($color2, 20%);
				}
			}
		}

		.menu{
			display: none;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			transition: 0.2s;
			z-index: -1;
			.fechar{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: -1;
				cursor: pointer;
			}
			.wrapper-categorias{
				position: relative;
				width: 270px;
				height: 100%;
				padding-top: 60px;
				box-shadow: 10px 0 15px -5px rgba(0, 0, 0, 0.25);
				@include tablet {
					width: 380px;
				}
				@include desktop {
					width: 480px;
					padding-top: 160px;
				}
				.categorias{
					height: 100%;
					overflow-y: auto;
					>ul{
						li{
							>.label{
								display: flex;
								align-items: center;
								>a{
									flex-grow: 1;
									flex-shrink: 1;
									display: block;
									padding: 15px;
									font-size: 18px;
									line-height: 1.2;
									cursor: pointer;
									transition: 0.2s;
									@include desktop {
										font-size: 22px;
										padding: 20px;
									}
								}
								>i{
									flex-grow: 0;
									flex-shrink: 0;
									display: flex;
									justify-content: center;
									align-items: center;
									padding: 15px;
									background-color: rgba(#000, 0.1);
									transition: 0.2s;
									cursor: pointer;
									@include desktop {
										background-color: transparent;
									}
									&:before{
										content: "\f078";
										@include desktop {
											content: "\f054";
										}
									}
								}
							}
							&.ativo > .label{
								>i{
									&:before{
										content: "\f077";
										@include desktop {
											content: "\f054";
										}
									}
								}
							}
							&.mouseover > .label{
								>a{
									color: $color_destaque;
								}
								>i{
									color: $color_destaque;
								}
							}
							>.wrapper-subcategorias{
								position: relative;
								display: none;
								box-shadow: inset 25px 0 25px -20px rgba(0,0,0,0.1);
								transition: 0.2s;
								@include desktop {
									display: none;
									flex-direction: column;
									position: absolute;
									top: 0;
									bottom: 0;
									left: 100%;
									width: 280px;
									padding-top: 160px;
								}
								@include mq-min(1360) {
									width: 440px;
								}
								.v{
									display: none;
									@include desktop {
										display: block;
										@include propriedade-fluida('margin-bottom', 20, 50, 1024, 1920);
										@include propriedade-fluida('padding-left', 0, 50, 1024, 1920);
										@include propriedade-fluida('padding-right', 0, 50, 1024, 1920);
									}
									.v2{
										display: block;
										@include desktop {
											padding-left: 20px;
											padding-right: 20px;
										}
										b, strong{
											@include propriedade-fluida("font-size", 30, 55, 1024, 1920);
										}
									}
								}
								>.subcategorias{
									height: 100%;
									overflow-y: auto;
									>ul{
										>li{
											>.label{
												@include desktop {
													@include propriedade-fluida('padding-left', 0, 50, 1024, 1920);
													@include propriedade-fluida('padding-right', 0, 50, 1024, 1920);
												}
												>a{
													padding-left: 25px;
													@include desktop {
														padding-left: 20px;
													}
												}
											}
											>.wrapper-subsubcategorias{
												position: relative;
												display: none;
												box-shadow: inset 25px 0 25px -20px rgba(0,0,0,0.1);
												transition: 0.2s;
												@include desktop {
													display: none;
													flex-direction: column;
													position: absolute;
													top: 0;
													bottom: 0;
													left: 100%;
													width: 280px;
													//padding-top: 160px;
												}
												@include mq-min(1360) {
													width: 440px;
												}
												.v{
													display: none;
													@include desktop {
														flex-shrink: 0;
														flex-grow: 0;
														display: block;
														@include propriedade-fluida('margin-bottom', 20, 50, 1024, 1920);
														@include propriedade-fluida('padding-left', 0, 50, 1024, 1920);
														@include propriedade-fluida('padding-right', 0, 50, 1024, 1920);
													}
													.detalhe{
														padding: 0 20px;
														@include desktop {
															//@include propriedade-fluida('margin-bottom', 20, 50, 1024, 1920);
														}
														.linha{
															@include propriedade-fluida('height', 225, 260, 1024, 1920);
															width: 100%;
															background-image: url(../imagens/linha1-1.png);
															background-position: top left;
															background-repeat: repeat-y;
														}
													}
												}
												>.subsubcategorias{
													//height: 100%;
													flex-shrink: 1;
													flex-grow: 1;
													overflow-y: auto;
													>ul{
														>li{
															>.label{
																@include desktop {
																	@include propriedade-fluida('padding-left', 0, 50, 1024, 1920);
																	@include propriedade-fluida('padding-right', 0, 50, 1024, 1920);
																}
																>a{
																	padding-left: 35px;
																	@include desktop {
																		padding-left: 20px;
																	}
																}
															}
														}
													}
												}
											}
											&.mouseover >.wrapper-subsubcategorias,
											&:hover >.wrapper-subsubcategorias{
												@include desktop {
													//display: block;
													display: flex;
												}
											}
										}
									}
								}
							}
							&.mouseover >.wrapper-subcategorias,
							&:hover >.wrapper-subcategorias{
								@include desktop {
									//display: block;
									display: flex;
								}
							}
						}
						>li{
							>.label{
								@include desktop {
									@include propriedade-fluida('padding-left', 20, 45, 1024, 1920);
									@include propriedade-fluida('padding-right', 20, 45, 1024, 1920);
								}
							}
						}
					}
				}
			}

			.wrapper-categorias,
			.wrapper-subcategorias,
			.wrapper-subsubcategorias{
				background-color: #323232;
			}
		}

		.pesquisa{
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;

			display: none;
			justify-content: center;
			align-items: center;

			background-color: rgba(#ffffff, 0.95);
			transition: 0.2s;
			z-index: 0;

			.fechar{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				cursor: pointer;
			}
			.center{
				position: relative;
				width: 100%;
				max-width: 600px;
				form{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 10px;
					input{
						flex-grow: 1;
						flex-shrink: 1;
						width: 1%;
						border-radius: 0;
						//border-right: none;
						padding: 0 20px;
						max-width: 100%;
						font-size: 18px;
						margin: 0;
						@include tablet {
							font-size: 22px;
						}
						@include desktop {
							height: 80px;
							line-height: 80px;
							font-size: 40px;
						}
					}
					button{
						flex-grow: 0;
						flex-shrink: 0;
						border-radius: 0;
						padding: 0 20px;
						font-size: 18px;
						margin: 0;
						@include tablet {
							font-size: 22px;
						}
						@include desktop {
							height: 80px;
							line-height: 80px;
							font-size: 40px;
						}
					}
				}
			}
		}
	}

	&.fixed{
		background-color: #323232;
		box-shadow: 0 0 8px rgba(#000, 0.5);
		.header-blocos{
			height: 50px;
			.logo{
				max-width: 80px;
			}
		}
	}

	&.menu-ativo{
		background-color: rgba(#323232, 1);
		box-shadow: none;
		.header-blocos{
			height: 60px;
			@include desktop {
				height: 160px;
			}
			.btn-menu{
				>a{
					.barra{
						&.barra-1{
							top: 50%;
							margin-top: -2px;
							transform: rotate(45deg);
						}
						&.barra-2{
							left: 50%;
							right: 50%;
							opacity: 0;
						}
						&.barra-3{
							right: 0;
							top: 50%;
							margin-top: -2px;
							transform: rotate(-45deg);
						}
					}
				}
			}
			.logo{
				max-width: 80px;
				@include tablet {
					max-width: 120px;
				}
				@include desktop {
					max-width: 200px;
				}
			}
			.social{
				//
			}
			.btn-pesquisa{
				display: none;
			}
			.menu{
				display: block;
			}
		}
	}

	&.pesquisa-ativo{
		.header-blocos{
			.pesquisa{
				display: flex;
			}
		}
	}
}

body.escuro header{
	&.fixed{
		background-color: #ffffff;
	}
	&.menu-ativo{
		background-color: rgba(#ffffff, 1);
	}
	.header-blocos{
		.btn-menu{
			a{
				.barras{
					.barra{
						background-color: $color;
					}
				}
				&:hover .barras{
					.barra{
						background-color: darken($color, 20%);
					}
				}
			}
		}
		.social{
			a{
				color: $color;
				&:hover{
					color: darken($color, 20%);
				}
			}
		}
		.btn-pesquisa{
			a{
				color: $color;
				&:hover{
					color: darken($color, 20%);
				}
			}
		}
		.menu{
			.wrapper-categorias,
			.wrapper-subcategorias,
			.wrapper-subsubcategorias{
				background-color: #fafafa;
			}
		}
	}
}