*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
}

body{
	margin-left: 80px;
	margin-top: 80px;
	transition: margin-left 500ms;
}

header{
	width: 95% ;
	height: 80px;
	background: black;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0;
	z-index: 500;
}

.title_menu{
	color: white;
}
.icon__menu{
	width: 50px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateX(10px);
}

.icon__menu i{
	font-size: 20px;
	cursor: pointer;
	position: absolute;
	width: 20px;
}

.menu__side{
width: 80px;
height: 100%;
background: black;
position: fixed;
top: 0;
left: 0;
color: #ffffff;
font-size: 18px;
z-index: 300;
overflow: hidden;
overflow-y: scroll;
border-right: 20px solid #000000;
transition: all 500ms;
}

.menu__side::-webkit-scrollbar{
	display: none;

}

.menu__side::-webkit-scrollbar{
	display: none;
}

.menu__side{
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.name__page{
	display: block;
	margin-top: 0px;
	font-weight: 300;	
}

.name__page img{
	padding-top: 00px;
	right: 0px;
	z-index: 1500;
}
.name__page i{
	margin-right: 20px;
	width: 20px;
}
.name__page h4{
	margin-left: 15px;
	color: white;
}

.options__menu{
	padding: 20px 30px;
	position: absolute;
	top: 80px;
}

.options__menu a{
	color: #ffffffb2;
	cursor: default;
	display: block;
	position: relative;
	transition: color 300ms;
}

.options__menu a:hover{
	color: white;
}


.options__menu .option{
	padding: 10px 0px;
	display: flex;
	align-items: center;
	position: relative;
}

.options__menu .option i{
	margin-right:20px;	
	width: 20px;
	cursor: pointer;
	color: ffffffb2;
}

.options__menu .option img{
	margin-right:20px;	
	width: 20px;
	cursor: pointer;
	color: red;
}

.options__menu .option h5{
	font-weight: 350;
	cursor: pointer;
	text-transform: uppercase;
	color: white;
}

.sobre{
	width: 20px;
	height: 20px;
	background-image: url(images/envel_white.svg);
	margin-right: 20px;

	padding: 10px 0px;
	display: flex;
	align-items: center;
	position: relative;
}

path{
	fill: currentColor !important;
}
a.selected{
	color: #ba9955;
}

.selected:before{
	content:  '';
	width: 3px;
	height: 80%;
	background: #ba9955;
	position: absolute;
	top: 10%;
	left: -30px;
}

.logo_completo{
 	margin-right: 80px;
 	transition: 300ms;
}

/*classes para usar en javascript*/

.body_move{
	margin-left: 200px;
}

.menu__side_move{
	width: 200px;
}

@media screen and (max-width: 760px){
	.body_move{
		margin-left: 0px;
	}

	.menu__side_move{
		width: 80px;
		left: -80px;
	}

	header{
		width: 100%;
		display: flex;
		align-items: center;
	}

	.name__page img{
		display: inline-block;
		margin-right: 30px;
		
		width: 50%;
	}
	
}