/*smartphones (portrait and landscape)*/
@media only screen and (min-width : 320px) and (max-width : 480px) {  
/* Styles */ 
	
	.container{
		width:300px;
		height:auto;	
	}
	
	.container img{
		width:300px;
		position:relative;
		box-shadow:0px 5px 5px gray;
		
	}
	.container .toptext{
		font-size:18px;
		top:20px;
		left:20px;
	}
	.container .middletext{
		font-size:28px;
		top:50px;
		left:20px;
	}
	.container .bottomtext{
		font-size:18px;
		top:100px;
		left:20px;
	}
	.container .bottom2text{
		font-size:18px;
		top:125px;
		left:20px;
	}
	.logo img{
		width:35px;
	}
	.container .logo {
		position:absolute;
		width:15px;
		top:140px;
		left:250px;
	}
	
	nav ul{
		list-style: none; /* Se elimina la viñeta */
		display: block;
	}
		
	nav ul li{
		float: left; /* Se alinean los botones */
		margin: 2px 5px; /* Distancia de separación entre botones
	}
 
	nav ul li a, nav ul li a:link{
		text-decoration: none; /* Se quita el hipervínculo */
		font-family: Raleway;
		font-size: 14px; /* Tamaño del texto del menú */
		color: gray; /* Color del texto */
		padding: 3px 10px; /* Ancho y alto de los botones */
		cursor: pointer;
	}

	h1{
		font:20px Poppins, sans-serif;
		color:#FF6633;
		float:left;
		text-shadow: 2px 2px 3px gray;
	}
	h5{
		font-family: Raleway, sans-serif;
		color:gray;
		font-size: 28px;
		text-align: center;	
	}
	h2{
		font: 20px poppins, sans-serif;
		color:gray;
		float:left;
	}
	h3{
		float:left;
		margin-right: 10px;
		font: bold italic 50px century gothic, sans-serif;
		color:#FF6633;
		text-shadow: 4px 4px 6px gray;
		line-height:.9;
		word-wrap:break-word;
	}
	p{
		font: 12px poppins, sans-serif; color:black;
		margin-left:10px;
		margin-right:10px;
		word-wrap:break-word;
		text-align:justify;
		/*overflow:none;*/
	}

	h4{
		font: bold 18px century gothic, sans-serif; color:#0099FF;
		text-align:left;
		text-shadow: 2px 2px 4px gray;
		word-wrap:break-word;
	}

	
	h6{
		font-family: bold Montserrat, sans-serif;
		color:black;
		font-size: 20px;
		text-shadow: 2px 2px 2px gray; 
		text-align: center;
	}
	
	#celdas{
		width:270px;
		height:auto;
		display:block;
	}
	
	#celdas1{
		width:auto;	
	}
	
	#lineabase{
		width:auto;
	}
	
	#invitacion{
		width:auto;
		text-align:justify;
		word-wrap:break-word;
	}	

 
/* Smartphones (portrait and landscape) ----------- */  
@media only screen (min-width : 481px) and (max-width:800px){  
/* Styles */  
	.container{
		width:500px;
	}
	h1{
		font:20px Poppins, sans-serif;
		color:#FF6633;
		float:left;
		text-shadow: 2px 2px 3px gray;
	}
	h5{
		font-family: Raleway, sans-serif;
		color:gray;
		font-size: 28px;
		text-align: center;	
	}
	h2{
		font: 20px poppins, sans-serif;
		color:gray;
		float:left;
	}
	h3{
		float:left;
		margin-right: 10px;
		font: bold italic 60px century gothic, sans-serif;
		color:#FF6633;
		text-shadow: 4px 4px 6px gray;
		line-height:.9;
		word-wrap:break-word;
	}
	p{
		font: 12px poppins, sans-serif; color:black;
		margin-left:10px;
		margin-right:20px;
		word-wrap:break-word;
		text-align:justify;
		/*overflow:none;*/
	}
	h4{
		font: bold 18px century gothic, sans-serif; color:#0099FF;
		text-align:left;
		text-shadow: 2px 2px 4px gray;
		word-wrap:break-word;
	}
	h6{
		font-family: bold Montserrat, sans-serif;
		color:black;
		font-size: 20px;
		text-shadow: 2px 2px 2px gray; 
		text-align: center;
	}
	.foto img{
		width:35%:
	}
	.foto1{
		width:40%;
	}
	#celdas{
		height:auto;
		display:run-in;
	}
	
	#celdas1{
		width:auto;	
	}
	
	#lineabase{
		width:auto;
	}
	#invitacion{
		width:auto;
		text-align:justify;	
		word-wrap:break-word
	}   

  
/* Smartphones (portrait) ----------- */  
@media only screen  
and (max-width : 320px) {  
/* Styles */  
}  
/* iPads (portrait and landscape) ----------- */  
@media only screen  
and (min-width : 768px)  
and (max-width : 1024px) {  
/* Styles */  
}  
/* iPads (landscape) ----------- */  
@media only screen  
and (min-width : 768px)  
and (max-width : 1024px)  
and (orientation : landscape) {  
/* Styles */  
}  
/* iPads (portrait) ----------- */  
@media only screen  
and (min-width : 768px)  
and (max-width : 1024px)  
and (orientation : portrait) {  
/* Styles */  
}