@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

ol, ul {
	list-style: none;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;*/
	clear: none;
	float: none;
}
#div1 {
}
.zeroMargin_mobile {
    margin-left: 0;
}
.hide_mobile {
    display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

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

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

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

.gridContainer {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}

h2.widgetTitle {
     background: none repeat scroll 0% 0% transparent;
     color: #d81b60;
     font-family: Intro,sans-serif;
     font-size: 2.5em;
     font-weight: bold;
     margin: 0px;
}

.efemerides-header {
     background: url("img/header.jpg") no-repeat scroll 0% 0% transparent; /*Reemplazar la ruta por la imagen que corresponda*/
	 height:120px;
     font-family: Intro;
}

.efemerides-header h3 {
     color: #FFFFFF;
     font-family: Intro,Arial,sans-serif;
     font-size: 3em;
     font-weight: bold;
     padding: 0.7em 1.9em 0px;
}

.efemerides-header span {
     color: #d81b60;
     font-family: Intro,sans-serif;
     font-size: 1.46em;
     font-weight: bold;
     text-transform: uppercase;
}

.container-fluid1 {
	width:270px;
	float:left;
}

.container-fluid2 {
	width: 825px;
	float: left;
	padding: 0 100px 0 20px;
}

.container-fluid3 {
	width: 480px;
	float: left;
	padding: 100px 0 0 0;
}

.container-fluid4 {
	width: 505px;
	float: left;
	padding: 200px 0 0 0;
	margin-left: 10px !important;
}


.container-fluid5, .container-fluid6 {
	width: 995px;
	float: left;
	margin: 70px 0 0 0;
	background-color: #EEEDED;
}



.container-fluid1 .resp_img, .container-fluid2 .resp_img {
	height: 0 !important;
	margin-top: 2em;
	
}

.container-fluid1 h2 {
    background: url("img/ico-destacado1.jpg") no-repeat scroll left center rgba(21, 20, 20, 0.6);
    color: #FFFFFF;
    font-size: 1.3em;
    font-weight: bold;
	height: 3.2em;
    line-height: 1.5;
    position: relative;
    left: 0;
    top: 10.9em;

}
.container-fluid1 span, .container-fluid2 span  {
     border: medium none;
     left: 4.3em;
     padding: 0px;
     position: relative;
     top: 0.7em;
}

.container-fluid2 h2 {
     background: url("img/ico-destacado2.jpg") no-repeat scroll left center rgba(21, 20, 20, 0.6);
     color: #FFFFFF;
     font-size: 1.3em;
     font-weight: bold;
     height: 3.2em;
     line-height: 1.5;
     position: relative;
     left: 0;
     top: 10.9em;
     /*width: 92.56%;*/
}

.container-fluid3 h2{
    background: url("img/ico-video.jpg") no-repeat scroll left transparent; /* Hay parte del texto que es imagen, la palabra "video". Eso es porque la misma línea de texto tiene dos colores diferentes*/
    color: #d81b60;
    font-family: Arial,verdana,sans-serif;
    font-size: 1.25em;
    font-weight: bold;
/*    padding: 1em 1em 0 0;*/
	padding: 1em 0.7em !important;
    position: relative;
    text-indent: 8em;
    top: 5.1em;
}

.container-fluid3 .resp_img {
    position: relative;
    top: 6em;

}

.container-fluid4 h2 {
	background: url("img/ico-otrosRecursos.jpg") no-repeat scroll left center #d81b60;
	/*background: url("img/bkg-widgetTitle.png") no-repeat scroll right center #d81b60;*/
	color: #FFFFFF;
	font-size: 1.3em;
	font-weight: bold;
	height: 3.em;
	line-height: 1.5;
	position: relative;
	margin: 10px 0 !important;
	padding: 0.7em 4.5em !important;
}
.container-fluid4 .img_first {
    color: #d81b60;
    list-style: square outside none;
	margin: 3em 3em auto 1.5em;
	font-size:1.4em
}

.img_first  a {
	color: #5c5c5 !important;
	font-size: 1em;
	text-decoration:underline !important;
	line-height:2em;
}

.container-fluid5 h2 {
	background: url("img/ico-pendrive.jpg") no-repeat scroll 0 0 #EEEDED;
	margin-top: 0.5em;
	color: #FFFFFF;
	background-color: #d81b60;
	font-size: 1.3em;
	font-weight: bold;
	height: 3.em;
	line-height: 1.5;
	position: relative;
	left: 0px;
	margin: 0 !important;
	padding: 1em 4em !important;
}

.container-fluid5 ul li  {
	display: inline-block;
	vertical-align: top;
	width: 20%;
	margin: 1.2em;
}

.resp_img img {
	margin: 1em 0;	
}

.container-fluid6 h2 {
	background: url("img/ico-acercade.jpg") no-repeat scroll 0 0 #EEEDED;
	margin-top: 0.5em;
	color: #FFFFFF;
	background-color: #d81b60;
	font-size: 1.3em;
	font-weight: bold;
	height: 3.em;
	line-height: 1.5;
	position: relative;
	left: 0px;
	margin: 0 !important;
	padding: 1em 4em !important;
}

.container-fluid6 .acerca_de {
	padding:1em;
	margin: 2em;
	background-color:#FFF;
	
}