#cuadro{
font-size:17px;
line-height: 150%;
border-radius: 0 0 5px 5px;
border:none;
border-color:#DCDCDC;
background-color:none;
/*#F0F0F0;*/
/*width:450px;*/
text-align:left;
padding: 5px 20px 5px 20px;
}
#cuadroup{
font-size: 18px;
border-radius: 5px 5px 0 0;
border: none;
border-color:#DCDCDC;
border-bottom: none;
background-color:white;
text-align:left;
padding: 5px 20px 5px 20px;
color:#778899;
font-weight: bold;
}

#cuadroupborder{
font-family: 'Bitter', serif;
font-size: 18px;
border-radius: 0px 0px 0 0;
border-left: solid #DCDCDC;
border-right: solid #DCDCDC;
border-width: 1px;
border-bottom: solid #D2691E;
background-color:white;
text-align:left;
padding: 10px 10px 10px 10px;
color:black;
}
#cuadroborder{
/*color: #696969;
line-height: 20px;
border-left-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-width: 1px;
border-color:#DCDCDC;
border-radius: 0 0 0px 0px;*/
font-size: 16px;
/*background-color:#FFD700;*/
background-color:white;
text-align:left;
padding: 5px 10px 5px 10px;
height: 300px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.thumbnail img {
    height:200px;
    width:100%;
    overflow: hidden;
/*object-fit:scale-down;*/
}

#texto{
font-family: Palatino;
font-size:16px;
}


html,
body{
	  /*background: #F0F0F0;*/
	background:#DCDCDC;
      /*font: 14px Trebuchet MS, Trebuchet, Helvetica, Arial;*/
	/*font-family: 'Raleway', sans-serif;*/
	font-family: 'Montserrat', sans-serif;
	/*font-weight: bold;*/
	font-size:17px;
	line-height: 150%;
	text-align:left;
	margin:0 auto;
	padding: 5px 35px 5px 35px;
	height:100%;
	width:1024px;/*make content static while enlarging or decreasing window*/
}
#container{
background:white;
min-height:100%;
position:relative;
/*height:100%;*//*dejar esta instrucción hace que el footer no haga "rolling down" y se queda por encima del texto*/

border-left:none;
border-right:none;
border-color:black;  
border-bottom:none; 
}
#header{
padding-top:0px;
width:100%;
height:75px;
background-color: white;
background-position: center top;
background-repeat: no-repeat;
/* background-image: url('nop-dibujo.tiff'); */
background-size: 100%;
}
#header2{
padding-top:0px;
width:100%;
height:100px;
background-color: white;
background-position: center top;
background-repeat: no-repeat;
/* background-image: url('nop-dibujo.tiff'); */
background-size: 100%;
}
#bbody{
padding-top:250px;
padding-bottom:0px;/* Height of the footer 90 is there is footer*/
padding-left: 0px;
padding-right: 0px;
}

#cuadrofinal{
color: black;
font-size:14px;
text-align: center;
background-color: white;
border-color: #D2691E;
position:absolute;
bottom:0;
width:100%;
height:70px;   /* Height of the footer */
}


hr { background-color: #D3D3D3; height: 1px; border: 0; }

h1 {
	font-size:24pt;
	font-family: 'Bitter', serif;
	color:#213C6E;	
	/*color:##778899;*/
}

h2 {
font-weight:normal;font-size:18pt;
font-family: 'Finger Paint', cursive;

	/*font-weight:normal;font-size:24pt;font-family:Annie Use Your Telescope;*/
}

#rotando{color:#8F2250;}






ul {
        list-style: square;
}




a{
color:#213C6E; 
font-weight: bold; 
text-decoration: none;
}
a:hover { color:#696969;}

a.other{
color:#FF8C00;
font-weight:bold;
text-decoration: none;
}
a.other:hover { color:#696969;}

a.barra{
color:black; 
font-weight: bold; 
text-decoration: none;
}
a.barra:hover { color:#696969;}

/*para dos columnas*/
#div-1a {
text-align:justify;
float:right;
width:60%;
}
#div-1b {
text-align:justify;
float:left;
width:40%;
}
#div-1c {
 clear:both;
}

/*para dos columnas: las mismas que antes pero intercambiamos e igualamos un poco el ancho*/
#div-1aa {
text-align:justify;
float:right;
width:45%;
}
#div-1bb {
text-align:justify;
float:left;
width:55%;
}
#div-1c {
 clear:both;
}


.showhim {font-weight: bold; text-decoration:none; color:gray}
.showhim:hover { color:black;}
a.showhim {font-weight: bold; text-decoration:none; color:gray}
a.showhim:hover { color:#8F2250;}

.showme{ 
display: none;
}
.showhim:hover .showme{
display : block;
color:black;
text-align:justify;
font-weight: normal;
font-style: italic;
}

.showmetext{ 
display: none;
}
.showhimtext:hover .showmetext{
display : block;
/*color:black;
font-weight: normal;*/
}




/*nuevo submenu**********************/

  .mi-menu  {
    border-radius: 0px;
    border:none;
    list-style-type: none;
    margin:0;
    margin-left:0px;
    padding:0;
    width: 100%;
    /* 
	margin-top:100px;
    margin-left:-21px;
 	*/
    /* la altura y su ancho dependerán de los textos */
    height: 35px; 
    /* el color de fondo */
    background:white;
    font-family: 'Finger Paint', cursive;
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position:relative;
    
  }
  .mi-menu li a {
    border-left: none;
    border-right: none;
    color: black;
    display: block;
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    padding: 0 20px;
    margin: 6px 0;
    text-decoration: none;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { color: black; }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    border:solid 1px;
    background: white;
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada uno de los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 200px;
  }
  /* el último no tiene un borde */
  .mi-menu ul li:last-child a { border: none; }
  


.errormessage {
	text-align: center;
	font-weight: bold;
	color: red;

}


/* NAVIGATION BAR */
ul#menu {
	list-style: none;
	margin: auto;
	padding: 10px;
	text-align: left;
	background-color: #008B8B;

}

ul#menu li {
	display: inline-block;
	line-height: 15px;
	margin-left: 10px;
}

ul#menu li a {
	color: white;	
	/*color: #ffffff;*/
	background-color:#008B8B;
	text-decoration: none;
	/*font-family: 'Raleway', sans-serif;*/
	font-size: 14px;
	padding: 10px;
	/*border-bottom: 3px solid #778899;
	-webkit-border-radius: 10px 12px;
	-moz-border-radius: 10px/12px;
	border-radius: 10px/12px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);*/
	display: inherit;
}

ul#menu li a:hover {
	color: #D3D3D3;
	/*background-color: #D2691E;*/
	padding: 10px;
	/*border-bottom: 3px solid #D2691E;
	-moz-transform: rotate(5deg);
	-ms-transform: rotate(5deg); 
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);*/


}