*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/*overflow: hidden;*/
}

header{
	height: 80px;
	width: 100%;
	background: rgba(0,0,1,1);
	color:#fff;
	display: flex;
	/*justify-content: flex-end;*/
	align-items: center;
	position: fixed;
	z-index: 100;
}

.contenedor1{
	display: flex;
	width: 50%;
	height: 100%;
	justify-content: flex-start;
	align-items: center;
}

.contenedor2{
	display: flex;
	width: 50%;
	height: 100%;
	justify-content: flex-end;
	align-items: center;
}


#btn-menu{
	display: none;
}

header label{
	font-size: 30px;
	cursor:pointer;
	display: none;
}

.contenedorPerfil1{
	display: none;
}

.contenedorPerfil2{
	display: block;

}

.menu ul{
	background: rgba(0,0,1,1);
	display: flex;
	list-style: none;
	font-size: 13px;

}

.menu ul ul {
	display: none;

}

.menu a {
	display: block;
	padding: 32px 8px;
	color:#fff;
	text-decoration: none;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-ms-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;*/
}
	.menu ul ul a{
		padding: 15px 18px;
	}

.divmenu{
	display: flex; 
	display: block;
	padding: 32px 9px;
	color:#fff;
	text-decoration: none;
	cursor:pointer;
}

.menu a:hover {
	background: rgba(0,0,0,0.4);
}

.menu .divmenu:hover {
	background: rgba(0,0,0,0.4);
}

.menu .salirDesktop{
	display: none;
}

#usuarioMobile{
		display: none;
}
.perfilnav{
	display: none;
}

.menu span {
	margin-left: 10px;
}

.menu ul li:hover ul {
	display: block;
	position: absolute;
	background: rgba(0,0,1,1);
}

.menu ul li:hover .icon-switch{
	animation: switchOn 0.9s forwards;

}

.menu ul li:hover .icon-key{
	animation: keyOn 0.9s forwards;

}

.menu ul li:hover .icon-home{
	animation: LedesmaTechOn 0.9s forwards;

}

.menu ul li:hover .username{
	animation: usernameOn 0.5s forwards;

}

.menu ul li:not(hover) .username{
	animation: usernameOff 0.6s forwards;

}

@-webkit-keyframes LedesmaTechOn {
	from { color: #fff; text-shadow: 0 0 9px #333; }
	to { color: #2196f3; text-shadow: 0 0 9px #2196f3; }
	
}

@-webkit-keyframes switchOn {
	from { color: #fff; text-shadow: 0 0 9px #333; }
	to { color: red; text-shadow: 0 0 9px red; }
	
}

@-webkit-keyframes keyOn {
	from { color: #fff; text-shadow: 0 0 9px #333; }
	to { color: yellow; text-shadow: 0 0 9px yellow; }
}

@-webkit-keyframes usernameOn {
	from { color: #fff; text-shadow: 0 0 8px #333; }
	to { color: white; text-shadow: 0 0 8px white; }
}	

@-webkit-keyframes usernameOff {
	from { color: white; text-shadow: 0 0 8px white; }
	to { color: #fff; text-shadow: 0 0 9px #333; }
}

@media screen and (max-width: 796px){
	.divmenu{
		padding: 15px 35px;
	}

	header label{
		display: block;
		padding-right: 15px;
	}

	.menu {
		position: fixed;
		top:80px;
		width: 200px;
		transform: translateX(100%);
		transition: all 0.5s;
		z-index: 99999999999;

	}

	.menu a {
	padding: 15px 35px;
}

	.menu ul{
		display: block;
		background: #555;
		height: 100vh;

	}
	.menu .salirDesktop{
		display: block;
	}

	.menu .usuarioDesktop{
		display: none;
	}

	#usuarioMobile{
		display: block;
	}
	.perfilnav{
		display: flex;
		background:rgba(0,0,0,0.7); 
		padding: 10px 5px; 
		justify-content: flex-end;
	}


	/* otra estrategia para poner el menú en bloque.
	.menu ul{
		flex-direction: column;
	}*/

	nav li a:hover{
		background-color: #434343; 
	}

	.menu ul li:hover ul{
		display:list-item;
		position: absolute;
		flex-direction: column;
		background: #555;
	}


	.menu>ul>li>ul li{
		position: relative;
		display: list-item;
		flex-direction: column;
		right:168px;
		top:-78px;
		z-index: 200;
		border-top: 1px solid rgba(0,57,104,1);
	}

	.menu>ul>li{
		position: relative;
	}

	.menu .divmenu span {
		position: absolute;
		right: 8px;		
	}

	#btn-menu:checked ~ .icon-menu{
		animation: LedesmaTechOn 1.6s forwards;
		/*This disign for Academic Software was created by Ledesma Tech S.A.S.*/
	}

	#btn-menu:not(:checked) ~ .icon-menu{
		animation: LedesmaTechOff 1s forwards;

	}



	.menu ul li:hover .icon-switch{
		animation: switchOn 0.15s forwards;

	}

	.menu ul li:hover .icon-key{
		animation: keyOn 0.15s forwards;
	}

	.menu ul li:hover .icon-home{
	animation: none;

	}

	/*@-webkit-keyframes greenPulse {
		from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
		50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
		to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
	}

	@-webkit-keyframes LedesmaTechOn {
		from { color: #fff; text-shadow: 0 0 9px #333; }
		to { color: #2196f3; text-shadow: 0 0 12px #2196f3; }
		
	}*/

	@-webkit-keyframes LedesmaTechOff {
		from { color: #2196f3; text-shadow: 0 0 12px #2196f3; }
		to { color: #fff; text-shadow: 0 0 9px #333; }
	}

	#btn-menu:checked ~ .menu{
		transform: translateX(0%);

	}

	.menu ul ul {
		/*background: rgba(0,0,0,0.8);*/
		position: absolute;
		width: 168px;
	}

	.menu ul ul a{
		padding: 8px 45px;
		background:rgba(0,0,0,0.95);
	}

}
@media screen and (max-width: 359px){
	.menu {
		top:80px;
		width: 170px;
	}
	.menu ul ul {
		width: 115px;

	}
	.menu>ul>li>ul li{
		flex-direction: column;
		right:115px;
		top:-78px;
		z-index: 200;
		border-top: 1px solid rgba(0,57,104,1);
	}
	.menu ul ul a{
		padding: 6px;
		background:rgba(0,0,0,0.8);
	}
}