#menu{
	background-color:#FFEFD5;
	}
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	background-color: #FFEFD5;
}

/*Crea la listahorizontal con espacio*/
li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

/* Estilos para los link */
li a {
	display:block;
	min-width:100px;
	height: 40px;
	padding-left:5px;
	padding-bottom:5px;
	text-align: left;
	line-height: 40px;
	font-family: Helvetica;
	font-size:.9rem;
	font-weight:600;	
	color: #fff;
	background: #2f3036;
	text-decoration: none;
    transition:all 0.5s ease;
}

/* estados hover de los link */
li:hover a {
	background: #19c589;
}

/* estilos del dropdown */
li:hover ul a {
	background: yellow;
	color: #2f3036;
	height: 25px;
	line-height: 25px;
	padding-bottom: 10px;
}

/* estilos del estado hover del dropdown*/
li:hover ul a:hover {
	background: red;
	color: #fff;
}

/*Oculta el dropdown*/
li ul {
	display: none;
}

/* Pone el dropdown en vertical */
li ul li {
	display: block;
	float: none;
}

/* Previene el texto wrapping */
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0px 15px;}

/* Aparace el dropdown en hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
	background:transparent;
}

/* Estilo de .muestra-menu */
.show-menu {
	font-size:1rem;
	font-weight:600;
	font-family:Helvetica;
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: left;
	padding: 10px 0;
	display: none;
  transition:all 0.5s ease;
}


/*Oculta el checkbox*/
input[type=checkbox]{
    display: none;
}

/* muestra el menu cuando el checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
.opciones{
	min-width:360px;
		}
		
.elframe{
	margin: 0;
	padding:0;
	border:0;
	background-color:transparent;
	min-height: 420px;
	}
.opciones{
	visibility: 1;
		}
		
/* estilos responsive */

@media screen and (max-width : 780px){
	ul {
		position: static;
		display: none;
	}
	li {
		margin-bottom: 2px;
	}
	ul li, li a {
		width: 70%;
	}
	.show-menu {
		display:block;
	}
}