html { 
  height: 100%;
}

* { 
  margin: 0;
  padding: 0;
}

@font-face { 
  font-family: Yanone Kaffeesatz; 
    src: url('../fonts/YanoneKaffeesatz-Regular.eot'); 
    src: local("Yanone Kaffeesatz"), url('../fonts/YanoneKaffeesatz-Regular.ttf'); 
} 

@font-face { 
  font-family: News Cycle; 
    src: url('../fonts/NewsCycle-Regular.eot'); 
    src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf'); 
} 

/* Acomodar los elementos de la página en block */
article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;
}

/* Características del cuerpo*/
body { 
  font: normal .80em arial, sans-serif;
  background-image: url(../images/imgFondo.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size:cover;
  color: #000; 
}

p { 
  padding: 0 0 20px 0;
  line-height: 1.7em;
}

p.parrafoAntecedentes, p.parrafoBeneficios{
  margin:10px; 
  font: 140% 'News Cycle', arial, sans-serif;
  font-weight: bold; 
  color: #000000;
  text-align: justify;
  padding: 5px 0px 5px 0px;
}

p.parrafoIndex, #content ul li{
	font: bold 128% 'News Cycle', arial, sans-serif;
}
img { 
  border: 0;
}

h1, h2, h3{ 
  color: #0000CC;
  letter-spacing: 0em;
  padding: 0 0 5px 0;
  font: bold 170% "News Cycle", arial, sans-serif;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;
}


h2 { 
  font-size: 160%;
  padding: 9px 0 5px 0;
  color: #0000CC;
}

h3 { 
  font-size: 140%;
  margin: 0 0 15px 0;
  padding: 5px 0 0 0;
}

h4 { 
  font: bold 110% "News Cycle", arial, sans-serif;
  padding: 5px 0 0 0;
}

a, a:hover { 
  outline: none;
  text-decoration: underline;
  color: #000;
}

a:hover { 
  text-decoration: none;
}

blockquote { 
  margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF;
}

ul { 
  margin: 2px 0 22px 17px;
}

ul li { 
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;
}

ol { 
  margin: 8px 0 22px 20px;
}

ol li { 
  margin: 0 0 11px 0;
}

.left { 
  float: left;
  width: auto;
  margin-right: 10px;
}

.right { 
  float: right; 
  width: auto;
  margin-left: 10px;
}

.center { 
  display: block;
  text-align: center;
  margin: 20px auto;
}


#main, nav, #container, #encabezado, #site_content, footer { 
  margin-left: auto; 
  margin-right: auto;
}
/* Estilos del encabezado*/
header { 
  background: transparent;
  height: 150px;
}
#main {
  margin: 5px auto;
  width: 930px;
  background: transparent;
  padding-bottom: 30px;
}
#encabezado{ 
  width: 930 px;
  height: 150px;
  background: transparent;
  color: #FFF;
  padding: 0 0 0 25px;
  float: left;
}
#encabezado h1{ 
  font: normal 320%;
  font-family:Tahoma, Geneva, sans-serif;
  text-transform: none;
  margin: 0;
  padding: 0;
  font-size:60px;
  color:#DDD;
  text-shadow:0px 5px 0px #aaa,
               0px 4px 3px rgba(0,0,0,0.5),
               0px 7px 10px rgba(0,0,0,0.3);
}

#encabezado h2 
{
  font: normal 140%;
  font-family:Tahoma, Geneva, sans-serif;
  text-transform: none;
  margin: 0;
  padding: 0;
  color: #0000CC;
  font-size:60px;
  text-shadow:0px 2px 0px #aaa,
               0px 4px 3px rgba(0,0,0,0.5),
               0px 7px 10px rgba(0,0,0,0.3);
}

#encabezado_texto h1, #encabezado_texto h1 a, #encabezado_texto h1 a:hover{  
  padding: 0;
  color: #FFFFFF;
  text-decoration: none;
}

#encabezado_texto h1 a .logo_color { 
  color: #068BD8;
  font-family:Tahoma, Geneva, sans-serif;
   
}
#encabezado_texto a:hover .logo_color { 
  color: #FFFFFF;
}

#encabezado_texto h2 { 
  font-size: 140%;
  padding: 0;
  color: #FFFFFF;
}
/* Estilos del nav (barra de menu)*/
#div_logo
{	
	float:right;
	width:186 px;
	height:120;
}
nav { 
  width: 930px;
  height: 70 px;
  float: right;
  margin: -20px auto 20px auto;
  box-shadow: inset 0 5px 5px rgba(0,0,255,0.5), inset 5px 0 5px rgba(0,0,255,0.5), inset -5px 0 5px rgba(0,0,255,0.5);
  font: bold 120% Tahoma, Geneva, sans-serif; 
  
  border-radius: 15px;
  background: url(../images/transparente.png);
}

#site_content { 
  width: 930px;
  overflow: hidden;
  margin: 20px auto;
  background: url(../images/transparente.png);
  
} 


#sidebar_container { 
  float: right;
  width: 450px;
  padding: 0;
  height: 450px;
}

#content { 
  text-align: left;
 /* font: bold 107% Georgia, 'Times New Roman', serif;*/
  font: 'News Cycle', arial, sans-serif;
  width: 440px;
  margin: 0 0 0 0;
  float: left;
  padding: 0 20px 20px 20px;
  text-align: justify;
  }
 /*tamaño de letra de título del content h1 de inicio*/ 
.subtitulo
  { 
     font: bold 160% Tahoma, Geneva, sans-serif; 
  }
  .imagen
  {
	position:center;
	transition: all 0.5% linear;  
	-moz-transition: all 0.5% linear;  
	-webkit-transition: all 0.5% linear;  
	-o-transition:all 0.5% linear;  
	cursor:pointer;
 }
  .imagen:hover
  {
  width: 400px;	
  border:#FD612D 4px solid;  
  box-shadow:#FD612D 0px 0px 15px;
 }
  
#content ul 
{ 
  margin: 2px 0px 15px 0px;
}
/*Margen y tamaño de las viñetas de inicio*/
#content ul li
 { 
  list-style-type: none;
  background: url(../images/imgVineta.png) no-repeat;
  background-position: 2px;
  margin: 5px 5px 5px 0px; 
  padding: 0 0 4px 28px;
  line-height: 1.1em;  
}
/*Margen y tamaño de letra de título del article h1 de antecedentes*/
article  h1
{
padding: 20px 20px 5px 20px;
}

/*Margen y tamaño de letra de título del aside de antecedentes*/
aside
{
 padding: 0px 0px 0px 20px;
 float:left;
 margin-right:20px;
 margin-bottom:20px;
}

section
{
	padding: 50px 0px 0px 0px;
	text-align: justify;
	margin-right:15px;
	margin-left:20px;
	margin-bottom:20px;
}

#blog_container h4 
{
     font: normal 170% 'News Cycle', arial, sans-serif;
     margin: 0 0 15px 0;
     padding: 5px 0;
}

#blog_container h4.select 
{
  width: 475px;
}


footer
{ 
  width: 930px;
  font: 125% 'News Cycle', arial, sans-serif;
  font-weight: bold;
  height: 70px;
  padding: 9px 0 15px 0;
  color: #FFFFFF;
  text-align: center;
  background: transparent url(../images/transparente.png);
  border-radius: 15px;
 }

footer p { 
  line-height: 1em;
  padding: 0 0 10px 0;
  color: #000000;
}


ul.images 
{
  width:450px;
  height:450px;
  overflow:hidden;
  position:relative;
  margin:0;
  padding:0;
} 

ul.images li 
{
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  right:0;
  list-style:none;
}
 
ul.images li.show 
{
  z-index:500;  
}
 
ul img
 {
  border:none;  
}


/* Configuración del width */
html body ul.sf-menu ul,html body ul.sf-menu ul li 
{ 
  width: 220px;
}

html body ul.sf-menu ul ul 
{ 
  margin: 0 0 0 220px;
}

/* Mostrar la posición */
ul.sf-menu,ul.sf-menu * 
{ 
  margin: 0;
  padding: 0;
}

ul.sf-menu 
{ 
  display: block;
  position: relative;
}
  
ul.sf-menu li 
{ 
  display: block;
  list-style: none;
  float: left;
  position: relative;
}
  
ul.sf-menu li:hover 
{ 
  visibility: inherit; /* IE7 */ 
}

ul.sf-menu a 
{ 
  display: block;
  position: relative;
}
  
ul.sf-menu ul 
{ 
  position: absolute;
  left: 0;
  width: 160 px; 
  top: auto;
  left: -999999px;
}
  
ul.sf-menu ul a
 { 
  zoom: 1; /* IE6/7 */ 
}

ul.sf-menu ul li 
{ 
  float: left; 
  width: 150px;
}
  
ul.sf-menu ul ul
{ 
  top: 0;
  margin: 0 0 0 150px;
}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul
 { 
  left: auto;
}
  
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul 
{ 
  left: -999999px;
}


/* Características del menu*/
ul#nav 
{ 
  float: left;
}

ul#nav ul { 
  background: #666666;
  margin-top: 4px;
  padding-bottom: 15px;
}

ul#nav li a 
{ 
  padding: 7px 25px 6px 25px;
  font: bold 150%'News Cycle', Geneva, sans-serif;
  /*font: bold 120% Tahoma, Geneva, sans-serif; */
  /*font: bold 1.2em Tahoma, Geneva, sans-serif; */
  text-decoration: none;
  color: #0000CC;
  margin-right: 2px;
  height:45px;
  
}
/* Efecto al poner el mouse sobre el nav */
ul#nav li a:hover, ul#nav li a:focus,  ul#nav li.selected a:hover, ul#nav li.selected a:focus 
{ 
  color: #FFFFFF;
  text-shadow: none;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 20px;
  box-shadow: #0000CC 2px 2px  12px;
  /* box-shadow: inset 0 4px 4px rgba(201,234,252,0.5), inset 4px 0 4px rgba(201,234,252,0.5), inset -4px 0 4px rgba(201,234,252,0.5);*/
  background-color:#666666;
  transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;   /* Internet Explorer */
}

ul#nav ul li a { 
  color: #FFFFFF;
}

/* Modifica colores del submenu avance */
ul#nav ul li a:hover 
{ 
  color: #0000CC;
  margin-right: 1px;
  background-color:#CCCCCC;
  
}

/* Transicion de imágenes */
ul#imagenes 
{
  margin: 0 15px 10px 0;
  padding: 0;
  list-style: none;
  position: relative;
  
}

ul#imagenes li 
{
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 300px;
}

/* Estilos formulario de sugerencias*/

.formulario
{
	background-color:#FFFFFF;
	width: 600px;
	border-radius: 20px ;
	padding: 10px 30px 10px 50px;
	position: relative; 	
	margin: 50px 0px 50px 120px;
	
}
.formulario label
{	
    font: bold 120% Tahoma, Geneva, sans-serif; 
}


.formulario ul
{
	width: 580px;
	list-style-type: none;
	list-style-position: outside;
	margin: 0px; 
	padding: 0px;
}

.formulario li
{
	padding: 12px;
	border-bottom: 1px solid #bbb;
	position: relative; 	
}

.formulario li:first-child, .formulario li: last-child
{
	border-bottom: 10px solid #777;
}

.formulario h1
{
	margin: 0;
	display: inline;
}

.notificacion
{
	color: #d45252;
	margin: 5px 0 0 0; 
	display: inline;
	float: right; 
}

.formulario label
{
	width: 120px; 
	margin-top: 3px; 
	display: inline-block; 
	float: left; 
	padding: 3px; 
}

.formulario input
{
	height: 20px; 
	width: 220px;
	padding: 5px 8px;
}

.formulario textarea
{
	padding: 8px;
	width: 350px;
}

.formulario button
{
	margin-left: 160px;
}

.formulario input, .formulario textarea
{
	border: 1px solid #aaa; 
	box-shadow: 0px 0px 5px #ccc, 0 10px 15px #eee inset;
	border-radius: 2px; 
	padding-right: 30px;
    transition: padding .25s;	
	-moz-transition: padding .25s; 
	-webkit-transition: padding .25s; 
	-o-transition: padding .25s; 
}
.formulario input:focus, .formulario textarea:focus
{
	background: #FFFFFF;
	border: 1px solid #555; 
	box-shadow: 0 0 3px #aaa; 
	padding-right: 70px; 
}

.formulario input:required, .formulario textarea:required 
{ 
    background: #FFFFFF url(../images/imgAsterisco.png) no-repeat 98% center; 
} 

.formulario input:required:valid, .formulario textarea:required:valid
{
	background: #FFFFFF url(../images/imgVerdadero.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f; 
}
.formulario input:focus:invalid, .formulario textarea:focus:invalid
{
	background: #FFFFFF url(../images/imgFalso.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #red; 
}

.formatoEmail
{
	background: #d45252;
	border-radius: 3px 3px 3px 3px; 
	color: white; 
	margin-left:8px;
	padding: 1px 6px;
	z-index: 999; 
	position: absolute; 
	display: none; 
}

.formatoEmail::before
{
	content: "\25C0";
	color: #d45252; 
	position: absolute; 
	top: 1px;
	left: -6px;
}
.formulario input:focus + .formatoEmail
{
	display: inline;
}

.formulario input:required:valid + .formatoEmail
{ 
   background: #28921f; 
   
}

 .formulario input:required:valid + .formatoEmail::before 
{
	color: #28921f; 
} 

button.boton
{
	background-color: #68b12f; 
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e)); 
	background: -webkit-linear-gradient(top, #68b12f, #50911e); 
	background: -moz-linear-gradient(top, #68b12f, #50911e);background: -ms-linear-gradient(top, #68b12f, #50911e); background: -o-linear-gradient(top, #68b12f, #50911e); background: linear-gradient(top, #68b12f, #50911e); border: 1px solid #509111; 
	border-bottom: 1px solid #5b992b; 
	border-radius: 3px;
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px; 
	-ms-border-radius: 3px; 
	-o-border-radius: 3px; 
	box-shadow: inset 0 1px 0 0 #9fd574; 
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset; -moz-box-shadow: 0 1px 0 0 #9fd574 inset; 
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset; 
	color: white;
	font-weight: bold;
	padding: 6px 10px; 
	text-align: center; 
	text-shadow: 0 -1px 0 #396715;
}

  
button.boton:active
{
	 border: 1px solid #20911e; 
	 box-shadow: 0 0 10px 5px #356b0b inset;
	 -webkit-box-shadow: 0 0 10px 5px #356b0b inset; -moz-box-shadow: 0 0 10px 5px #356b0b inset; 
	 -ms-box-shadow: 0 0 10px 5px #356b0b inset;
	 -o-box-shadow: 0 0 10px 5px #356b0b inset; 
}

button.boton:hover {
	opacity: .75; 
	cursor: pointer; 
}