@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

/* Setup inicial */

body {
	padding-top: 88px;
}

.header-menu a,
.wrapper-menu a {
	text-decoration: none !important;
}

.wrapper-menu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	z-index: 1000;
}

.wrapper-box {
	position: fixed;
	width: 100%;
	z-index: 11;
	top: 0;
}

/* Cabeçalho */

.wrapper-header {
	background-color: #17a2b8;
}

.header-menu {
	display: flex !important;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	width: min(90%, 1150px);
	font-family: 'Open Sans', sans-serif;
}
/* 
.wrapper-menu {
	flex: 2;
} */

.header-menu .box-logo {
	display: flex;
	align-items: center;
	flex: 2;
}

.header-menu .box-logo .logo {
	color: #fff;
}

.header-menu .box-logo span {
	position: relative;
	top: 2px;
	font-size: clamp(.6rem, 2vw, .8rem);
	color: rgba(255, 255, 255, .8);
}

/* Menu principal */

.wrapper-menu ul {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	margin: 0 auto;
}

.wrapper-menu ul li a {
	color: #fff;
	font-size: clamp(.75rem, 2vw, .8rem);
	font-weight: bold;
	padding: .8em;
}

.wrapper-menu ul li {
	position: relative;
}

.wrapper-menu ul li ul {
	position: absolute;
	top: 25px;
	left: 15px;
	width: 270px;
	display: none;
	z-index: 1000;
	background-color: #fff;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
}

.wrapper-menu ul li ul li ul {
	top: 0;
	background-color: rgb(238, 237, 237);
	left: 100%;
	right: 0;
}

.wrapper-menu ul li:hover>ul {
	display: initial;
}

.wrapper-menu ul li ul li {
	padding: .5em;
}


.wrapper-menu ul li ul li a {
	transition: 1s all;
	color: black;
	font-weight: normal;
}

.wrapper-menu ul li ul li a::after {
	border: none;
}

.wrapper-menu ul li ul li:hover a {
	padding-left: 1.5em;
}

/* Botão toggle */

#search-span,
#search-wrapper,
#menu-bar,
.icon-collapse label {
	display: none;
}

.icon-collapse label {
	color: #fff;
	cursor: pointer;
}

/* Barra de pesquisa */

#menu-bar,
.icon-collapse label {
	display: none;
}

/* Caixa de pesquisa */

.header-menu .search-box {
	border-radius: 10px;
	height: 30px;
	text-align: center;
	color: #fff !important;
	display: flex;
}

.header-menu .search-txt {
	border: none !important;
	background: none;
	outline: none;
	padding: 0 !important;
	font-size: 12px !important;
	transition: 0.4s !important;
	line-height: 40px !important;
	width: 0 !important;
}

.header-menu .search-txt::placeholder {
	color: #fff;
	opacity: .75;
}

.header-menu .search-btn {
	border-radius: 10px;
	height: 30px;
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 1s;
}

.header-menu .search-box:hover {
	background-color: #067283b9 !important;
}

.header-menu .search-box:hover>.search-txt {
	z-index: 1000 !important;
	width: 100px !important;
	padding: 0 6px !important;
	color: #fff !important;
}

.header-menu .search-box .search-txt:focus {
	box-shadow: none !important;
}

.header-menu .search-box:hover>.search-btn {
	background-color: #067283b9 !important;
}



/* Dispositivos móveis */

@media screen and (max-width:1060px) {

	/* Para evitar cliques duplos, ao inves de hover ser focus */

	.wrapper-menu ul li:hover>ul {
		display: none;
	}

	.wrapper-menu ul li:focus-within>ul,
	.wrapper-menu ul li ul li:focus-within>ul {
		display: initial;
	}


	/* Tira setup de rolagem fixa */

	body {
		padding-top: 0;
	}

	.wrapper-box {
		position: static;
	}

	/* Retirar menu fixo */

	#barra-brasil,
	.header-menu,
	.wrapper-menu {
		position: static;
	}

	.header-menu {
		display: block !important;
		width: 100%;
	}

	/* Itens do menu */

	.header-menu .box-logo {
		justify-content: space-around;
		width: 100%;
	}

	.header-menu .box-logo span {
		font-weight: bold;
	}

	.wrapper-menu,
	.box-icons .icon-box,
	.wrapper-menu ul li ul {
		display: none;
	}

	.header-menu .box-icons {
		width: auto;
	}

	.wrapper-menu ul li,
	.wrapper-menu ul li ul,
	.wrapper-menu ul li ul li ul {
		width: 100%;
	}

	.wrapper-menu ul li ul,
	.wrapper-menu ul li ul li ul  {
		position: relative;
		border: none;
		top: 0;
		left: 0;
		width: 0;
	}

	.wrapper-menu {
		flex: 1;
	}

	#search-wrapper,
	.icon-collapse label {
		display: initial;
	}

	#search-wrapper {
		padding: 1em;
		display: block;
	}

	.wrapper-menu ul li a {
		display: flex;
		justify-content: space-between;
	}

	.wrapper-menu ul li+li {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.wrapper-menu ul li ul li {
		background-color: #eee;
	}

	.wrapper-menu ul li ul li ul li {
		background-color: lightgrey;
	}

	/* Barra de pesquisa */

	#search-span {
		display: inline;
	}

	#search-wrapper label {
		opacity: .5;
	}

	#search-wrapper input {
		outline: none;
		border: none;
		display: inline !important;
		width: auto !important;
		background-color: #17a2b8;
		color: #fff;
	}

	#search-wrapper input:focus {
		border: none !important;
		box-shadow: none !important;
	}

	#search-wrapper label,
	#search-wrapper input::placeholder {
		color: rgba(255, 255, 255, .75);
	}

}