/*
Esquema de colores del sitio:
	Color del Menú: #ffdd9af0 

*/

.box_destacado{
	margin-left:2em;
	border-style: solid;
	border-width: medium;
	border-color: orange;
	border-radius:10px;
	padding: 5px;
}

.programas_materias{
	display: inline-block;
	width: 100%;
	height: 2em;
	overflow: hidden;
	max-width:350px;
	margin: 0.2em;
	padding-left:2em;	
	padding-right: 1em;	

	font-size: 16px;
	font-weight: bold;
	color: white;
	
	background-image:url(/media/adobe_pdf.png);
	background-repeat: no-repeat;
	background-size:contain;

	line-height: 2em;
	background-color: #eebb7af0;
	border-radius: 10px;
	border-color: #bb997af0;
	border-style: solid;	
}


.texto_grande{
	margin:.3em;
 	
	padding: 1em;	
	text-decoration: none;
	
	font-size: 20px;
	font-weight: bold;
	color: #444;

	line-height: 1.5em;
	background-color: #ffdd9af0;
	
	border-radius: 10px;
	border-color: #bb997af0;
	border-style: solid;	
}

.actas_anteriores h2{
	padding-left: 2em;
	background-color: #eebb7af0;	
	color:white;
}
	
.actas_anteriores a{
	display:inline-flex;
	float: left;
	width:auto;

	margin:.3em;
 	
	padding-left: 1em;
	padding-right: 1em;	
	text-decoration: none;
	
	font-size: 22px;
	font-weight: bold;
	color: white;

	line-height: 2em;
	background-color: #eebb7af0;
	
	border-radius: 10px;
	border-color: #bb997af0;
	border-style: solid;	
}

.lista_actas ul li {
	width:auto;
	
	margin:5%;
	  	
  	margin-top: 1em;  				
  	margin-bottom: 0.2em;  		
	padding-left: 1em;
	padding-right: 1em;	
	list-style: none;
	
	font-size: 22px;
	font-weight: bold;
	color: white;

	line-height: 2em;
	background-color: #eebb7af0;
	
	border-radius: 10px;
	border-color: #bb997af0;
	border-style: solid;	
}

.fecha_actas {
	float: right;
}

.lista_actas ul {
	
	margin:2%;

  	margin-top: 0.5em;  				
  	margin-bottom: 0.2em;  		
	padding: 1em;
	list-style: none;
	
	font-size: 26px;
	font-weight: bold;
	color: #000000A0;

	line-height: 2em;
	background-color: #bb997a20;
	
	border-radius: 10px;
	border-color: #bb997a30;
	border-style: solid;	
}





.lista_decorada ul li{
  	margin-top: 1em;  				
  	margin-bottom: 0.2em;  		
	padding-left: 1em;
	list-style: none;
	font-size: 22px;
	font-weight: bold;
	color: white;
	line-height: 2em;
	background-color: #eebb7af0;
}

.lista_decorada ul ul{
  	margin-top: 0.5em;  				
  	margin-bottom: 0.5em;  			
	padding-left: 1.5em;
	background-color: white;
}

.lista_decorada ul ul li{
  	margin-top: 0.5em;  					
  	margin-bottom: 0.2em;	
	font-size: 18px;
	font-weight:normal;
	color: black;	
	line-height: 2.5em;
	background-color: #ffdd9a80;
}

.lista_decorada ul ul ul li{
  	margin-bottom: 0.2em;	
	font-size: 16px;
	font-weight:normal;
	color: black;	
	line-height: 2em;
	background-color: white;
}

.contenedor_box_elemento_listado {
  position: relative;
  display: inline-block;
  overflow: visible;
  float:none;  
  
  margin-left: 2%;
  margin-bottom: 1em;
  
  width:25%;
  min-width:20em;
  
  padding: 1%; 
      
  text-align: left; 

  border-style:solid;
  border-width: 1px;
  border-color: #e0e0e0ff;  
  border-radius: 5px;  

  background-color: #ffdd9a30;
  font-family: Arial;
  font-size: 16px;
}


.contenedor_box_elemento_listado h3{
	margin-top: 0.3em;
	margin-bottom: 0.3em;	
}
	
	
.box_elemento_listado {
  position: relative;
  display: block;
  overflow: visible;
  float:left;  
  
  margin-left: 10px;
  margin-bottom: 5px;
  
  width:90%;
  /*min-width:20em;*/
  
  padding: 5px; 
      
  text-align: left; 

  border-style:solid;
  border-width: 1px;
  border-color: #e0e0e0ff;  
  border-radius: 5px;  

  background-color: #ffdd9a50;
  font-family: Arial;
  font-size: 16px;
}

.encabezado_box_elemento_listado {
  position: relative;
  display: block;
  overflow: visible;
  float:left;  
  
  margin-left: 10px;
  margin-bottom: 0.3em;
  
  width:auto;
  /*min-width:20em;*/
  
  padding: 6px; 
      
  text-align: left; 

  border-style:solid;
  border-width: 1px;
  border-color: #e0e0e0ff;  
  border-radius: 5px;  

  background-color: #ffdd9ab0;
  text-align: right;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
}


/* Botones para elegir entre las aulas del departamento (222, Híbrida, Laboratorio, Robótica, etc,) */
.botonera_aulas a
{
	display:inline-block;
	border-radius: 3px;
	text-align: center;
	padding: 10px;
	margin: 3px;
	text-decoration: none;
	background-color:#ffdd9af0;
}

.botonera_aulas a:hover
{
	background-color:#e0c080f0;
}

/* Posiciona el contenedor de la barra de navegación */

.dashboard
{
	margin-top: -3em;	
	display:inline-block;
	text-align: center;
	width: 100%;
	height: 150px;
	background-color: #A884;
}

.elemento_dashboard a{
	display:block;
	position:relative;
	margin:auto;
	width: 100%;
	height: 100%;
	text-align: center;
	text-decoration: none;

   vertical-align:middle;
   
   line-height: 1.2 em; 
	font-family: Arial Black;
	font-size:12px;
	color:#000000a0;

	background-position: center;	
	background-size:50%;
	background-repeat: no-repeat;

	/*background-color: #ff0000a0;	/* Color de fondo para el texto sobre la imagen */

	transition: all 0.2s ease;
}	

.elemento_dashboard
{
	display:inline-block;
	overflow: hidden;
	position:relative;

	width: 100px;
	height: 100px;
	border-radius: 20%;
	margin:20px;

/*	padding-top: 0px;*/

	text-align:center;

	color:white;

	background-color: #ffdd9aff;
	filter: drop-shadow(7px 7px 5px #0006);
	transition: all 0.2s ease;	
}

.dash_1 a {
	background-image:url(dashboard/novedades.png);
}

.dash_2 a {
	background-image:url(dashboard/horarios.png);
}

.dash_3 a {
	background-image:url(dashboard/docentes.png);
}

.dash_4 a {
	background-image:url(dashboard/concursos.png);
}

.dash_5 a {
	background-image:url(dashboard/consejo.png);
}

.dash_6 a {
	background-image:url(dashboard/materias.png);
}

.dash_7 a {
	background-image:url(dashboard/autoridades.png);
}

.dash_8 a {
	background-image:url(dashboard/personal.png);
}

.dash_9 a {
	background-image:url(dashboard/aulas.png);
}

.elemento_dashboard:hover
{
	filter: drop-shadow(7px 7px 5px #0006);	
	transition: all 0.2s ease;	
}

.elemento_dashboard a:hover
{
	background-size:70%;
	background-color: #e0b060ff;
	transition: all 0.2s ease;	
}

.titulo_sobre_elemento_dash
{
	position:relative;
	top:0%;
	display: block;
	width: 100%;
	background-color:#FFFFFF80;
	transition: all 0.5s ease;		
}

.elemento_dashboard a:hover > .titulo_sobre_elemento_dash  /* Modifica posición de elemento hijo cuando ocurre un evento hover sobre el padre */
{
	top:10%; /* Desplaza el titulo sobre  la imagen al pasar cursor*/
	background-color:#FFFFFFFF;	
	transition: all 0.5s ease;		
}




.container {
  padding: 0px;
  position: absolute;
  margin-top: 0px;
  width: 100%;
  height: 100%;
  background-color: #00ff0000;
  font-family: Arial;  
}


.container_1 {
  display: table;  /* para que el bloque se adapte al tamaño del contenido*/
  position: relative;
  margin-top: 0px;
  width: 100%;
  min-height: 3%;
  background-color: #eee8e0ff;
}

.container_slides {
  overflow: hidden;
  position: relative;
  margin: auto;
  width: 100%;
  min-height: 8em;    /* Altura mínima de recuadro contenedor para las imágenes slides*/
  background-color: #eee8baff;
}


.bloke_img {
	overflow:visible;	
	display:inline-block;
   vertical-align:middle;  	

	position:relative;
	/*min-width: 500px;*/	
	/*min-height: 200px;*/
	width: 33.3%;
	height: 350px;
	background-color: #FFF0;
}	

    

.bloke_img a{
	display:block;
	position:relative;
	margin:auto;
	width: 110%;
	height: 100%;
	text-align: center;
	text-decoration:none;

   line-height: 2em; 
	font-family: Arial Black;
	font-size:26px;
	color:#FFFFFF90;

	/*color: #0000AAFF;*/
	opacity:0.7;
	/*background-image:url(slides/clase.jpg);*/
	background-position: center;	

	background-size:500px;
	background-repeat: no-repeat;
	clip-path: polygon(10% 0%,0% 100%,90% 100%,100% 0%);

	background-color: #00000000;	/* Color de fondo para el texto sobre la imagen */

	transition: all 0.3s ease;
}	


.bloke_img a:hover
{
	opacity:1;
	color:#FFFFFFFF;
	
	background-position: center;
	background-size: 600px;
	
	background-color: #AA563A80; /* Color de fondo para el texto sobre la imagen al posarse sobre el elemento */
	
	/*filter: drop-shadow(7px 7px 5px #0006);*/	
	transition: all 0.3s ease;
}	

.bloke_img a:hover > .titulo_sobre_imagen_carreras  /* Modifica posición de elemento hijo cuando ocurre un evento hover sobre el padre */
{
	top:10%; /* Desplaza el titulo sobre  la imagen al pasar cursor*/
}

.titulo_sobre_imagen_carreras
{
	position:relative;
	top:0%;
	
	margin: auto;
	display: block;
	width: 100%;

	background-color:inherit;
	transition: all 0.3s ease;	
}

.imagen1 a{
	background-image:url(slides/img_lic_mat2.jpg);
	clip-path: polygon(0% 0%,0% 100%,90% 100%,100% 0%);
}

.imagen2 a{
	background-image:url(slides/img_prof_mat2.jpg);
}

.imagen3 a{
	background-image:url(slides/img_lic_mapl.jpg);
	clip-path: polygon(10% 0%,0% 100%,100% 100%,100% 0%);	
}


/* ----INICIO Viewport es menor a 700px  (celulares o ventanas minimizadas)------ */
@media (max-width:700px) {

	.bloke_img {
		overflow:visible;	
		display:inline-block;
	   vertical-align:middle;  	
	
		position:relative;

		width: 100%;
		height: 250px;
		background-color: #FFF0;
	}	

	.bloke_img a{
		display:block;
		position:relative;
		margin:auto;
		width: 100%;
		height: 100%;
		text-align: center;
	
	   line-height: 2em; 
		font-family: Arial Black;
		font-size:26px;
		color:#FFFFFF90;
	
		/*color: #0000AAFF;*/
		opacity:0.7;
		/*background-image:url(slides/clase.jpg);*/
		background-position: center;	
		background-size:700px;
		background-repeat: no-repeat;
	
		background-color: #00000000;	/* Color de fondo para el texto sobre la imagen */
	
		transition: all 0.3s ease;
	}	
	
.bloke_img a:hover
{
	opacity:1;
	color:#FFFFFFFF;
	
	background-position: center;
	background-size: 800px;
	
	background-color: #AA563A80; /* Color de fondo para el texto sobre la imagen al posarse sobre el elemento */
	
	/*filter: drop-shadow(7px 7px 5px #0006);*/	
	transition: all 0.3s ease;
}
	
	.imagen1 a{
		background-image:url(slides/img_lic_mat2.jpg);
	   clip-path: polygon(0% 0%,0% 100%,100% 100%,100% 0%);		/* Override de la propiedad clip-path  */
	}
	
	.imagen2 a{
		background-image:url(slides/img_prof_mat2.jpg);
	   clip-path: polygon(0% 0%,0% 100%,100% 100%,100% 0%);	  /* Override de la propiedad clip-path  */
	}
	
	.imagen3 a{
	background-image:url(slides/img_lic_mapl.jpg);
	   clip-path: polygon(0% 0%,0% 100%,100% 100%,100% 0%);	 /* Override de la propiedad clip-path  */
	}

}
/* FIN ------ Viewport es menor a 700px  (celulares o ventanas minimizadas)------ */


.titulo_sobre_slides {
  position: relative;
  overflow: hidden;
  z-index: 2;

  margin-top: 0.7em;  

  width: 100%;
  
  padding-left: 1em;
 
  line-height: 100%; 

  height: 3.5em;    /* Altura mínima de recuadro contenedor del texto informativo superpuesto a las slides */

  font-family: Arial Black;
  font-size:26px;
  color:white;

  background-color: #00888860;
}

.titulo_sobre_slides a{
	
  margin-top: 0.1em;
  margin-bottom: 0.1em;  
  font-family: Arial Black;
  font-size:26px;
  text-decoration: none;
  color:white;

  background-color: #00888860;
}

.titulo_sobre_slides p{
  margin-top: 0.5em;
  margin-bottom: 0.1em;  
}

.titulo_seccion{
	position:relative;

	text-align: center;

	width:100%;
	padding-top:0.1em;
	padding-bottom:0.1em;	

	margin-top: 0px;	
	display:inline-block;
	overflow: visible;
	background-color:#ffdd9af0;
}

.titulo_seccion h2{
	color:#FFFFFF;
	text-shadow: 0 0 2px #000000;	
	margin: 0px;
}

.titulo_seccion h3{
	color:#FFFFFF;
	text-shadow: 0 0 2px #000000;	
	margin: 0px;
}

.imagen_seccion{
	display: block;
	position: relative;
	top: 0px;
	width: 100%;
	height:130px;
	background-color:#FFFFFFFF;
	overflow: hidden;
}

.imagen_seccion img{
	display: block;
	position: relative;
	/*top: -30%;*/
	width: 100%;
}

.imagen_seccion_tit{
	position:absolute;
	width: 100%;
	background-color:#f0d090a0;
	bottom:0px;
}

.imagen_seccion_tit h1{
	float: left;
	color: white;
	padding: 7px;
	margin: 0px;
	margin-left: 7%; 
	text-shadow: 0 0 2px #000000;	
}

.container_columna_1 {
  position: static;
  padding: 3px;
  margin:2px;  
  display: block;
  float:right;
  width: 70%;
  height: 80%;
  background-color: #ffffffff;
}

.container_columna_2 {
  position: static;
  padding: 3px;  
  margin:2px;  
  display: block;
  float:right;
  width: 30%;
  height: 80%;
  background-color: #ffffffff;
}


.container_2 {
  position: static;
  display: block; 
  margin: 0px;
  padding-left: 0em;
  width: auto;
  height: 80%;
  background-color: #ffffffff;
}

.container_2 h3 {
  padding-left: 1em;
  margin-bottom: 1em;
}


.container_2 p {
  padding: 0px;
  margin: 0px;
  margin-bottom: 1em;
}

.container_2 ul{
  list-style: square inside;
  margin-bottom: 1.5em;  
}

.container_2 ul a{
  text-decoration:none;
}

.container_2 ul ul{
  list-style: circle inside;
}

.container_2 ul li{
  /*margin-bottom: 1em;*/  	
}

.container_2 ul ul li{
 /*margin-bottom: 0.8em;*/  	
}


.bloque_seminarios{
	position:relative;

	color: white;	
	text-decoration: none;
	
	display:block;
	overflow: visible;
	
	margin: 0.3em;
	padding: 0.5em;
}

.bloque_seminarios a{
	display:block;
	border-style: solid;
	border-radius:1em;
	border-color: #FFFFFF30;
	border-width:2px; 
	
	color: white;
	width: 80%;
	margin: auto;
	padding: 0.2em;
	
	background-color: #f0600030;
	
	text-shadow: 0 0 12px black;
	text-decoration: none;
	text-align:center; 
}

.bloque_llamados{
	position:relative;
	padding: 0.5em;
	display:block;
	overflow: visible;
	background-color:#f0c07060;
	margin: 0.5em;
}

.bloque_llamados ul li{
	margin-bottom: 0em;
}

.bloque_resolucion{
	position:relative;
	padding: 0.5em;
	display:block;
	overflow: visible;
	background-color:#f0c07060;
	margin-bottom: 0.5em;
}

.bloque_concurso{
	position:relative;
	padding: 0.5em;
	display:block;
	overflow: visible;
	background-color:#f0c07060;
	margin-bottom: 0.5em;
}

.lista_en_bloque_col1{
	position:relative;
	padding: 0.5em;
	display:inline-block;
	overflow: visible;
	background-color:#eee8e040;
	margin-bottom: 0.5em;	
}

.lista_en_bloque_col2{
	position:relative;
	padding: 0.5em;
	display:inline-block;
	overflow: visible;
	background-color:#f0c07060;
	margin-bottom: 0.5em;

}

.lista_en_bloque_col3{
	position:relative;
	padding: 0.5em;
	display:inline-block;
	overflow: visible;
	background-color:#eee8e0ff;
}


.headbar2 {   /* Contenedor de logo */
  position: relative;
  margin:4px;
  width:100%;  
  text-align: left; 
  display: block;
  overflow: visible;
  float: left;
  height: 50px;
  background-color: #eee8e0ff;

  font-family: Arial;
  font-size: 12px;
  z-index: 1;
}

.headbar {   /* Contenedor de info de contacto y links de redes sociales */
  display: block;
  position: relative;
  height: 100%;
  width: 100px;
  text-align: right; 
  overflow: visible;
  float: right;
  /*background-color: #ffffff50;*/
  font-family: Arial;
  font-size: 16px;
  padding-top: 0px;
}

/* Formato de texto y párrafos en la barra de contacto  */
.headbar p{
  margin-right: 2em; 
  vertical-align: 50%;  
  display: inline;
  background-color: #ccbb7a00;
}

/* iconos de redes sociales contacto y redes sociales */
.headbar a {
  float:right;
  display:block;  
  width: 24px;
  height: 24px;
  margin: 3px;	
  opacity: 0.5;
  font-size: 16px;  
}


.social {
  padding: 0px;	
  display:block;
  position:relative;
  height:100%;  /*Altura de los iconos de la barra de contactos*/
  opacity: 0.5;
}

.social_fb a{
  background-image: url(media/fb.png);  
  background-repeat: no-repeat;
  background-size:cover;
}

.social_yt a{
  background-image: url(media/yt.png);  
  background-repeat: no-repeat;
  background-size:cover;
}

.social_ig a{
  background-image: url(media/ig.png);  
  background-repeat: no-repeat;
  background-size:cover;
}


 /* Contenedor de barra de navegacion principal, menu */
.navbar {
  position:static;
  box-sizing:border-box;
  float:left; 
  overflow: visible;
  width: 100%;
  /*height:3em;*/
  background-color: #ffdd9af0;
  font-family: Arial;
  padding: 10px;
}

/* logo del depto a la izquierda de la barra de navegacion */
.logo {
  position: relative;
  display:block;
  
  /*height: 36px;*/
  height:100%; /* ajusta automáticamente el ancho de la imagen manera proporcional al alto definido */ 
  margin-top: 0px;  
  margin-left: 0px;

  background-image: url(/media/logo_dto2.png);  
  background-repeat: no-repeat;
  background-size:contain;
}

 /* Filete separador de barra de navegación de los contenidos */
.filet {
  overflow: hidden;
  height: 1px;
  background-color:#c07020ff; /* #c0b0b080;*/
}

/* Links dentro del navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  text-decoration: none;
}

/* Contenedor de dropdown */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Contenedor de dropdown de segundo nivel */
.dropdown2 {
  float: none; 	/* que no flote para que los elementos del listado queden en secuencia vertical  */
  overflow: hidden;
}

/* Contenedor de dropdown de segundo nivel */
.dropdown3 {
  float: none; 	/* que no flote para que los elementos del listado queden en secuencia vertical  */
  overflow: hidden;
}

/* Contenedor de dropdown de segundo nivel */
.dropdown4 {
  float: none; 	/* que no flote para que los elementos del listado queden en secuencia vertical  */
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;

  border-left-style: solid;
  border-left-width: 4px;
  border-left-color: #F0bb55;
  
  outline: none;
  color: black;
  padding: 3px 20px 3px 5px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 2px; /* Important for vertical align on mobile phones */
  z-index: 3;
}

/* Fondo rojo al posarse en los links desplegables de la barra de navegación */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #e0b06060;
}


/* Contenido desplegable (oculto por defecto) */
.dropdown-content {
  border-radius: 3%;  
  display: none;
  position: absolute;
  margin-top:-0.2em;	/* desplaza un poco el bloque del desplegable hacia arriba para que el puntero del mouse no pierda contacto con el elemento padre */    
  background-color: #ffdd9af0;
  min-width: 160px;
  max-width: 360px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  z-index: 3;
}

.dropdown-content2 {
  border-radius: 3%;	
  display: none;
  position: absolute;
  margin-left:8.0em; /* desplaza segundo nivel de desplegables a la derecha del desplegable anterior */
  margin-top:-2.0em;	/* desplaza ...  hacia arriba...  */  
  background-color: #ffdd9af0;
  min-width: 160px;
  max-width: 360px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  z-index: 3;
}

.dropdown-content3 {
  border-radius: 3%;	
  display: none;
  position: absolute;
  margin-left:7.0em; /* desplaza segundo nivel de desplegables a la derecha del desplegable anterior */
  margin-top:-3.0em;	/* desplaza ...  hacia arriba...  */  
  background-color: #ffdd9af0;
  min-width: 160px;
  max-width: 360px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  z-index: 3;
}

.dropdown-content4 {
  border-radius: 3%;	
  display: none;
  position: absolute;
  margin-left:9.0em; /* desplaza segundo nivel de desplegables a la derecha del desplegable anterior */
  margin-top:-8.0em;	/* desplaza ...  hacia arriba...  */  
  background-color: #ffdd9af0;
  min-width: 160px;
  max-width: 360px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  z-index: 3;
}

/* Links dentro del desplegable */
.dropdown-content a {
  border-radius: 7%;  
  float: none;
  color: black;
  padding: 15px 15px;
  min-width: 160px;
  max-width: 360px;  
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content2 a {
  border-radius: 7%;  
  float: none;
  color: black;
  padding: 15px 15px;
  min-width: 160px;
  max-width: 360px; 
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content3 a {
  border-radius: 7%;  
  float: none;
  color: black;
  padding: 15px 15px;
  min-width: 160px;
  max-width: 360px; 
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content4 a {
  border-radius: 7%;  
  float: none;
  color: black;
  padding: 15px 15px;
  min-width: 160px;
  max-width: 360px; 
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Fondo gris al posarse en los links del menu */
.dropdown-content a:hover {
  background-color: #e0b06060;
}

.dropdown-content2 a:hover {
  background-color: #e0b06060;
}

.dropdown-content3 a:hover {
  background-color: #e0b06060;
}

.dropdown-content4 a:hover {
  background-color: #e0b06060;
}

/* Muestra el menu desplegable al posarse */
.dropdown:hover .dropdown-content{
  display: block;
} 

.dropdown2:hover .dropdown-content2{
  display: block;
}

.dropdown3:hover .dropdown-content3{
  display: block;
}

.dropdown4:hover .dropdown-content4{
  display: block;
}

 .caret {   /* flechas par indicar menu desplegable */
     width: 0;
     height: 0;
     display: inline-block;
     border: 5px solid transparent;
 }
 .caret.down{
     border-top-color: black;
 }
 .caret.right{
     border-left-color: black;
 }
 .caret.up{
     border-bottom-color: black;
 }
 .caret.left{
     border-right-color: black;
 }