/*===== varibles css===*/
:root{
	--header-height: 2.5rem !important;
	--nav-width: 100px !important;

	/*==== Colors === */
	--first-color: #4723D9 !important;
	--first-color-light: #AFA5D9 !important;
	--white-color: #F7F6FB !important;

	/* ==== Font and typography ====*/
	--body-font: 'Nunito', sans-serif !important;
	--normal-font-size: 1rem !important;

	/* ===== z index ==== */
	--z-fixed:9999 !important;
}

/*==== BASE === */
*,::before, ::after{
	box-sizing: border-box !important;
}

body{
	position: relative !important;
	/* margin: 5rem 0 0 0 !important;
	padding: 0 1rem !important;
	font-family: var(--body-font) !important;
	font-size: var(--normal-font-size) !important; */
	transition: .5s !important;
}

/*===== HEADER ==== */
.bknavheader1{
	width: 100%  !important;
	height: 2.5rem !important;
	max-height: 30px !important;
	position: fixed !important;
	top:0 !important;
	left: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 1rem !important;
	background-color: var(--white-color) !important;
	z-index: 101 !important;
	transition: .5s !important;
}

.bknavheaderToggle{
	color: var(--first-color) !important;
	font-size: 1.4rem !important;
	cursor: pointer !important;
}

.bknavheaderImage{
	width: 25px !important;
	height: 25px !important;
	display:flex !important;
	justify-content: center !important;
	border-radius: 50% !important;
	overflow: hidden !important;
}
.bknavheaderImage img{
	width: 40px !important;
}

.bknavhideHeaderImg{
	display: none !important;
}

/*==== Nav === */

.bknavnavbar1{
	background-blend-mode:multiply !important;
	opacity: .7 !important;
	position: fixed !important;
	top: 0 !important;
	left: -30% !important;
	width: calc(var(--nav-width) ) !important;
	height: 100vh !important;
	background-color: var(--first-color) !important;
	padding: .3rem 0.3rem 0 0 !important;
	transition: .7s !important;
	z-index: var(--z-fixed) !important;
	background-image: url('bg1.jpg') !important;

}

.bknavnav1{
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	overflow: hidden !important;
}

.bknavnav_logo, .bknavnav_link{

	display: grid !important;
	grid-template-columns: max-content max-content !important;
	align-items: center !important;
	column-gap: 1rem !important;
	padding: 0.5rem 0 .5rem 1.0rem !important;

}

.bknavnav_logo{
	margin-bottom: 1.2rem !important;
}

.bknavnav_logo_icon{
	font-size: 1.25rem !important;
	color:var(--white-color) !important;
}
.bknavnav_logo_name{
	color: var(--white-color) !important;
	font-weight: 700 !important;
}

.bknavnav_link{
	padding-top: 0.5rem  !important;
	position: relative !important;
	color: var(--first-color-light) !important;
	margin-bottom: 1rem !important;
	transition: .3s !important;
	text-shadow: black 1px 0px !important;
	opacity: 1  !important;
	text-decoration: none !important;
}

.bknavnav_link:hover{
	color: var(--white-color) !important;

}

.bknavnav_icon{
	font-size: 1.25rem !important;
}

/*show navbar movil*/
.bknavshow{
	left: 0 !important;
	width: calv(var(--nav-width) + 156px) !important;
	opacity: .95 !important;
}

.bknavbody_pd{padding-left: calc(var(--nav-width) + 130px) !important;}


/*active links*/

.bknavactive{
	color: var(--white-color) !important;
}

.bknavactive::before{
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	width: 2px !important;
	background-color: var(--white-color) !important;
}





/* ====== Media Queries ===*/
@media screen and (max-width: 586px){

	.bknavheaderImage img {
		width: 25px  !important;
		height: 25px  !important;
	}
}
@media screen and (min-width: 586px){
	#bknavnavu{
		flex-direction: row  !important;
	}

}
@media screen and (min-width: 768px){
body{
	margin-top: 1rem !important;
}

	/*.header{
		height: calc(1.5rem + 1rem) !important;
		padding: 0 2rem 0 calc(var(--nav-width) + 2rem) !important;
	}*/

	.bknavheaderImage{
		width: 25px !important;
		height: 25px !important;
	}
	.bknavheaderImage img {
		width: 25px !important;
	}
	.bknavnavbar1{
		
		padding: 1rem 1rem 0 0 !important;
	}


	/*show navbar desktop*/

	/*.show{
		width: calv(var(--nav-width) + 156px) !important;
	}
	/*.body_pd{
		padding-left: calc(var(--nav-width) + 188px)
	}*/
}