*{
	margin:0; /*margen*/
	padding:0;/*relleno*/
}

@font-face {
    font-family: 'kaushan_scriptregular';
    src: url('../fonts/kaushanscript-regular-webfont.eot');
    src: url('../fonts/kaushanscript-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kaushanscript-regular-webfont.woff') format('woff'),
         url('../fonts/kaushanscript-regular-webfont.ttf') format('truetype'),
         url('../fonts/kaushanscript-regular-webfont.svg#kaushan_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*aqui le decimos al cuerpo que la fuente es la anterior*/
body{
	background:#F6AA16;/*color del fondo*/
	color:#000;/*color de la fuente en este caso es blanco*/
	font-family: "kaushan_scriptregular",Arial, Helvetica, sans-serif;/*las fuentes seguras pueden ir sin comillas, las 
	fuentes no seguras como la de arriba debe de ir entre comillas ""*/
/*	font-size:32px;/*Tamaño de fuente global*/*/
	
	/*Tamaños de fuente
	16px  pixeles  = 12 pt puntos = 100% por eso es el mínimo = 1em
	1em es el ancho de la letra M mayúscula que es la letra más ancha*/
	}
	
header#cabecera{
		background:#FFF;
		border-radius:0.5em;/*propiedad que hace redondos los bordes de la caja*/
		color:#000;
		margin:0.5em auto;
		max-width: auto;   /*ancho máximo*/
		padding:0.25em;/*separación entre el contenido y el borde de la caja*/
		text-align:center;	
		}
	
	h1{
		color:#F60;
		margin:0.25em auto;/*arriba-abajo  lados auto es para centrar*/
		font-size:56px;
		text-align:center;
		text-shadow:5px 5px 10px rgba(128,128,128,05);
		}
		
header li{
		text-align:center;	
		list-style:none;
		}
		
	
#logo{
		width:54px;
		height:30px;;
		float:left;
		padding:0;
		border-radius:0.5em;
		list-style:none;
		}
		
#barra{
		background:#F6AA16;
		border-radius:0.5em;
		color:#000;
		margin:0.5em auto;
		max-width: auto;   /*ancho máximo*/
		padding:0.25em;
		text-align:center;
		margin-bottom:2px;
		box-shadow:5px 5px 10px rgba(128,128,128,05);
		}
		
			
	/*Maquetación*/
#contenedor{
		background:#fff;
		border-radius:0.5em;
		width:960px;
		margin:0 auto;
    	padding:1%;
		}
	
		/*Menu Principal*/
#menu{
		height:80px;
		border-bottom:4px solid #F6AA16;
		}
		
#menu ul{
		background:#ccc;
		list-style:none;
		display:block;
		float:right;
		margin:0;
		padding:8px;;
		width:574px;
		height:50px;
		float:right;
		padding-top:10px;
		}

#menu li{
		float:right;
		}
		
#menu li a{  /*---  La "a" se refiere a <a href="#"  ----*/
		line-height:40px;
		display:inline-block;
		padding:0 25px;/*ESpacios  arriba-abajo  costados*/
		border-right:4px solid #FFF;
		font-family:Arial, Helvetica, sans-serif;
		font-size:15px;
		color:#000;
		font-weight:bold;/*Negrita*/
		text-decoration:none;
		float:right;
		}

#menu li a:hover{  /*---  La "a" se refiere a <a href="#"  ----*/
		color:#FF0;
		}
		
#menuInvitado{
		height:80px;
		border-bottom:4px solid #F6AA16;
		}
		
#menuInvitado ul{
		background:#ccc;
		list-style:none;
		display:block;
		float:right;
		margin:0;
		padding:8px;;
		width:250px;
		height:50px;
		float:right;
		padding-top:10px;
		}

#menuInvitado li{
		float:right;
		}
		
#menuInvitado li a{  /*---  La "a" se refiere a <a href="#"  ----*/
		line-height:40px;
		display:inline-block;
		padding:0 25px;/*ESpacios  arriba-abajo  costados*/
		border-right:4px solid #FFF;
		font-family:Arial, Helvetica, sans-serif;
		font-size:15px;
		color:#000;
		font-weight:bold;/*Negrita*/
		text-decoration:none;
		float:right;
		}

#menu li a:hover{  /*---  La "a" se refiere a <a href="#"  ----*/
		color:#FF0;
		}
		
		/*CONTENIDO*/
		
#contenido{
	
	background:#fff;
	border-radius:0.5em;
	margin-top:10px;
	width:1280;
	margin:1 auto;
    padding:1%;
	min-height:200px;
	height:600px;
	
	}
		

								



/******************************************/
/***    DISEÑO PARA TABLETAS           ****/
/******************************************/
@media only screen and (max-width:768px){
	
#contenedor{
		width:96%;
    	padding:2%;
		}
	
		/*Menu Principal*/
#menu{
		height:80;
		border-bottom:4px solid #F6AA16;
	}
	
#menu ul{
		float:none;
		margin:0 auto;/*para que salga centrado*/
		padding-bottom:5px;
		}
		
#contenido{
	
	width:98%;
	padding:1%;

	
	}

	
}
/******************************************/
/***    DISEÑO PARA MOVILES 480        ****/
/******************************************/
@media only screen and (max-width:480px){
	body{
		width:98%;
		padding:1%;
				
		}
	
	
#contenedor{
			width:98%;
			padding:1%;
			height:210px;
						}	
						
#menu{
	width:98%;
		height:auto;
		border-bottom:none;
	}
	
#menu ul{
		display:block;
		width:96%;
		padding-top:0;
		background:#ccc;
		padding:0;
		
	}
#menu li{
float:right;
padding-bottom:1%;
width:100%;
	
	}
	
#menu li a{
float:none;
border-right:none;
width:98%;
padding:1%;
display:block;
background:#ccc;
padding-bottom:5px;
border-top:#FFF;
text-align:center;	

	}	
	
	
#menuInvitado{
	width:98%;
		height:auto;
		border-bottom:none;
	}
	
#menuInvitado ul{
		display:block;
		width:96%;
		padding-top:0;
		background:#ccc;
		padding:0;
		
	}
#menuInvitado li{
float:right;
padding-bottom:1%;
width:100%;
	
	}
	
#menuInvitado li a{
float:none;
border-right:none;
width:98%;
padding:1%;
display:block;
background:#ccc;
padding-bottom:5px;
border-top:#FFF;
text-align:center;	

	}	

	
	
	
}
/******************************************/
/***    DISEÑO PARA MOVILES 320        ****/
/******************************************/
@media only screen and (max-width:320px){
	
	#logo{
		display:none;
		}
	


}


/******************************************/
/***    DISEÑO PARA MOVILES 240        ****/
/******************************************/
@media only screen and (max-width:240px){
	

		
		
}