body.offcanvas-active{
	overflow:hidden;
}

#btn_menu{
	position: fixed;
	left:5%;
	top:3%;
	width: 50px;
	height: 50px;
	color:white;
	border-radius:50px; 
}

.opcoes_menu{
	margin-left: 5%;
	margin-top: 5px;
}

.logo_menu{
	margin-left: 2%;
}

.opcoes_menu ul{
	
	display: block;
}

.opcoes_menu ul li{
	margin-top: 20px;
}

.opcoes_menu ul li a{
	font-size: 1em;
	color:#293150;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(230,230,230,1.0)!important;
}

.offcanvas-header{ 
	display:none; 
	position: fixed;
	top:10px;
	right: 10px;
}

.screen-darken{
	height: 100%;
	width:0%;
	z-index: 30;
	position: fixed;
	top: 0;
	right: 0;
	opacity:0;
	visibility:hidden;
	background-color: rgba(34, 34, 34, 0.6);
	transition:opacity .2s linear, visibility 0.2s, width 2s ease-in;
}

.screen-darken.active{
	z-index:10; 
	transition:opacity .3s ease, width 0s;
    opacity:1;
    width:100%;
    visibility:visible;
}

/* ============ mobile view ============ */

@media screen and (max-width: 380px) and (max-height: 670px) {

	.nav-link{
		font-size: 1em;
	}

}

@media all and (min-width: 1100px) {
	.opcoes_menu ul li a{
		font-size: 1em;
		
	}
}

@media all and (max-width: 1900px) {
	
	.offcanvas-header{ display:block; }

	.mobile-offcanvas{
		visibility: hidden;
		transform:translateX(-100%);
	    border-radius:0px 20px 20px 0px; 
		display:block;
	    position: fixed;
	    top: 0; left:0;
	    height: 100%;
	    z-index: 1200;
	    width:50%;
	    overflow-x: hidden;
	    transition: visibility .3s ease-in-out, transform .3s ease-in-out;
	}

	.mobile-offcanvas.show{
		visibility: visible;
    	transform: translateX(0);
	}
	.mobile-offcanvas .container, .mobile-offcanvas .container-fluid{
		display: block;
	}

	.opcoes_menu ul li a{
		font-size: 1em;
		color:#293150;
	}

}