/*  regla de reset  */
*{margin:0;padding:0;}
img{max-width:100%;}
div{box-sizing:border-box;}
.clear{clear:left;}
.center{text-align:center;}
.right{text-align:right;}
#header,#banner,#content,#footer{margin:0 auto 0 auto;}
	
#wrapheader{background-color:white;color:#AE4E50;}	
#header{
	border:0px solid black;
	width:100%;
	/*height:100px;*/
	text-align:center;
	padding:20px;
}
#wrapbanner{background-color:#004080;color:#FFFFFF;}	
#banner{
	border:0px solid black;
	width:100%;
	padding:20px;
}
#wrapcontent{background-color:white;}	
#content{
	border:0px solid black;
	width:100%;
	padding:20px;
}
#wrapfooter{background-color:black;color:white;}	
#footer{
	border:0px solid black;
	width:100%;
	padding:20px;
}
#tusitioweb{text-align:center;padding:20px 0;}
#tusitioweb a{color:white;}
#tusitioweb a:hover{color:lime;}
/******************  HEADER *************************/
h1{
color:#333333;
font-size:16px;
font-weight:bold;
text-align:center;
margin-bottom:15px;
}
.pc{display:none;}
#inst .logo{padding-top:20px;border:0px solid lime;}
#inst .logo img{width:70%;}
/******************  BANNER *************************/
#texto_banner{padding-top:20px;}
#banner #texto_banner ul{
list-style-type:square;
margin-left:40px;
}
#banner #texto_banner li{padding-bottom:15px;font-size:24px;font-weight:normal;}
#banner #texto_banner li .mini{font-size:18px;color:#e0f7ff;}
#banner #texto_banner li a{color:#FFFFFF;text-decoration:none;}
#banner #texto_banner li a:hover{color:#00bcd4;}
/******************  CONTENT *************************/
#texto .destacado{font-weight:bold;}
#texto h2{border:0px solid green;
font-size:20px;
font-weight:bold;
text-align:center;
margin-bottom:15px;
}
#texto h3{border:0px solid green;
font-size:16px;
line-height:26px;
font-weight:bold;
text-align:left;
margin-bottom:10px;
}
#texto p{border:0px solid green;
font-size:16px;
line-height:22px;
font-weight:normal;
text-align:justify;
margin-bottom:10px;
}
#texto ul, ol {
    padding: 0;
    margin: 0;
    list-style-type:none;
}
#texto li {
    margin-bottom: 15px; /* Espacio debajo de los elementos de la lista */
}
#texto a {
    text-decoration: none; /* Elimina el subrayado */
    color: #fff; /* Color del texto por defecto */
    background-color: #3498db; /* Color de fondo por defecto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    display: inline-block; /* Asegura que el fondo del enlace se ajuste al contenido */
}
#texto a:hover {
	color: #fff; /* Color del texto al pasar el mouse */
	background-color: #2980b9; /* Color de fondo al pasar el mouse */
	text-decoration: none; /* Mantiene el enlace sin subrayado al pasar el mouse */
}       
/******************  GALERIA *************************/
#galeria_fotos img{border-radius:10px;}
#galeria_fotos h2{border:0px solid green;
font-size:26px;
font-weight:normal;
text-align:center;
margin-bottom:15px;
}
#galeria_fotos article{border:0px solid red;margin-bottom:20px;}
#galeria_fotos table{border:0px solid red;margin-bottom:20px;}
#galeria_fotos h3{border:0px solid blue;
font-size:20px;
font-weight:normal;
text-align:left;
margin-bottom:20px;}
#galeria_fotos table th{
font-size:16px;
font-weight:bold;
text-align:left;
}
#galeria_fotos table td{
font-size:16px;
font-weight:normal;}
#galeria_fotos .ancho{float:left;padding:5px;width:33.33%;}
@media only screen and (min-width: 1024px) {
	#galeria_fotos .ancho{width:25%;}
	#texto table{width:60%;}
}
/******************  FOOTER *************************/
#fixed{
position:fixed;
bottom:20px;
right:20px;
z-index:1000;
}
#footer {}
#footer p{padding-bottom:20px;line-height:1.4em;}
#footer a{color:white;text-decoration:none;}
#footer a:hover{color:lime;}

#tusitioweb{text-align:center;padding:0 0 20px 0;}
@media only screen and (min-width: 420px) {
	#texto h2{font-size:24px;}
	#texto h3{font-size:20px;}
}
@media only screen and (min-width: 480px) {
	#header,#banner,#content,#footer{width:480px;}
	#inst .logo img{width:auto;}
	h1{font-size:22px;}
}
@media only screen and (min-width: 768px) {
	#header,#banner,#content,#footer{width:768px;}
}
@media only screen and (min-width: 1024px) {
	#header,#banner,#content,#footer{width:1024px;}
	.hijo_banner{
		width:50%;
		float:left;
	}
	#texto_banner{padding-top:80px;}
	#banner #texto_banner li{font-size:30px;}
	#banner #texto_banner li .mini{font-size:22px;}
	.pc{display:block;}
}	

@media only screen and (min-width: 1280px) {
	#header,#banner,#content,#footer{width:1280px;}
}	

@media only screen and (min-width: 1440px) {
	#header,#banner,#content,#footer{width:1440px;}
}