/*
Theme Name: Felinos Bilbao
Theme URI: https://felinosbilbao.org/
Author: Ander Azabal - Autor original: the WordPress team
Author URI: https://wordpress.org/
Description: Felinos Bilbao es un tema especialmente creado para la web www.felinosbilbao.org. Es hijo del tema por defecto de WordPress 'Twenty Sixteen', por lo que es necesario instalar dicho tema para que este funcione en caso de que no estuviera ya instalado. Fue felizmente modificado por Ander Azabal en 2018.
Version: 0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column,two-columns,right-sidebar,accessibility-ready,custom-background,custom-colors,custom-header,custom-menu,editor-style,featured-images,flexible-header,microformats,post-formats,rtl-language-support,sticky-post,threaded-comments,translation-ready,blog
*/



/**
 * Contenido
 *
 * 1.0 - Overlay
 *   1.1 - Botón de cierre
 *   1.2 - Animación del fondo
 * 2.0 - Cursor sobre imágenes
 */



/**
 * 1.0 - Overlay
 *
 * @brief Overlay a pantalla completa para mostrar detalle de una imagen.
 * @details Muestra sobre la página un overlay con fondo negro transparente
 *          que ocupa el ancho/alto del viewport. Sobre él se mostrará la
 *          imagen centrada y un botón de cierre en la esquina superior
 *          derecha.
 */
.overlay {
  /* z-index: 11; */
  z-index: 100000;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background: rgba(40,40,40, 0.95); */
}

.overlay-imagen {
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
}

.overlay-texto {
	color: floralwhite;
	text-align: center;
	background: #f2930066;
	position: absolute;
	bottom: 3%;
	z-index: 2;
	width: 80%;
	left: 10%;
	border-radius: 10px;
	margin-bottom: 1em;
}

 /**
  * 1.1 - Botón de cierre
  *
  * @brief Botón de cierre del overlay-imagen
  * @details  Muestra en la esquina superior derecha del overlay un botón de
  *           cierre. Para el icono, se utiliza el aspa de la fuente
  *           'genericons'.
  */

#cierre-overlay::before {
  content:"\f405";
}

#cierre-overlay {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 12;
  font-family: "Genericons";
  font-size: 3em;
  font-weight: bolder;
  color: floralwhite;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}



/**
* 1.2 - Animación del fondo
*
* @brief Cursor sobre imágen que puede mostrarse con overlay.
*/

@-webkit-keyframes fade-negro {
  0% {
    background-color: rgba(40,40,40, 0);
  }

  100% {
    background-color: rgba(40,40,40, 0.95);
  }
}

@keyframes fade-negro {
  0% {
    background-color: rgba(40,40,40, 0);
  }

  100% {
    background-color: rgba(40,40,40, 0.95);
  }
}

.overlay {
  /* -webkit-animation: fade-negro .2s ease 1; */
  /* animation: fade-negro .2s ease 1; */
  /* background-color: rgba(40,40,40, 0.95); */
  background-color: black;
}



 /**
  * 2.0 - Cursor sobre imágenes
  *
  * @brief Cursor sobre imágen que puede mostrarse con overlay.
  */

.con-overlay img:hover {
 	cursor: all-scroll;
}