@charset "utf-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}

/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/

h5{
	display:inline;
    font-family: 'Neuton', serif;
	font-size:16px;
	
}



#book{ 
	 position: absolute;
	float:left;
	clear:none;
    top: 70px;
    left: 50%;
	margin-left:-175px;
    width:350px;
    height: 196px;
	z-index:100;
	display:none;
}


#botonera{
	position:absolute;
	top:265px;
	width:350px;
	left:50%;
	margin-left:-175px;
	height:50px;
	display:none;	
}
	
	
#poetic{
	position:relative;
	float:left;
	clear:both;
	width:100%;
	margin-left:0%;
	margin-top:20px;
    font-family: 'Montserrat Light', arial;
	text-align:center;
	font-size:19px;
	color:#6B6B6B;


}


#inbt{
	float:left;
	clear:both;
	width:60%;
	margin-left:20%;
}


#botonera a{
	position:relative;
	float:left;
	clear: none;
	width:33%;
	font-family: 'Neuton', serif;
	color:#6B6B6B;
	text-align:center;
	font-size:16px;
	cursor:pointer;
	margin-top:10px;
	font-style:normal;
	text-decoration:none;

	
}

#botonera a:hover{

	color:#999;
	font-style:italic;

	
}



#map{
	position:relative;
	float:left;
	clear:both;
	width:100%;
	margin-left:0%;
	margin-top:18px;
    font-family: 'Montserrat Light', arial;
	text-align:center;
	font-size:15px;
	line-height:25px;
	color:#6B6B6B;
	display:none;


}




#contacto{
	 position: fixed;
	float:left;
	clear:none;
	bottom:0;
	margin-left:0;
    width:100%;
    height: auto;
	background:#FFF;
	font-family: 'Montserrat', arial;
	text-align:left;
	font-size:13px;
	font-weight:400;
	text-align:center;
	text-decoration:none;
	color: #999;
	z-index:-1;
	padding-bottom:10px;
}
		
#contacto{
	 position: fixed;
	float:left;
	clear:none;
	bottom:0;
	margin-left:0;
    width:100%;
    height: auto;
	background:#FFF;
	font-family: 'Montserrat', arial;
	text-align:left;
	font-size:13px;
	font-weight:400;
	text-align:center;
	text-decoration:none;
	color: #999;
	z-index:-1;
	padding-bottom:10px;
}

#mar{ 
    position: absolute;
	float:left;
	clear:none;
    left: 50%;
	margin-left:-250px;
    width: 250px;
    height: 145px;
	top:20px;


}

#mar2 {  
     position: absolute;
    left: 50%;
	top:20px;
    width: 250px;
    height: 145px;
}





#poetict{
	position:absolute;
	float:left;
	clear:both;
	width:300px;
	margin-left:-150px;
	left:50%;
	margin-top:210px;
    font-family: 'Montserrat Light', arial;
	text-align: left;
	font-size:18px;
	color:#6B6B6B;


}


.gra{
	position:relative;
	float:left;
	clear: both;
	width:100%;
	margin-top:30px;
	margin-bottom:40px;
	text-align:left;
	font-family: 'Neuton', serif;
	font-size:16px;
	color:#000;
	font-weight:300;

}

.gra a, .gra a:hover{
	font-family: 'Neuton', serif;
	font-size:18px;
	color: #999;
	font-weight:300;
	text-decoration:none;
}



#con{

	float:left;
	clear: both;
    width:100%;
	font-family: 'Montserrat', arial;
	text-align: center;
	font-size:13px;
	font-weight:400;
	margin-top:100px;
	text-decoration:none;
	color: #999;
	padding-bottom:10px;
}


@media only screen and (min-width: 600px) {
	


#book{ 
	 position: absolute;
	float:left;
	clear:none;
    top: 70px;
    left: 50%;
	margin-left:-300px;
    width: 600px;
    height: 336px;
	z-index:100;
	display:none;
}


#botonera{
	position:absolute;
	top:410px;
	width:480px;
	left:50%;
	margin-left:-240px;
	height:50px;
	display:none;	
}
	
	
#poetic{
	position:relative;
	float:left;
	clear:both;
	width:100%;
	margin-left:0%;
	margin-top:20px;
    font-family: 'Montserrat Light', arial;
	text-align:center;
	font-size:18px;
	color:#6B6B6B;


}


#inbt{
	float:left;
	clear:both;
	width:50%;
	margin-left:25%;
}


#botonera a{
	position:relative;
	float:left;
	clear: none;
	width:33%;
	font-family: 'Neuton', serif;
	color:#6B6B6B;
	text-align:center;
	font-size:16px;
	cursor:pointer;
	margin-top:10px;
	font-style:normal;
	text-decoration:none;

	
}

#botonera a:hover{

	color:#999;
	font-style:italic;

	
}



#map{
	position:relative;
	float:left;
	clear:both;
	width:100%;
	margin-left:0%;
	margin-top:18px;
    font-family: 'Montserrat Light', arial;
	text-align:center;
	font-size:15px;
	line-height:25px;
	color:#6B6B6B;
	display:none;


}




#contacto{
	 position: fixed;
	float:left;
	clear:none;
	bottom:0;
	margin-left:0;
    width:100%;
    height: auto;
	background:#FFF;
	font-family: 'Montserrat', arial;
	text-align:left;
	font-size:13px;
	font-weight:400;
	text-align:center;
	text-decoration:none;
	color: #999;
	z-index:-1;
	padding-bottom:10px;
}
	
	
	


#mar{ 
    position: absolute;
	float:left;
	clear:none;
    left: 50%;
	margin-left:-250px;
    width: 250px;
    height: 145px;
	top:50px;


}

#mar2 {  
     position: absolute;
    left: 50%;
	top:50px;
    width: 250px;
    height: 145px;
}





#poetict{
	position:absolute;
	float:left;
	clear:both;
	width:500px;
	margin-left:-250px;
	left:50%;
	margin-top:210px;
    font-family: 'Montserrat Light', arial;
	text-align: left;
	font-size:18px;
	color:#6B6B6B;


}


.gra{
	position:relative;
	float:left;
	clear: both;
	width:100%;
	margin-top:30px;
	margin-bottom:40px;
	text-align:left;
	font-family: 'Neuton', serif;
	font-size:16px;
	color:#000;
	font-weight:300;

}	
		


}


@media only screen and (min-width: 1300px) {
	


#book{ 
	 position: absolute;
	float:left;
	clear:none;
    top: 70px;
    left: 50%;
	margin-left:-400px;
    width: 800px;
    height: 449px;
	z-index:100;
	display:none;
}


#botonera{
	position:absolute;
	top:530px;
	width:480px;
	left:50%;
	margin-left:-240px;
	height:50px;
	margin-bottom:50px;
	display:none;	
}
	
	
#poetic{
	position:relative;
	float:left;
	clear:both;
	width:100%;
	margin-left:0%;
	margin-top:20px;
    font-family: 'Montserrat Light', arial;
	text-align:center;
	font-size:18px;
	color:#6B6B6B;


}


#inbt{
	float:left;
	clear:both;
	width:50%;
	margin-left:25%;
}


#botonera a{
	position:relative;
	float:left;
	clear: none;
	width:33%;
	font-family: 'Neuton', serif;
	color:#6B6B6B;
	text-align:center;
	font-size:16px;
	cursor:pointer;
	margin-top:10px;
	font-style:normal;
	text-decoration:none;

	
}

#botonera a:hover{

	color:#999;
	font-style:italic;

	
}



#map{
	position:relative;
	float:left;
	clear:both;
	width:100%;
	margin-left:0%;
	margin-top:18px;
    font-family: 'Montserrat Light', arial;
	text-align:center;
	font-size:15px;
	line-height:25px;
	color:#6B6B6B;
	display:none;
	margin-bottom:50px;


}


#contacto{
	 position: fixed;
	float:left;
	clear:none;
	bottom:0;
	margin-left:0;
    width:100%;
    height: auto;
	background:#FFF;
	font-family: 'Montserrat', arial;
	text-align:left;
	font-size:13px;
	font-weight:400;
	text-align:center;
	text-decoration:none;
	color: #999;
	padding-bottom:10px;
   z-index:-1;
}
		








}