*{box-sizing:border-box;
text-decoration: none;
}
a{text-decoration: none;}
body,html{padding: 0;margin: 0;}
body{background-color: #f4ffe4;font-size:18px;
	color: #993300;}
.inicio{
	padding: 0;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	width: 100%;
	/*height:85px;*/
	min-height:90px;
	background:url('../img/logo.jpg')left bottom no-repeat;
	background-size:400px;
	background-position:0 0;
	margin: 0 0;
		}
.principal{
	display:inline-block;
	margin-top:0;
	width: 100%;
	background-color:#99CC66 ;
	color:#993300;
	text-align: left;
	}
.marquesina
{
	display: inline-block;
	width: 100%;
	background-color:#99CC66 ;
	color:#993300;
	text-align: left;
	}

nav{
	margin-top:0%;
	padding: 10px;
	float: left;
	width:30%;
	background-color:#5C743D;
	margin-left:0;
	margin-right:0%;
	/*margin-bottom: 12px;*/
		}
nav>a{
	font-family: arial;
	font-size: 20px;
	text-decoration: none;
	text-transform: uppercase;
	color: #D5EDB3;
	background-color: #5C743D;
	min-width: 300px;
	min-height: 40px;
	padding: 15px 5px 15px 20px;
	display: block;
	/*float: left;*/
	border-top: 1px solid white;
}
nav>a:hover {
	background-color:#99CC66; 
	color:#993300;
	font-family: Arial, Helvetica, sans-serif;
	}
a:hover{
	background-color:#99CC66; 
	color:#993300;
	font-family: Arial, Helvetica, sans-serif;
}
/*.contenedor{
	width: 100%;
	margin:0 auto;
	height: 500px;
	border:1px solid black;
	clear: both;
}*/
.bienvenida{
	font-size:20px;
	float:left;
	margin-left:2%;
	margin-right:0%;
	margin-top:0%;
	width: 40%;
	padding: 5px;
	text-align: justify;
	color:#993300;
	}
.urgentes{
	display: block;
	text-align: left;
	margin-left:7%;
	/*margin-right: 10%:;*/
	margin-top:1%;
	float:left;
	width: 20%;
	height: auto;
	border:2px solid #993300;

}
.urgentes>ul{
	list-style-image: url('silvestre.png');
	list-style-position: inside;
}

	/*colores
	verde obscuro:#5c743d;
	verde claro:#99CC66; 
	gris: #999
	beige:#f4ffe4
	cafe:#993300*/

.changuizo{
	float:left;
	display: block;
	clear: both;
	width:8%;
	min-width:300px;
	margin-left:3%;
	text-align: justify;
	padding:5px;
	color:#993300;
	}
.pie{
	position: absolute;
	top:700px;
	left: 500px;
	width: 40%;
	height: 200px;
	background:url('../img/dreams.png')top center no-repeat;
	background-size: 100% 100%;
}
.yo{position: absolute;
top: 2px;
right: 20px;
width: 80px;
}
.calendario{
	display: block;
	position: absolute;
	top: 20%;
	left: 20%:;
	width: 70%;
}
.horario{
display: block;
	position: absolute;
	top: 20%;
	left: 20%:;
	width: 70%;	
}
.justificada{
text-align:justify;
margin-left:30%;
margin-top:0%;
width:70%;
height: auto;
background-color:#99CC66; 
border:2px solid #993300;
padding:0 15px;
}
.justificada>p{
	font-size: 20px;
	font-family: arial;
}
.enunciado{
	text-align: center;
	margin: 0 auto;
	border: 1px solid black;
	background-color:#99CC66;
}
.bitacora{
text-align:center;
margin-left:30%;
margin-top:0%;
width:70%;
height: auto;
border: 1px solid black;
background-color:#99CC66; 
}
.bitacora>table{
	margin: 0 auto;
	width: 100%;
	border:1px solid black;
	}
.bitacora>table>thead,.bitacora>table>caption{
	border: 1px solid black;
	text-align: center;
	font-weight: bolder;
	text-transform: uppercase;
}
.bitacora>table>caption{
	background-color: beige;
}
.bitacora>table>thead>tr>td{
	background-color:gray;
	color: #993300;
}
.bitacora>table>tbody>tr>td{
	border:1px solid black;
	text-align: left;
	width: auto;
}
.videos{
	display:inline-block;
	width:70%;
	}
.videos>table{
	display:block;
	margin:0 auto;
	padding-left:18%;
	width:100%;
	border: 1px solid brown;
	text-align: center;
	max-width:100%;
	background-color:#99CC66; 
}
.videos>tr,td{
	max-width:110px;
	max-height: 110px; 
}
.videos>h1{
	text-align: center;
	font-size: 20px;
	color:#993300; 
	text-transform: uppercase;
}
.guia{
	text-align: justify;
	font-size:25px;
	font-family: arial;
	width:70%;
	margin-left:30%;
	margin-top:0;
	border: 1px solid red;
	padding-right: 5%;
	}
.guiados{
	text-align: justify;
	font-size:25px;
	font-family: arial;
	width:90%;
	padding: 1%;
	margin: 0 auto;
	border: 1px solid red;
	}
.comentarios{
	width: 68%;
	height: auto;
	margin:0 1% 0 100%;
	background-color: #99CC66;
	padding: 10px;
	display:inline-block;
	position: absolute;
	top: 20%;
	right:0%;

}
#HCB_comment_box blockquote {
  color: ##993300 ;
  text-align:justify;
  font-size:16px;
  margin-top: 0;
  padding: 0;
  
}


.sugestopedia{
	display:inline-table;
	margin-right: 20px;
	text-align: left;
	font-size:20px;
}
.sugestopedia>li{
	font-size:20px;
	color: #993300;
}
.nomenclatura{
	width:100%;
	height: 2500px;
	margin: 0 auto;
	}
.cationes{
	width: 50%;
	float: left;
	border: 1px solid black;
	}
.cationes>table{
	width: 100%
}
.cationes>table>caption,.aniones>table>caption{
	background-color: gray;
	font-size: 20px;
	text-transform: uppercase;
	color: white;
}
.cationes>table>thead>tr>td{
	background-color:#99CC66;
	color:black;
	text-transform: uppercase;
	font-size: 20px;
	padding: 10px;
	border-color: black;
}
.cationes>table>tbody>tr>td{
	font-size: 30px;
	background-color: MediumTurquoise;
	padding:10px;
	color:black;
}
.aniones{
	width: 50%;
	float: left;
	border:1px solid black;
	}
.aniones>table{
	width: 100%
}
.aniones>table>thead>tr>td{
	background-color:#99CC66;
	padding:10px;
	font-size: 20px;
	text-transform: uppercase;
	color: black;
		}
.aniones>table>tbody>tr>td{
	background-color: pink;
	color:black;
	font-size: 30px;
	padding:10px;
	text-align: left;
}

/****************responsive disign*/
@media screen and (max-width: 980px)
{
/* ---desde aquí--*/
.horario,.calendario{
width: 100%;
display: block;
position: absolute;
top: 900px;
}
.bitacora{
	width: 100%;
	margin:0;
}
.bitacora>table>caption{
	font-weight: bold;
	font-size: 19px;
	background-color: gray;
	color: white;
}
.bitacora>table>thead>tr>td{
	border:1px solid black;
	background-color: #f4ffe4;
	width:auto;
	color: 
}
.cationes
{width: 100%;
float: left;
margin: 1px;
}
.cationes>table>thead>tr>td{
	text-align:center;
	padding: 1px;
	font-size: 13px;
}
.cationes>table>tbody>tr>td
{
	color:white;
	font-size: 12px;
	padding: 1px 7px 1px 7px;
	}
.aniones{
	width: 100%;
	float: left;
	margin: 1px;
}
.aniones>table>caption{
	font-size: 18px;
}
.aniones>table>thead>tr>td{
	font-size: 13px;
	text-align: center;
	padding: 1px;
}
.aniones>table>tbody>tr>td{
	font-size: 13px;
	padding: 7px 7px;
	}
.aniones>table>tbody>tr>td>sub{
	font-size:11px;
	}
.yo{
position: absolute;
top:.5%;
left: 95%;
width:4%;
}
.principal{
	display: block;
	position: absolute;
	top:20%;
	width: 100%;
	background-color:#99CC66 ;
	color:#993300;
	padding: 5px;
	text-align: left;}

.marquesina{
display: block;
position: absolute;
top:100px;
width: 100%;
background-color:#99CC66 ;
color:#993300;
padding: 2px;
font-size: 15px;
text-transform:capitalize;
text-align: left;}

.inicio{
	font-size: 13px;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	height: 90px;
	background:url('../img/logo.jpg')left bottom no-repeat;
	background-size: 20%;
	background-position:0 0px;
	color: #993300;
	margin: 0 auto;}

.contenedor{
	width:100%
	display:block;
	}

nav{
	width: 100%;
	float: left;
	margin: 1px auto;
		}

nav>a{
	/*margin-top:25px;
	font-family: arial;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	color: #D5EDB3;
	background-color: #5C743D;*/
	min-width: 100%;
	min-height: 2px;
	padding: 15px 0;
	width: 100%
	border-top: 1px solid white;}
nav>a:hover {
	background-color:#99CC66; 
	color:#993300;
	padding: 15px 0;
	font-family: Arial, Helvetica, sans-serif;}	
.bienvenida{
	font-size: 12px;
	text-transform: lowercase;
	font-weight: bold;
	width:100%;
	float: left;
	margin: 0;
	text-align:left;
	color:#993300;
	}
	.urgentes{
	float: left;
	margin:0 auto;
	text-align: left;
	width: 100%;
	height: auto;
	border:2px solid #993300;
}
.changuizo{
	clear: both;
	font-size: 12px;
	float: left;
	margin:1px;
	padding:0 12px 0 0;
	text-align: center;
	width: 100%;
	height: auto;
	border:1px solid black;
}
.pie{
	width: 30%;
	height: 100px;
		}
.videos{
	display:block;
	width:100%;
	margin: 0 auto;
	}
.videos>table{
	padding: 0;
	width:100%;
	background-color:#99CC66; 
}
.videos>tr,th{
	display: block;
	max-width: 2px;
	padding: 0;
	border: 4px solid red;
}
/*.videos>iframe{
	width: 100%;
		}*/
.videos>h1{
	display: block;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	font-size: 20px;
	color:#993300; 
	text-transform: uppercase;
}	
.comentarios{
	width: 100%;
	height: auto;
	margin:0 auto;
	background-color: #99CC66;
	padding: 10px;
}
.guia{
	width: 100%;
	clear: both;
	margin-left: 0;

}
.comentarios{
	width: 100%;
	margin-left: 0;
	clear: both;
	height: auto;
}
	/*---hasta aquí--*/		
}