@charset "utf-8";
/* CSS Document 
 Todos los Derechos Reservados 
 Manuel Martín Ortega 2011
 Proyecto12 2.1 Temática Maya */

* { padding: 0; margin: 0; }

body{
	font-family: 'Quattrocento Sans', Arial;
	background:#000000 url(bg.gif);
	color: #606060;
	padding-top:0px;
	top:0px;
}

strong {
	color: #000;
	font-weight:500;
	}

/* STARTING WITH THE FONTS *****************************************************************************************************/

h2 {
	font-family: 'Permanent Marker', cursive;
	font-size:20px;
	margin-left:180px;
	margin-top:15px;
	margin-right:5px;
	
}

#firts { font-size:27px;}
.spanish {
	font-size:.9em;
	margin-top:10px;
	margin-left: 210px;
	margin-right: 20px;
}


.texto {
	font-size:13px;
	margin-right:4px;
	margin-top:20px;
	text-align:left;
	text-indent:10px;
}

.texto p {
	line-height:18px;
	font-size: 13px;
}

p {
	font-size:13px;
	text-indent: 10px;
	line-height: 1.3;
}

p:nth-child(1) { 
	text-indent: 0;
}

#serv {
	width:254px;
	height: 64px;
	float:left;
	padding:2px;
	margin-bottom:10px;
	margin-left:6px;
	background-image:url(bgtransblack.png);
	background-position:left top;
	background-repeat:no-repeat;
	}

h1 {
	font-size:14px;
	margin-right:10px;
	text-align:left;
}

h3 {
	font-family: 'Quattrocento Sans', Arial;
	font-size:17px; 
	color:#999; 
	font-weight:lighter; 
	text-indent:20px;
	
	}

h4 {
	font-size:12px;
	text-align:left;
	margin-right:10px;
}

.seccion {
	color: #003300;
	text-align:left;
	font-weight:100;
	margin:20px 0 0 0;
	font-size:28px;
	text-indent:10px;
}	


/* TEXT STYLES */


.cool {
	background:#333;
}

.revert {
	background: #00CC00;
	}
	
.fot {
	color:#009900;
	margin-top:45px;
	text-align:right;
	margin-right:520px;
	
		}
	
.fot a {
		color:white;
		}
		
.galmenu {
	text-align:center;
	}

#mitrabajo {
	display:none;
	font-size:13px;
	height:300px;
	float:left
	}
	
	
#menuserv {float:left; margin:10px 0 0 0; width:200px;}

	.servicio {margin: 15px 0 0; float: left; color: #909090; font-family: "Permanent Marker",Arial, Helvetica; font-size:16px; width: 180px;}

.servicio:hover { color: #393939;} 
	
.imgserv {  margin:8px; float:right; width:70px; height:70px;}



/* STARTING WITH THE CONTENT */


#website { width:1243px; top: 0px; height:624px; padding-top:0px; }

#mobileheader { display: none;}

#leftsite { background-image:url(images/leftku.png); width:135px; float:left; height:533px; }

#top { background-image:url(images/top.png); width:1108px; float:left; height:21px; }

#content { background-image:url(images/content.jpg); width:957px; float:left; height:512px; text-align:left; overflow:hidden; }

#rightside { background-image:url(images/rightside.png); width:151px; float:left; height:512px; }

#footer { background-image:url(images/footer.png); background-position: top left; background-repeat:no-repeat; font-family: Arial, Helvetica, sans-serif;
	width:1243px; height:91px; float:left; text-align:left; font-size:10px; color:#000000; }
 
#texto{ width:610px; margin-top:90px; margin-left:20px; overflow:hidden; line-height:15px; }

	#servs { float:left; width:370px; } /* En servicios, el texto */
	
	#tarjeta { margin:3px; float:left;}	

#menu, #menu1, #menu2 { font-size:11px; color:#FFF; margin-top:31px; text-align: right; width:80px; float:left; }
	
	.mendescrip { color: #7e9b29;}
	
	#menu a, #menu1 a, #menu2 a { font-size:14px; color: black; text-decoration:none; }
	
	#menu a:hover, #menu1 a:hover, #menu2 a{ font-weight:bolder; }
	
#menu1 { margin-left:497px }

#menu2 { display: none;}

#menu { margin-left: 4px;}

#men span.jFlowSelected a { color: #666;}
		
#contrato { font-family: 'Permanent Marker' ; margin-left:22px; margin-top:29px; text-align:center; width:90px; float:left; font-weight:500; }

	#contrato a { font-size:21px; color: #034986; }
	
	#contrato a:hover { color:#333333; }

#galeria img { margin:3px 0 9px 11px; border:2px solid #66CC66;  width:72px; opacity: .85;	}
	
#galeria a img:hover, #galeria a img:target { border:2px solid #7e9b29; opacity: 1; }



/* MOBILE CONTENT STYLE */

@media screen and (max-width: 480px) {

	#website { width:100%; top: 0px; max-height: 1200px; padding-top:0px; }

	#mobileheader { display: block; float: left; position: absolute; top: 0; left: 0; z-index: 2000;}
		#mobileheader img { width: 97%}

	#leftsite { display: none; }

	#top { display: none; }
	
	#content { background-image: none; background-color: #fff; width:95%; height: auto; max-height: 850px; margin: 10px; text-align:left; overflow:hidden; }

	#rightside { display: none; }

	#footer { background: none; font-family: Arial, Helvetica, sans-serif;
		width:100%; height:30px; float:left; text-align:left; font-size:10px; color:#000000; }
	
		.fot { margin-right: 10px;}
 
	#texto{ width:95%; height:1000px; margin-top:120px; margin-left:10px; padding-right:20px; overflow:hidden; line-height:15px; }

	.texto { width: 95%; text-align: justify;}

		#servs { float:left; width:100%; }
		
		#tarjeta { width:40%;}

	#menu, #menu1 { font-size:11px; color:#7e9b29; margin-left:0; margin-top:10px; text-align: right; width:70px; float:left; }
	
	h3 { display: none;}
		
		.mendescrip { display: none;}
	
		#menu a { font-size:14px; color: black; text-decoration:none; }
	
		#menu a:hover, #menu1 a:hover { font-weight: normal; color: #909090; }
		
	#men { margin: 80px 0 0 0; float: right; width: 80%; z-index: 3000; position: relative;}

	#men span.jFlowSelected a { color: #666;}
		
	#contrato { display: none;}

		.seccion { font-weight: bold; font-family: 'Quattrocento Sans'; font-size: 22px; line-height: 22px; text-indent: 0px;}

		#first { font-size:23px;}


	#menuserv { float:left; margin:4px; width: 100%;}

		.servicio { font-size: 12px; float: left; width: 175px;}
	
		.namnam { display: none;}

	
	#mitrabajo{ width: 95%;}
	
			/* Galería MOBILE*/
			
	#galeria img { margin:3px 0 9px 11px; border:2px solid #66CC66; width:72px; opacity: .85; }
	
	#galeria a img:hover, #galeria a img:target { border:2px solid #7e9b29; opacity: 1; }

		#galeria li{ width: 320px; height: 600px; }
		
		span#prevBtn{
		margin-left:50px;
		}

			/*Form*/
		
			span .ocultar { display: none;} /*Espacios al final*/
			
			form { width: 280px;}
			
			.mensaje {width: 280px;}
			
			.comun {width: 280px;}
			

}

/*TRABAJO CON LOS LINKS ********************************************************************************************************/

a { text-decoration:none; }

a:hover { color:#333333; }
	
/* COMENZAMOS CON FORMULARIO DE CONTACTO *****************************************************************************/

form {
	width:305px;
	font-size:12px;
	float:left;
	
	}
.mensaje {
	width:300px;
	height:90px;
	background-color: #fff;
	border: 1px solid #ccc;
	color: #999;
	}
.comun {
	width:300px;
	height:23px;
	margin-bottom:8px;
	background-color: #fff;
	border: 1px solid #ccc;
	color: #999;
}

.enviar {
	float: right;
	background: none;
	border: none;
	font-family: 'Permanent Marker', Arial;
	font-size:14px;
	cursor: pointer;
	margin-right: 5px;
	color: #333;
	}
	
.enviar:hover {
	font-size:15px;
	color: #000;
	margin-right: 0px;
}

.comun:focus, .mensaje:focus { color: #333}

.comun:hover, .mensaje:hover {background-color: #DDFFBF; color: #063;}

#mail {
	color:#fff;
	margin-top:20px;
	text-align:center;
	}
#mail a{
	color:#00CC00;
	}
	
.clear {
background-image:url(images/clear.gif)
}

.placeholder
{
  color: #aaa;
}

/*** Notificación Jquery **********/

#pop { position: absolute; top: 10px; right: 20px; width: 320px; z-index: 4000; color: white; text-align: left; }

.notice { position: relative; padding: 10px; margin-bottom: 10px;}

.skin { position: absolute; background-color: #000; bottom: 0; left: 0; opacity: .6; right: 0; top: 0; z-index: -1;}
		
.x 
	{
		display: block;float: right; width: 31px; height: 31px; background: transparent url('js/fancybox/fancy_close.png') top right no-repeat;
	}

/*Galería *************/

	#galeria ul, #galeria li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#galeria, #galeria li{ 
		width:590px;
		height:225px;
		overflow:hidden; 
		}
		
	span#prevBtn{
		margin-top:8px;
		margin-left:150px;
		color:#009933;		
		}
			span#prevBtn a{
			margin-top:4px;
			color:#0099FF;
			}
			
	span#nextBtn{
		margin-top:8px;
		margin-left:4px;
		color:#000;
		}
			span#nextBtn a{
			margin-top:4px;
			color: #333399;
			}