@charset "UTF-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
*{
	font-family: "Noto Sans",Trebuchet MS, Arial, Helvetica, sans-serif;
}
img{border: 0;}
.forMainBody{
	font-family: "Noto Sans",Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-image:url('paperbkgrd-02-03-01.png');
	background-color: #f5f5f5;/*#f5f5f5*/
	background-repeat: repeat;
	margin: 20px auto 0 auto;
	text-align: center;
}
#encabezado {
	margin:0;
	background-color:#E6272D;    	
	height: 50px;	
}
.boldSize{font-size: 1.3em;}
#encabezado h1 { /*encadenamos el identificador del div, con la etiqueta para referirnos solo al h1 dentro del div encabezado, asi no afectara otros h1 en el resto del documento.*/ 
    font-size:18px;
    font-weight:bold;
    width:224px;
    border-bottom:8px solid #CCC;
    color:#FFFFFF;
    margin:0; /*los h1 vienen con margen, con esto se lo quito*/ 
    text-transform:uppercase; /*convierte todas en mayusculas*/ 
    padding-bottom:10px;
}
.toDaCenter{text-align: center;}
.toDaLeft{text-align: left;}
.toDaRight{text-align: right;}
.toDaJustify{text-align: justify;}
a:link {color:#034778; text-decoration:none;}      /* unvisited link */
a:visited {color:#034778; text-decoration:none;}  /* visited link */
a:hover {color:#E6272D; text-decoration:none;}  /* mouse over link */
a:active {color:#E6272D; text-decoration:none;}  /* selected link */ 
label{font-size:16px}	
#pie {
	margin:0;
    background-color:#2f2f2f;
    font-family: "Noto Sans",Trebuchet MS, Arial, Helvetica, sans-serif;    
    height: 125px;
    color: #fff;
}
.demiContentFull{
	height: 400px; 
	font-size: 16px;
	padding:2px 10px;
}
#menuConteiner {
	width: 1050px;
	font-size: 1.5em;
	text-align: center;
	padding-top: 5px;	
}
@media only screen and (min-width: 1200px){
	.mainWrapper{
		width: 1050px;
		margin:0 auto;
		height: auto;
		background: #FFF;
		display: inline-block;
	}
	.contentFull{
		min-height: 800px; 
		font-size: 14px;
		width: 100%;
		padding:2px 0px;
		display: block;
	}
	#menuConteiner {
		width: 1050px;
		font-size: 1.5em;
		text-align: center;
		padding-top: 5px;
	}
	/***********************************/
	/** instead using tables, I rather**/
	/** use divs or <p> with a type of**/
	/** "flexbox" concepts, this way I**/
	/** Make this stuff responsive    **/
	/***********************************/
	.innerCellCont{
		width: 28%;
		margin:0px 0px;
		padding:10px 18px;
		float: left;
	}
	.innerCellContDouble{
		width: 45%;
		padding:10px 18px;
		margin:0px 0px;
		display:inline-block;
		float: left;
	}
	.innerCellContTriple{
		width: 90%;
		margin:0px 0px;
		padding:10px 18px;
		float: left;
	}
	/**********************************/
}
@media only screen and (min-width: 801px) and (max-width: 1199px){
	.mainWrapper{
		text-align: center;
		width: 800px;
		margin:0 auto;
		display: inline-block;
		background: #FFF;
	}
	.contentFull{
		min-height: 700px;
		font-size: 14px;
		width: 95%;
		padding:0px 10px;
	}
	#menuConteiner {
		width: 800px;
		font-size: 1.2em;
		text-align: center;
		padding-top: 5px;
	}
	/************************************/
	/** instead using tables, I rather **/
	/** use divs or <p> with a type of **/
	/** "flexbox" concepts, this way I **/
	/** Make this stuff responsive     **/
	/************************************/
	.innerCellCont{
		width: 28%;
		margin:0px 0px;
		padding:10px 15px;
		float: left;
	}
	.innerCellContDouble{
		width: 45%;
		padding:10px 15px;
		margin:0px 0px;
		display:inline-block;
		float: left;
	}
	.innerCellContTriple{
		width: 90%;
		padding:10px 15px;
		margin:0px 0px;
		display:inline-block;
		float: left;
	}
	/**********************************/
}
@media only screen and (max-width: 800px){
	.mainWrapper{
		width: 90%;
		margin:0 auto;
		height: auto;
		background: #FFF;
	}
	.contentFull{
		height: 1660px; 
		font-size: 14px;
		width: 100%;
		padding:2px 10px;
	}
	#menuConteiner {
		width: 95%;
		font-size: 1.5em;
		text-align: center;
		padding-top: 5px;
		display: block;
	}
	/************************************/
	/** instead using tables, I rather **/
	/** use divs or <p> with a type of **/
	/** "flexbox" concepts, this way I **/
	/** Make this stuff responsive     **/
	/************************************/
	.innerCellCont{
		width: 90%;
		margin:0px 0px;
		padding:10px 18px;
		float: left;
	}
	.innerCellContDouble{
		width: 90%;
		padding:10px 18px;
		margin:0px 0px;
		display:inline-block;
		float: left;
	}
	.innerCellContTriple{
		width: 90%;
		display:inline-block;
		margin:0px 0px;
		padding:10px 18px;
		float: left;
	}
	/**********************************/
    #pie {
        margin:0;
        background-color:#2f2f2f;
        font-family: "Noto Sans",Trebuchet MS, Arial, Helvetica, sans-serif;    
        display: inline-block;
        height:300px;
        color: #fff;
    }
}

.caption {
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.4em;
	font-size: 1.8em;
	text-align: center;
	background: #000;
	background: rgba(0,0,0, .8);
	color: #fff;
}
.table {
  display: table;
  margin: 0 auto;
}