body {
	font-size: 14px;
	color: #222;
	font-family: Helvetica, Arial, sans-serif;
	background: #999;
	margin: 0;
	padding: 0;
}


a:link { text-decoration: underline; color: #222; }
a:active { }
a:visited {text-decoration: underline; color: #222; }
a:hover { color:#FF0000 }

a img { border: none; }

h1, h2, h3, h4, p{
	margin: 0;
	padding: 0;
	}

h1 { font-size: 32px; }
h2 { font-size: 40px; font-weight: normal; }
h3 { font-size: 18px; font-weight: normal;}
h4 { font-size: 18px; font-weight: bold;}

ul { list-style: none;}
li{ list-style-position:outside}


#contenedor{
	
	}	


/* |||||||||||||||| CABECERA |||||||||||||||| */

#logo{
	float: right;
	margin-top: -30px;
	margin-right: 30px;
	margin-bottom: -4px;
}


#logo img{
	margin: 0px;
	padding: 0px;
}

#cabecera{
	margin: 30px auto;
	/* height: 240px;*/
	width: 913px;
	display:block;
	background: #FFF;
	-webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; box-shadow:3px 3px 3px  rgba(0,0,0,0.4);
		padding-bottom:15px
	}
	
#cabecera h1{
	display:block;
	width: 560px;
	margin:  0 0 0 30px;
	padding-top:20px;
	font-size:40px
	
}

 #cabecera h2, #cabecera h3{
	display:block;
	width: 560px;
	margin: 20px 0 0 30px;
	
}

/* |||||||||||||||| CONTENIDO |||||||||||||||| */

#contenido{
	margin: 30px auto;
	width: 913px;
	display:block;
	background: #FFF;
	-webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; box-shadow:3px 3px 3px  rgba(0,0,0,0.4);
	}
	
#contenido h4{
	display:block;
	margin: 0 0 20px 0;
}	
	
#hola{
padding: 30px 0 220px 0;
	margin: 0px;
	width: 913px;
	display:block;
	background: url(../images/140_ilustracion.gif) no-repeat left bottom;
	}	

#columna-izquierda{
	display:block;
	width: 75%;
	margin: 20px auto;
	float: none;
	}
	
#columna-izquierda ul { list-style: disc;
padding: 0 0 0 20px; list-style-position:outside;
}

#columna-izquierda li {
margin: 0 0 10px 0;}

#columna-izquierda li strong {
font-weight: bold;
background: #FFFF00}	
	
#columna-derecha{
	display:block;
	width: 260px;
	margin: 20px 30px 0 0;
	float: right;
	}
	
#columna-derecha h1{
font-size: 60px;
color:#CC0000;
text-align:center;}	

#columna-derecha h2{
font-size: 16px;
color:#CC0000;
margin-bottom: 10px;
text-align:center;}	

#columna-derecha p{
margin-bottom: 20px;
}

#siguenos{
	margin-top: 20px;
	padding-top: 10px;

	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
}			

#apoyo{
	margin: 20px 0 0px 30px;
	width: 913px;
	display:block;
	}
	
.firma{
font-size:11px;
	margin: 0px 20px 20px 0px;
	width: 170px;
	display:block;
	float:left;
	}	


/* |||||||||||||||| FOOTER |||||||||||||||| */

#pie {
	display:block;
	font-size: 12px;
	color: #DDD;
	margin: 30px;
	padding: 0;
	clear:both;
	width: 913px;
}

#pie ul {
	display: block;
	padding: 0px;
	margin-left:30px;
}

#pie li {
	margin-right: 20px;
	float: left;
}

#pie li a{
	color: #DDD;
}

#pie li a:hover{
	color:#FFF;
}


/* |||||||||||||||| CLASES COMUNES |||||||||||||||| */

.caja-top{
	width: 913px;
	height: 7px;
	display:block;
	margin: 0px 0px 0px 0px;
	
	}
	
.caja-bottom{
	width: 913px;
	height: 7px;
	display:block;
	margin: 0px 0px 0px 0px;
	
	clear: both;
	}
	
.peque{
	font-size: 12px;
}

.color-rojo{
	color: #CC0000;
}

.color-negro{
	color: #000;
}

.color-gris-claro{
	color: #CCC;
}

.clear {
	clear:both;
	}	
img.Trabajando{width:500px; height:auto}

@media only screen and (max-width: 766px) {
	#cabecera{
		width:90%;
	margin:30px auto;
	}
	#logo{
	width:100px;
	float: right;
	margin-top: -30px;
	margin-right: 10px;
	margin-bottom: -4px;
}


#logo img{
	width:100px;
	height:auto;
	margin: 0px;
	padding: 0px;
}
	
h1 {font-size: 18px; width:auto }
h2 {font-size: 20px; font-weight: normal; width:auto }
h3{font-weight:16px; width:auto}
#cabecera h1{
	display:block;
	width: 90%;
	margin: 0 0 0 20px;
	padding-top:60px; 
	font-size:22px
	
}
#cabecera h2, #cabecera h3{
	display:block;
	width: 90%;
	margin: 10px 0 0 20px;
}
	#cabecera h3{font-size:14px;}
	#contenido{
	margin: 20px auto;
	width: 90%;
	display:block;
	background: #FFF;
	}
	
#contenido h4{
	display:block;
	margin: 0 0 20px 0;
}	
#hola{
padding-bottom: 60px;
	margin: 0px;
	width: 99%;
	display:block;
	background: none;
	}	
#columna-izquierda{
	display:block;
	width: 90%;
	margin: 20px auto;
	float: none;
	}
	img.Trabajando{width:90%; height:auto}
	#apoyo{
	margin: 10px 5%;
	width: 90%;
	display:block;
		text-align:center
	}
}


@media only screen and (min-width:767px) and (max-width: 980px) {
	#cabecera{
		width:90%;
	margin:30px auto;
	}
	#logo{
	width:180px;
	float: right;
	margin-top: -20px;
	margin-right: 10px;
	margin-bottom: 0px;
}


#logo img{
	width:180px;
	height:auto;
	margin: 0px;
	padding: 0px;
}
	
h1 {font-size: 18px; width:auto }
h2 {font-size: 30px; font-weight: normal; width:auto }
h3{font-weight:24px; width:auto}
#cabecera h1{
	display:block;
	width: 90%;
	margin: 0 0 0 20px;
	padding-top:30px; 
	font-size:36px
	
}
#cabecera h2, #cabecera h3{
	display:block;
	width: 90%;
	margin: 10px 0 0 20px;
}
	#cabecera h3{font-size:18px;}
	#contenido{
	margin: -15px auto 20px auto;
	width: 90%;
	display:block;
	background: #FFF;
	}
	
#contenido h4{
	display:block;
	margin: 0 0 20px 0;
}	
#hola{
padding-bottom: 60px;
	margin: 0px;
	width: 99%;
	display:block;
	background: none;
	}	
#columna-izquierda{
	display:block;
	width: 90%;
	margin: 20px auto;
	float: none;
	}
	img.Trabajando{width:90%; height:auto}
	#apoyo{
	margin: 10px 5%;
	width: 90%;
	display:block;
		text-align:center
	}
}