html {
	scroll-behavior: smooth;
}

/* --- menu de cabeçalho --- */
    
#header {
	position: fixed;
    top: 0px;
    background-color: var(--theme-color-1);
    width: 100%;
    
    -webkit-box-shadow: 0px 0px 20px 16px rgb(0 0 0 / 60%);
    -moz-box-shadow: 0px 0px 20px 16px rgb(0 0 0 / 60%);
    box-shadow: 0px 0px 20px 16px rgb(0 0 0 / 60%);
  
    z-index: 9;
}
        
#div-container-menu-superior {
    display: flex;
    justify-content: center;
}

.header-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
    max-width: 1075px;
}

.header-menu .header-logo {
	display: flex;
	margin-right: 20px;
}

.header-menu .header-logo svg {
	height: auto;
    min-width: 80px;
    max-width: 80px;
}

.header-menu .header-menu-right {
	display: flex;
    align-items: center;
}

.header-menu .menu-item {
	position: relative;
	color: var(--theme-color-4);
	margin-right: 20px;
}

.header-menu .menu-item .label {
	font-family: 'Montserrat Regular';
    font-size: 22px;
	font-style: normal;
	font-weight: normal;
	-webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */
    transition: color 1s; /* For modern browsers */
	cursor: pointer;
}

.header-menu .menu-item:hover {
	color: var(--theme-color-2);
}
	
.header-menu .menu-item::before {
  	content: "";
  	width: 100%;
  	height: 4px;
  	position: absolute;
  	left: 0;
  	bottom: 0;
  	transition: 0.5s transform ease;
  	transform: scale3d(0,1,1);
  	transform-origin: 0 50%;
}

.header-menu .menu-item:hover::before {
  	transform: scale3d(1,1,1);
}

.header-menu .menu-item::before {
  	transform-origin: 50% 50%;
  	background: var(--theme-color-2);
}

.header-menu .button-cadastrar {
	background-color: var(--theme-color-3);
    color: var(--theme-color-4);
	box-shadow: inset 0 0 0 2px var(--theme-color-4);
}

.header-menu .button-login {
	background-color: var(--theme-color-4);
    color: var(--theme-color-2);
}

.header-menu .icone-menu {
	display: none;
	margin-left: 30px;
}

.header-menu .icone-menu svg {
	min-height: 40px;
	max-height: 40px;
	min-width: 40px;
	max-width: 40px;
}

div.background-layer {
	display: none;
	width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999;
    background:rgba(219,214,148,0.16);
	backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
}	

/* ------------------ menu mobile ------------------ */

#block-header-user-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);

    height: 100%;
    width: 100%;
	max-width: 350px;
    padding-top: 40px;

	filter: drop-shadow(5px 0px 3.06px rgba(60, 85, 12, 0.35));

    z-index: 9;
}

#block-header-user-menu .container-logotipo {
   	padding-right: 15px;
}

#block-header-user-menu .container-logotipo svg {
	max-height: 100px;
	max-width: 100px;
}

#block-header-user-menu .menu-usuario {
	padding: 0px;
}

#block-header-user-menu .menu-usuario-footer {
	display: flex;
	flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding-left: 0px;
    padding-right: 10px;
    padding-bottom: 10px;
}

#block-header-user-menu .button-cadastrar {
	background-color: var(--theme-color-3);
    color: var(--theme-color-4);
	box-shadow: inset 0 0 0 2px var(--theme-color-4);
    padding: 5px;
    padding-top: 6px;
    padding-left: 20px;
    padding-right: 20px;
    
    margin-bottom: 15px;
    
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    
    cursor: pointer;
}

#block-header-user-menu .button-cadastrar {
	white-space: nowrap;
}

#block-header-user-menu .button-login {
    background-color: var(--theme-color-4);
	color: var(--theme-color-5);

    padding: 5px;
    padding-top: 6px;
    padding-left: 20px;
    padding-right: 20px;
    
    margin-left: 10px;
    margin-bottom: 15px;
    
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    
    cursor: pointer;
}

#block-header-user-menu .botao-fechar {
	position: absolute;
    right: 20px;
    top: 20px;
	display: flex;
    justify-content: flex-end;
    cursor: pointer;
}

#block-header-user-menu .menu-item {
    display: flex;
    align-items: center;
    flex-direction: column;
	margin-top: 60px;
}

#block-header-user-menu .menu-item .label {
    display: flex;
	font-size: 24px;
	padding-top: 2px;
}

#block-header-user-menu .menu-item > svg {
	min-height: 32px;
	min-width: 32px;
	max-height: 32px;
    max-width: 32px;
}

#block-header-user-menu .menu-item.planos {
	margin-bottom: 60px;
}

#block-header-user-menu ul {
	padding: 0px;
	list-style: none;	
}

#block-header-user-menu ul.menu-usuario {
	font-family: Montserrat Regular;
	height: 100%;
	width: 100%;
   	margin-top: 20px;
   	margin-bottom: 30px;
	overflow-x: hidden;
    overflow-y: auto;
}

/* pinta as barras de rolagem no desktop */

#block-header-user-menu ul.menu-usuario {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-color-4);
}

/* Works on Chrome, Edge, and Safari */
#block-header-user-menu ul.menu-usuario::-webkit-scrollbar {
  width: 12px;
}

#block-header-user-menu ul.menu-usuario::-webkit-scrollbar-track {
  background: transparent;
}

#block-header-user-menu ul.menu-usuario::-webkit-scrollbar-thumb {
  background-color: var(--theme-color-4);
  border-radius: 20px;
}

#block-header-user-menu .sub-menu {
    background-color: #0000001c;
    width: 100%;
	margin-top: 20px;
	padding-top: 10px;
    padding-bottom: 10px;
}

#block-header-user-menu .sub-menu-item {
	display: flex;
    align-items: flex-start;	
	
	font-weight: normal;
    font-size: 22px;
    line-height: 22px;

    padding: 10px;
    padding-left: 30px;

    cursor: pointer;	
}

#block-header-user-menu .sub-menu-item .right-arrow {
    border: 0px;
    border-top: 3px solid var(--theme-color-4);
    border-right: 3px solid var(--theme-color-4);
	min-height: 10px;
    max-height: 10px;
    min-width: 10px;
    max-width: 10px;
    margin-top: 5px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    transform: rotate(45deg);
}

#block-header-user-menu .sub-menu-item .label {
	display: block;
	font-family: 'Montserrat Light';
    font-size: 20px;
    font-weight: normal;
	text-align: left;
	padding: 0px;
	margin-left: 10px;
}

#block-header-user-menu .sub-menu-item:hover {
	-webkit-text-shadow: 1px 1px 4px #fff;
    -moz-text-shadow: 1px 1px 4px #fff;
    text-shadow: 1px 1px 4px #fff;    
}

#block-header-user-menu .sub-menu-item:hover .right-arrow {
	-webkit-filter: drop-shadow(0px 0px 2px var(--theme-color-4));
    filter: drop-shadow(0px 0px 2px var(--theme-color-4));
}

/* ------------------------------ */

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

	.header-menu .menu-item {
		display: none;
	}

	.header-menu .icone-menu {
		display: flex;
	}

}

/* ------------------------------ */

@media only screen and (max-width: 650px) {
	
	.header-menu .button-cadastrar {
		display: none;
	}

	.header-menu .button-login {
		display: none;
	}
	
	#block-header-user-menu {
		min-width: 100%;
	}

	#block-header-user-menu .push-button {
		padding-top: 4px;
	}	

	#block-header-user-menu .push-button .label {
	    font-size: 20px;
	    font-weight: bold;
	}	

}