@font-face {
    font-family: 'Calibri';
    src: url('../fonts/calibri.bin');    
    src: local('Calibri'), url(../fonts/calibri-1.bin) format("opentype");
}
@font-face {
    font-family: 'Calibri Bold';
    src: url('../fonts/calibrib.bin');    
    src: local('Calibri bold'), url(../fonts/calibrib-1.bin) format("opentype");
}
@charset "utf-8";
/* CSS Document */
html {
	overflow-y: scroll; 
}
a {
	color: #000000;
	background-color: #e4e4e4;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	color: #000000;
	background-color:#e4e4e4;
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
html, body {
	margin: 0px;
	padding: 0px;
}
body {
	font-family: 'Calibri', Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #e4e4e4;
	background-image: url(../images/background.gif);
	background-repeat: repeat-y;
	background-position: center top;
}
#main {
	clear: both;
	width: 980px;
	margin: 0 auto;
	padding: 0px;
	text-align: left;
}
#idiomas {
	clear: both;
	width: 200px;
	text-align: center;
	font-size: 12px;
	margin-bottom:20px;
}
#menu {
	float: left;
	width: 220px;
	padding: 10px;
	margin: 0px;
	color: #666;
/*	background-color:#0F0; */
}
#menu ul {
	margin: 0px;
	margin-top: 30px;
	margin-left: 20px;
	padding: 0px;
}
#menu ul li {
	font-size: 16px;
	line-height: 32px;
	text-decoration: none;
	list-style-type: none;
}
#menu ol {
	margin-top: 0px;
	margin-left: 30px;
	margin-bottom: 5px;
	padding: 0px;
}
#menu ol li {
	font-size: 16px;
	line-height: 22px;
	text-decoration: none;
	list-style-type: square;
}
#menu a, a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	padding: 3px;
	text-align: left;
}
#menu a:hover {
	color: #ffffff;
	background-color:#000000;
}
#menu form {
	margin: 0px;
	margin-left: 20px;
	padding: 0px;
	font-size: 14px;
	font-weight: bold;
	line-height: 30px;
	color:#333333;
}
#menu select {
	color:#FFF;
	background-color:#999999;
	border: 1px solid #999999;
	width: 180px;
	padding: 3px;
	font-size:16px;
}
#contenido {
	padding: 0px;
	margin-right:20px;
	width: 720px;
	float:right;
/*	background-color:#FF0; */
}


/* MIGUEL: INICIO*/
.img_listado {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #000; 
    margin: 0px 0px 0px 20px;
	box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	box-shadow: 5px 5px 5px grey;
}

.img_listado:hover {
  transition: transform 0.5s; /* Animation */
  transform: scale(5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
 /* position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;max-width:100%;max-height:100%;filter:alpha(Opacity=100);-webkit-opacity:1;-moz-opacity:1;-ms-opacity:1;-o-opacity:1;opacity:1; */
/* INFO: https://www.cssmatic.com/es/box-shadow 
 https://css-tricks.com/almanac/properties/b/box-shadow/ 
 https://stackoverflow.com/questions/21775817/zoom-position-on-hover
 https://w3bits.com/css-image-hover-zoom/ 
 https://stackoverflow.com/questions/51496067/scale-and-center-image-on-hover 
 https://stackoverflow.com/questions/51980320/css-animation-zooming-element-from-its-position-to-center 
 https://stackoverflow.com/questions/49488582/css-image-zoom-and-center-on-hover 
 https://stackoverflow.com/questions/26488960/zoom-vs-scale-in-css3
 https://codepen.io/wifeo/pen/qzwkb 
 https://www.lawebdelprogramador.com/foros/CSS/1619024-Efecto-zoom-centrado-en-la-pantalla.html
 https://border-image.com/ */
}	

.img_slider {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #000; 
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	box-shadow: 10px 10px 5px grey;
}

#col_dir {
	float:right;
	width: 200px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

#col_dir img{
   border-style: solid;
   border-width: 2px 2px 2px 2px;
   border-color: #000; 
   box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.50);
}
#col_dir:hover img{
  position: relative;
  margin: auto;
  margin-top: 130px;
  margin-left: -250px; 
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.50);
  transition: transform 0.5s; /* Animation */
  transform: scale(2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
/*  height:270px;
  width: 200px;  */
 /* position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;max-width:200%;max-height:200%;filter:alpha(Opacity=100);-webkit-opacity:1;-moz-opacity:1;-ms-opacity:1;-o-opacity:1;opacity:1; */
}

/* MIGUEL: FINAL*/