#termo {
	background-color: #00000099;
	padding: 3em 12%;
	box-sizing: border-box;
	transform: translateY(100%);
	position: fixed;
	bottom: 0px;
	width: 100%;
	z-index:100000;
	transition: transform ease .5s;
	display: block;
    top: 0;
    backdrop-filter: blur(0px);
	display: flex;
	align-items: end;
}

#termo .termoBox {
	background: #fff;
    padding: 2em 10%;
	color: #000;
    display: flex;
    gap: 2em 5em;
    align-items: center;
	width: 100%;
    justify-content: space-between;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

@media (width < 900px) {
	#termo .termoBox {
		flex-direction: column;
	}
}

#termo.showBar {
	transform: translateY(0%);
	/* backdrop-filter: blur(4px); */
}

#termo a{
	font-weight: 600;
	color: #444;
	text-decoration: underline;
}

#termo a:hover{
	color: #000;
}

#btOk {
	background-color: #000;
	font-size: .9em;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	border-radius: 4px;
	padding: 1em 3em;
}
#btOk:hover {
	background-color: var(--color-theme);
}