.menu{
	position: absolute; /*no existe en el flujo y se coloca en el 0 0 de su padre */
	width: 100%;
	background: rgba(0, 0, 0, 0);
	padding: 0 100px;
	box-sizing: border-box; /*Para que cuando manod a flotar el nav, este no se salga de la imagen*/
	border-bottom: 1px solid rgba(0, 0, 0, 0);
	z-index:9999999999
}

.menu img{
	float: left;
	width: 84px;
}

nav{
	/*position: relative;*/
	float: right;
	margin-right: 10%;
}

@media (max-width: 768px) {
	.menu {
		display: none; /* Se oculta en pantallas pequeñas */
	}
	.logos{
		margin-top: -100%;
		/*display: none; /* Se oculta en pantallas pequeñas */
	}
}

nav ul{
	margin: 0;
	padding: 0;
	display: flex;
}

nav ul li{
	list-style: none;
}

nav ul li a{
	display: block;
	color:white;
	font-family: mazzard italic;;
	text-transform: uppercase;
	font-weight: bold;
	padding: 33px 20px;
	text-decoration: none;
}

nav ul li a:hover{
	background:rgb(255, 107, 59);
	color: #fff;
}

nav ul li ul{
	display: block;
	background: rgba(7, 7, 7, 0.595);
	/*border-bottom: 1px solid rgba(0,0,0,.5);*/
	min-width: 250px;
	position: absolute;
	/*margin-top: 1px;*/
	box-shadow: 0 2px 5px rgba(0,0,0,.5);
	opacity: 0;/*Es para que en el hover desaparesca rapidamente*/
	visibility: hidden;
	transition: .5s;
	transform: translatey(40px);

}
/*Esto es lo que hace que se desplegue al pasar el mouse*/
nav ul li:hover ul{
	opacity: 1;
	visibility: visible;
	transform: translatey(0);

}
/*Aquí estoy exprimentando */
nav ul li ul li div .despliegue
{
	display: block;
	background: rgba(7, 7, 7, 0.595);
	/*border-bottom: 1px solid rgba(0,0,0,.5);*/
	min-width: 250px;
	position: absolute;
	/*margin-top: 1px;*/
	box-shadow: 0 2px 5px rgba(0,0,0,.5);
	opacity: 0;/*Es para que en el hover desaparesca rapidamente*/
	visibility: hidden;
	transition: .5s;
	transform: translatey(40px);

}

div:hover .despliegue{
	margin-left: 90%;
	padding: 10%;
	margin-top: 10%;
	opacity: 1;
	visibility: visible;
	transform: translatey(0);
}
/*aquí termina la prueba*/
nav ul li ul a{
	padding: 10px;
}
.bingreso{
	margin-top: 1.5%;
	margin-left: 85%;
	position:relative;
	width: 15%;	
	z-index:9999999999;
	
}
.submenu {
	float: right;
	position: relative;
	margin-right: -90%;
	background: rgba(255, 0, 0, 0);
	border: none;
	font-size: 0px;	
	width: 0px;
	height: 0px;
}
.submenu:hover ul{
	width: 10px;
	height: 10px;
	font-size: 10px;
	background:rgb(255, 107, 59);
	color: #fff;
}



/*para el desplebable*/
 .botondesplegable {
    display: inline-block;
	color: #fff;   	
    text-align: center;
    padding: 12px 8px;
    text-decoration: none;
	z-index: 1;
  }
  
  .desplegable:hover .botondesplegable {
	background:rgb(255, 107, 59);
	color: #fff;
	
  }
  
  desplegable {
    display: inline-block;
  }
  
  .desplegable-content {
    display: none;
    position: absolute;
    background-color: rgba(7, 7, 7, 0.595);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(199, 73, 73, 0.2);
    z-index: 1;
	margin-left: 100%;
	margin-top: -16%;
  }
  
  .desplegable-content a {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .desplegable-content a:hover
   {
	background-color: rgb(255, 107, 59);
	text-decoration: underline;
    }
  
  .desplegable:hover .desplegable-content {
    display: block;
  }

/*Hacer el menú responsivo*/
  @media only screen and (min-width: 360px) and (max-width: 640px)
  {
	.menu{
		position: absolute; /*no existe en el flujo y se coloca en el 0 0 de su padre */
		width: 100%;
		background: rgba(0, 0, 0, 0);
		padding: 0 30px;
		box-sizing: border-box; /*Para que cuando manod a flotar el nav, este no se salga de la imagen*/
		border-bottom: 1px solid rgba(0, 0, 0, 0);
		z-index:9999999999
	}
	
	.menu img{
		display: none;
		
	}
	
	nav{
		/*position: relative;*/
		float: left;
		
	}
	
	nav ul{
		margin: 0;
		padding: 0;
		display: flex;
	}
	
	nav ul li{
		list-style: none;
	}
	
	nav ul li a{
		display: block;
		color:white;
		font-family: mazzard italic;;
		text-transform: uppercase;
		font-weight: bold;
		padding: 33px 4px;
		text-decoration: none;
	}
	
	nav ul li a:hover{
		background:rgb(255, 107, 59);
		color: #fff;
	}
	
	nav ul li ul{
		display: block;
		background: rgba(7, 7, 7, 0.595);
		/*border-bottom: 1px solid rgba(0,0,0,.5);*/
		min-width: 50px;
		position: absolute;
		/*margin-top: 1px;*/
		box-shadow: 0 2px 5px rgba(0,0,0,.5);
		opacity: 0;/*Es para que en el hover desaparesca rapidamente*/
		visibility: hidden;
		transition: .5s;
		transform: translatey(40px);
	
	}
	/*Esto es lo que hace que se desplegue al pasar el mouse*/
	nav ul li:hover ul{
		opacity: 1;
		visibility: visible;
		transform: translatey(0);
	
	}
	/*Aquí estoy exprimentando */
	nav ul li ul li div .despliegue
	{
		display: block;
		background: rgba(7, 7, 7, 0.595);
		/*border-bottom: 1px solid rgba(0,0,0,.5);*/
		min-width: 250px;
		position: absolute;
		/*margin-top: 1px;*/
		box-shadow: 0 2px 5px rgba(0,0,0,.5);
		opacity: 0;/*Es para que en el hover desaparesca rapidamente*/
		visibility: hidden;
		transition: .5s;
		transform: translatey(40px);
	
	}
	
	div:hover .despliegue{
		margin-left: 90%;
		padding: 10%;
		margin-top: 10%;
		opacity: 1;
		visibility: visible;
		transform: translatey(0);
	}
	/*aquí termina la prueba*/
	nav ul li ul a{
		padding: 10px;
	}
	.bingreso{
		margin-top: 1.5%;
		margin-left: 85%;
		position:relative;
		width: 15%;	
		z-index:9999999999;
		
	}
	.submenu {
		float: right;
		position: relative;
		margin-right: -90%;
		background: rgba(255, 0, 0, 0);
		border: none;
		font-size: 0px;	
		width: 0px;
		height: 0px;
	}
	.submenu:hover ul{
		width: 10px;
		height: 10px;
		font-size: 10px;
		background:rgb(255, 107, 59);
		color: #fff;
	}
	
	
	
	/*para el desplebable*/
	 .botondesplegable {
		display: inline-block;
		color: #fff;   	
		text-align: center;
		padding: 12px 8px;
		text-decoration: none;
		z-index: 1;
	  }
	  
	  .desplegable:hover .botondesplegable {
		background:rgb(255, 107, 59);
		color: #fff;
		
	  }
	  
	  desplegable {
		display: inline-block;
	  }
	  
	  .desplegable-content {
		display: none;
		position: absolute;
		background-color: rgba(7, 7, 7, 0.595);
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(199, 73, 73, 0.2);
		z-index: 1;
		margin-left: 100%;
		margin-top: -16%;
	  }
	  
	  .desplegable-content a {
		color: rgb(255, 255, 255);
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
	  }
	  
	  .desplegable-content a:hover
	   {
		background-color: rgb(255, 107, 59);
		text-decoration: underline;
		}
	  
	  .desplegable:hover .desplegable-content {
		display: block;
	  }


	}

  
@media only screen and (max-width: 767px)
{
 
}


footer{
  position: relative;
  margin-top: -6%;
  display: block;
  
}