* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/******NAVBAR IN********/
.navbar {
	background-color: var(--color1) !important;
}
nav.navbar div.container .font-nav{
    color: var(--color5) !important;
    font-family: "font-sb";
    font-size: 16px;
}

nav.navbar div.container .button3 {
    background-color: var(--color2);
    font-family: 'font-sb';
    color: white !important;
    padding: 0.50rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
}

/*********************/
div.app {
	display: flex;
	min-height: 100vh;
}

.menu-toggle {
	display: none;
	position: relative;
  
	/*right: 2rem;*/
	width: 60px;
	height: 60px;
	border-radius: 99px;
    /*border: 1px solid  gray ;
	background-color: white;*/
	cursor: pointer;
}

.icono {
	top: calc(50% - 2px);
	color: var(--color1);
	/*position: relative;
	top: calc(50% - 2px);
	left: 50%;
	transform: translate(-50%, -50%);*/
	width: 32px;
    
}
 
.sidebar {
	flex: 1 1 0;
	max-width: 270px;
	padding: 2rem 1rem;
	background-color: var(--color5);
}

.sidebar h3 {
	color: #cecaca;
	font-size: 0.75rem;
	text-transform: uppercase;
	margin-bottom: 1.5em;

}

.sidebar .menu {
	margin: 0 -1rem;
}

.sidebar .menu .menu-item {
	display: block;
	padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.50em ;
    padding-bottom: 0.50em;
	color: var(--color4);
	text-decoration: none;
	transition: 0.2s linear;
    font-size: 15px;
    font-family: "font-r";
}

.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
	color: var(--color1);
	border-right: 5px solid var(--color1);
    font-family: "font-b";
}

.sidebar .menu .menu-item:hover {
	border-right: 5px solid var(--color1);
}
div.app aside.sidebar nav.menu ul a {
    padding-left: 25px;
	color: #6b6b6b;
    text-decoration: none;
    font-size: 14px;
    list-style-type: none;

}
.sidebar .closed{
    padding: 0;
    margin: 0;
}
.sidebar .closed .btnToggle{
	transform: translateX(14rem);
	color:var(--color4);
}
.content {
	flex: 1 1 0;
	padding: 2rem;
}

.content h1 {
	color: var(--color4);
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.content p {
	color: #707793;
}

@media (max-width: 1024px) {
	.sidebar {
		max-width: 200px;
	}
}

@media (max-width: 768px) {
	.menu-toggle {
		display: block;
	}
	.content {
		padding-top: 3rem;
	}
	.sidebar {
		position: absolute;
		top: 0;
		left: -300px;
		height: 100vh;
		width: 100%;
		max-width: 300px;
		transition: 0.2s linear;
	}

	.sidebar.is-active {
		left: 0;
	}
}
div.app  .fixed-bar {
	bottom: 0;
	height: 40px;
	padding: 8px 0 8px;
	position: fixed;
	width: 100%;
	z-index: 5000;
    background-color: var(--color1);
    color: white;
}