*{
	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:#fff;/*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:20px;/*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*/
	}
	
	h1{
		color:#F60;
		font-size:50px;
		margin:0.25em auto;/*arriba-abajo  lados auto es para centrar*/
		text-align:center;
		text-shadow:5px 5px 10px rgba(128,128,128,05);
		padding:5px;
		list-style:none;
		}
		
header{
		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;	
		}
		
header li{
		text-align:center;	
		list-style:none;
		}
		
	
#logo{
		width:54px;
		height:30px;;
		float:left;
		padding:3px;
		border-radius:0.5em;
		list-style:none;
		}
		
#barra{
/*		background:#F6AA16;
/**		background:#808080;*/
background:#151515;
		border-radius:0.5em;
		color:#000;
		margin:0.5em auto;
		max-width: auto;   /*ancho máximo*/
		padding:0.25em;
		text-align:center;
		margin-bottom:20px;
		box-shadow:5px 5px 10px rgba(128,128,128,05);
		}		
			
										/*Maquetación*/

			
section#contenedor{
		background:#fff;
		margin:0.5em auto;
		margin-top:60px;
		max-width:960px;
	
		padding:10px;
		text-align:center;
		}
					
section#principal {
/*		background:#F6AA16;
*/		background:#e6e6e6;
		border-radius:0.5em;
		display:inline-block;
		font-family:Arial, Helvetica, sans-serif;
		font-size:20px;
		margin:0.25em auto;
		max-width:900px;
		min-height:100px;
		height:240px;
		padding:10px;
		text-align:left;
		vertical-align:top;
		width:65%;
		}
section#principal ul{
		padding:30px;
		font-size:20px;
		}
						
article{
/*		background:#F6AA16;
*/		background:#e6e6e6;
		border-radius:0.5em;
		display:inline-block;
		font-size:20px;
		margin:0.25em auto;
		max-width:960px;
		min-height:100px;
		padding:10px;
		text-align:left;
		vertical-align:top;
		width:30%;
		height:160px;
		}
							
																	#pass ul{
		list-style:none;
		display:block;
		font-size:20px;
		float:none;
		padding:10px;
		margin:0;
		text-align:center;
		width:250px;
		}
		
footer{
/*		background:#F6AA16;
/*		background:#808080;*/
background:#151515;
		border-radius:0.5em;
		color:#000;
		margin:0.5em auto;
		max-width: auto;   /*ancho máximo*/
		padding:0.25em;
		text-align:center;
		margin-bottom:20px;			
		}
							


					

								



/******************************************/
/***    DISEÑO PARA TABLETAS           ****/
/******************************************/
@media only screen and (max-width:768px){
	
section#principal {
		
		display:block;
		font-family:Arial, Helvetica, sans-serif;
		font-size:17px;
		max-width:none;
		min-height:100px;
		height:240px;
		padding:10px;
		text-align:left;
		vertical-align:top;
		width:50%;
		}
section#principal ul{
		padding:30px;
		font-size:17px;
		}
	
article{
		display:block;
		max-height:100px;
		width:100%;
		}

#pass ul{
		list-style:none;
		display:block;
		font-size:17px;
		float:none;
		padding:10px;
		margin:0;
		text-align:left;
		width:250px;
		height:50px;
		}
	

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

section#principal {
		font-size:13px;
		height:210px;
		width:60%;
		}
section#principal ul{
		font-size:13px;
		}
	
article{
		width:100%;
		}


	
}
/******************************************/
/***    DISEÑO PARA MOVILES 320        ****/
/******************************************/
@media only screen and (max-width:320px){
	
#logo{
display:none;
		}
	
section#contenedor{
		margin-top:5px;
		}
	
section#principal {
		font-size:13px;
		height:auto;
		width:75%;
		}
section#principal ul{
		padding:8px;
		font-size:13px;
		text-align:left;
		}
	
article{
		width:100%;
		height:auto;
		}

#pass ul{
		font-size:15px;
		display:inline-block;
		padding:0;
		margin:0;
		width:120px;
		height:auto;
		}


}


/******************************************/
/***    DISEÑO PARA MOVILES 240        ****/
/******************************************/
@media only screen and (max-width:240px){
	
		
#logo{
display:none;
		}
	
section#contenedor{
		margin-top:5px;
		}
	
section#principal {
		font-size:13px;
		height:auto;
		width:75%;
		}
section#principal ul{
		padding:8px;
		font-size:13px;
		text-align:left;
		}
	
article{
		width:100%;
		height:auto;
		}

#pass ul{
		font-size:15px;
		display:inline-block;
		padding:0;
		margin:0;
		width:120px;
		height:auto;
		}


}