/*
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 - Barra de cabecera
 *   1.1 - Ajuste con WP admin bar
 *   1.2 - Logotipo Felinos
 *   1.3 - Enlaces crowdfundings
 *   1.4 - Menú de navegación
 *     1.4.1 - Submenús
 *     1.4.2 - gTranslate
 */



/**
 * 1.0 - Barra de cabecera
 *
 * @brief La cabecera de la página, con versión fluída y versión fija.
 * @details Muestra la cabecera de la página en dos modos diferentes: versión
 *          fluída los primeros 70 píxeles del scroll vertical y una vez
 *          superados, muestra la versión fija de la barra.
 */
#masthead {
  /* Ajuste y tamaño */
  position: fixed;
  z-index: 10;
  width: 100%;
  left: 0;
  top: 0;
  padding-left: 3%;
  padding-right: 3%;

  /* Transiciones */
  -webkit-transition: height 0.3s cubic-bezier(.68, -0.55, .27, 1.55),
    background-image 0.3s ease-in-out,
    -webkit-box-shadow 1s ease-in-out;
  transition: height 0.3s cubic-bezier(.68, -0.55, .27, 1.55),
    background-image 0.3s ease-in-out,
    -webkit-box-shadow 1s ease-in-out;
  transition: height 0.3s cubic-bezier(.68, -0.55, .27, 1.55),
    box-shadow 1s ease-in-out,
    background-image 0.3s ease-in-out;
  transition: height 0.3s cubic-bezier(.68, -0.55, .27, 1.55),
    box-shadow 1s ease-in-out,
    background-image 0.3s ease-in-out,
    -webkit-box-shadow 1s ease-in-out;
}

#masthead.cabecera-pagina {
  /* Ajuste y tamaño */
  height: 140px;

  /* Colores */
  background: white url("../images/cabecera-positiva-repeatable.png") repeat-x left top;
  background-position-x: 3em;

  /* Sombreado */
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.22);
}

#masthead.cabecera-pagina-fijada {
  /* Ajuste y tamaño */
  height: 70px;
  /* height: 10vh; */

  /* Colores */
  /* background: #f29300; */
  background: #f29300 url("../images/cabecera-negativa-repeatable.png") repeat-x left top;
  /* background-size: 100% 100%; */

  /* Sombreado */
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.contenido-cabecera-pagina {
  /* Ajuste y tamaño */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
}



/**
 * 1.1 - Ajuste con WP admin bar
 *
 * @brief El ajuste cuando se muestra la barra de administración de WP.
 */
.admin-bar #masthead {
  /* Ajuste y tamaño */
  top: 32px;
}

@media only screen and (max-width: 782px) {
  .admin-bar #masthead {
    /* Ajuste y tamaño */
    top: 46px;
  }
}



/**
 * 1.2 - Logotipo Felinos
 *
 * @brief El logotipo de Felinos Bilbao en dos versiones: positiva y negativa.
 * @details Muestra el logotipo de Felinos Bilbao en versión negativa en caso
 *          de estar la barra de la cabecera en modo fluído (primeros 70px), o
 *          la versión positiva del logo en caso de estar la barra de la
 *          cabecera en modo fijo.
 */
#logo-felinos {
  /* Ajuste y tamaño */
  height: 100%;
  flex-basis: 240px;
  flex-grow: 0;
  flex-shrink: 0;
}

@media only screen and (max-width: 320px) {
  #logo-felinos {
    display: none;
  }
}

#masthead.cabecera-pagina-fijada #logo-felinos {
  width: 118px;
  flex-basis: 120px;
  flex-grow: 0;
  flex-shrink: 0;
}

.cabecera-pagina .logo-positivo {
  /* Ajuste y tamaño */
  display: none;
}

#masthead.cabecera-pagina-fijada .logo-negativo {
  /* Ajuste y tamaño */
  display: none;
}

.custom-logo-link {
  /* Ajuste y tamaño */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  /* margin-right: 0.8em; */
}

.custom-logo {
  /* Ajuste y tamaño */
  height: 100%;
  width: auto;
  margin-right: auto;
  padding: 3px;
}

.cabecera-pagina-fijada .custom-logo {
  width: 107.4px;
}

@media only screen and (max-width: 600px) {
  .cabecera-pagina .custom-logo {
    /* Ajuste y tamaño */
    height: 100px;
    margin-top: auto;
    margin-bottom: auto;
  }
}

@media only screen and (max-width: 500px) {
  .cabecera-pagina .custom-logo {
    /* Ajuste y tamaño */
    height: 80px;
  }
}



/**
 * 1.3 - Enlaces crowdfundings
 *
 * @brief Los enlaces a los sitios de crowdfunding.
 * @details Muestra los logotipos de los sitios de crowdfunding de Felinos
 *          Bilbao. El tamaño variará según versión fija o fluída de la barra
 *          de la cabecera.
 */
#crowdfunding-cabecera-pagina {
  /* Ajuste y tamaño */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  justify-content: space-around;
  align-items: center;
  margin-right: 1em;
  max-width: 300px;
}

.cabecera-pagina-fijada #crowdfunding-cabecera-pagina {
  padding-top: 0.3em;
}

@media only screen and (max-width: 500px) {
  #crowdfunding-cabecera-pagina {
    margin-right: 0;
    margin-left: -1em;
  }
}


@media only screen and (max-width: 320px) {
  #crowdfunding-cabecera-pagina {
    margin-right: 1;
    margin-left: 0;
  }
}

#crowdfunding-cabecera-pagina a {
  color: black;
}

#crowdfunding-cabecera-pagina a {
  color: black;
}

.cabecera-pagina-fijada #crowdfunding-cabecera-pagina a {
  color: floralwhite;
}

.contenedor-entrada-crowdfunding {
  /* Ajuste y tamaño */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  width: 50px;
  margin-right: 0.8em;

  font-size: x-small;
  text-align: center;
  font-weight: bold;
  /* color: #f29300; */
  color: black;
}

@media only screen and (max-width: 500px) {
  .contenedor-entrada-crowdfunding a {
    height: 100%;
    width: 100%;
  }
}

.contenedor-entrada-crowdfunding span {
  margin-top: 0.4em;
  word-wrap: normal;
}

@media only screen and (max-width: 500px) {
  .contenedor-entrada-crowdfunding span {
    font-size: smaller;
  }
}

#masthead.cabecera-pagina-fijada .contenedor-entrada-crowdfunding {
  margin-right: 0.4em;
  width: 40px;
  font-size: xx-small;
  color: floralwhite;
}

@media only screen and (max-width: 500px) {
  #masthead.cabecera-pagina-fijada .contenedor-entrada-crowdfunding {
    /* flex-basis: calc(50% - 0.4em); */
    /* height: calc((70px / 2) - 0.4em); */
    width: 30px;
  }
}

#masthead.cabecera-pagina-fijada .entrada-crowdfunding {
  /* Ajuste y tamaño */
  max-height: 40px;
}

@media only screen and (max-width: 500px) {
  #masthead.cabecera-pagina-fijada .entrada-crowdfunding {
    max-height: initial;
    max-width: initial;
    width: 100%;
    object-fit: contain;
  }
}

img.entrada-crowdfunding,
#enlaces-rrss-cabecera-pagina.social-navigation li {
  /* Transiciones */
  -webkit-transition: -webkit-transform .8s ease-in-out;
  transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out,
    -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
}

img.entrada-crowdfunding:hover,
#enlaces-rrss-cabecera-pagina.social-navigation li:hover {
  /* Transformaciones */
  -webkit-transform: rotateZ(-30deg) rotateY(-30deg);
  transform: rotateZ(-30deg) rotateY(-30deg);
}



/**
 * 1.4 - Menú de navegación
 *
 * @brief El menú de navegación de WP.
 * @details Muestra el menú de navegación y la barra de enlaces sociales de WP.
 *          Al igual que con twentysixteen, en modo < 910px muestra un botón
 *          para ahorrar espacio horizontal. Se le aplican ajustes al menú y
 *          submenús flotantes para encajar con la estética del resto de la web.
 */
#contenedor-menu-cabecera-pagina {
  /* Ajuste y tamaño */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.cabecera-pagina-fijada #contenedor-menu-cabecera-pagina {
  margin-top: 0.4em;
}

@media only screen and (max-width: 500px) {
  #contenedor-menu-cabecera-pagina {
    width: 4em;
  }
}

.site-header-menu {
  /* Ajuste y tamaño */
  margin-top: auto;
  margin-bottom: auto;
}

#menu-toggle {
  /* Ajuste y tamaño */
  width: 100px;
  margin: 0;
  padding: 0;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 20px;
  border: 1px solid floralwhite;
  background-color: transparent;
}

#masthead.cabecera-pagina #menu-toggle {
  /* Ajuste y tamaño */
  height: 50px;
}

#masthead.cabecera-pagina-fijada #menu-toggle {
  /* Ajuste y tamaño */
  height: 40px;
  margin-left: 0;
  margin-top: calc((70px - 40px) / 3);
}

.site-header-menu.toggled-on {
  /* Ajuste y tamaño */
  position: fixed;
  z-index: 11;
  right: 3%;
  top: 55px;
  width: 80%;
  height: 80%;
  padding-right: 1rem;
  padding-left: 0.5rem;

  /* Overflow */
  overflow-x: hidden;
  overflow-y: scroll;

  /* Colores */
  background: white;

  /* Sombreado */
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.admin-bar .site-header-menu.toggled-on {
  top: 101px;
}

.cabecera-pagina #menu-menu-superior {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cabecera-pagina .toggled-on #menu-menu-superior {
  /* Ajuste y tamaño */
  height: calc(80% - 140px);
  top: 140px;
}

.admin-bar .cabecera-pagina .toggled-on #menu-menu-superior {
  /* Ajuste y tamaño */
  top: 172px;
}

.admin-bar #masthead.cabecera-pagina-fijada .toggled-on #menu-menu-superior {
  /* Ajuste y tamaño */
  top: 116px;
}

body.cabecera-pagina-fijada #menu-menu-superior li a {
  /* Colores */
  color: floralwhite;
  padding-top: 0;
}

body.cabecera-pagina-fijada #menu-menu-superior .sub-menu li a,
body.cabecera-pagina-fijada.sin-scroll #menu-menu-superior li a {
  padding-top: 0.65em;
}

@media screen and (min-width: 56.875em) {
  .cabecera-pagina-fijada #menu-menu-superior .menu-item-has-children>a:after {
    top: 0.1em;
  }
}

@media only screen and (max-width: 909px) {
  body.cabecera-pagina-fijada #menu-menu-superior li a {
    /* Colores */
    color: #1a1a1a;
  }
}

#enlaces-rrss-cabecera-pagina {
  /* Ajuste y tamaño */
  position: absolute;
  right: 3%;
  top: 120px;

  /* Transiciones */
  /* -webkit-transition-property: top;
  -webkit-transition-duration: 0.4s;
	-webkit-transition-timing-function: cubic-bezier(.68,-0.55,.27,1.55); */
  -webkit-transition: top .4s cubic-bezier(.68, -0.55, .27, 1.55);
  transition: top .4s cubic-bezier(.68, -0.55, .27, 1.55);
}

.cabecera-pagina-fijada .toggled-on #enlaces-rrss-cabecera-pagina {
  /* Ajuste y tamaño */
  display: contents;
}

.cabecera-pagina-fijada #enlaces-rrss-cabecera-pagina {
  /* Ajuste y tamaño */
  top: 52px;
}

#enlaces-rrss-cabecera-pagina.social-navigation ul {
  /* Ajuste y tamaño */
  margin: unset;
  list-style: none;
}

#enlaces-rrss-cabecera-pagina.social-navigation li {
  /* Ajuste y tamaño */
  float: left;
  margin: unset;
  margin-left: 0.5rem;
}

#enlaces-rrss-cabecera-pagina.social-navigation a {
  /* Ajuste y tamaño */
  display: block;
  height: 35px;
  width: 35px;
  position: relative;
  border-radius: 50%;

  /* Colores */
  background: white;

  /* Transiciones */
  -webkit-transition: background-color 0.3s ease-in-out,
    border 0.3s ease-in-out,
    color 0.3s ease-in-out,
    -webkit-box-shadow 1s ease-in-out;
  transition: background-color 0.3s ease-in-out,
    border 0.3s ease-in-out,
    color 0.3s ease-in-out,
    -webkit-box-shadow 1s ease-in-out;
  transition: box-shadow 1s ease-in-out,
    background-color 0.3s ease-in-out,
    border 0.3s ease-in-out,
    color 0.3s ease-in-out;
  transition: box-shadow 1s ease-in-out,
    background-color 0.3s ease-in-out,
    border 0.3s ease-in-out,
    color 0.3s ease-in-out,
    -webkit-box-shadow 1s ease-in-out;
}

.cabecera-pagina-fijada #enlaces-rrss-cabecera-pagina.social-navigation a {
  /* Colores */
  border: 1px solid #f29300;
  color: floralwhite;
  background: #f29300;

  /* Sombreado */
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.cabecera-pagina-fijada .toggled-on #enlaces-rrss-cabecera-pagina.social-navigation a {
  /* Colores */
  border: 1px solid #d1d1d1;
  color: #1a1a1a;
  background: white;

  /* Sombreado */
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.cabecera-pagina-fijada .toggled-on #enlaces-rrss-cabecera-pagina.social-navigation a:hover {
  /* Colores */
  border: 1px solid #f29300;
  background: white;

  /* Sombreado */
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.cabecera-pagina-fijada .toggled-on #enlaces-rrss-cabecera-pagina.social-navigation a:hover::before {
  color: #f29300;
}

.social-navigation a::before {
  /* Formato del texto */
  font-size: larger;
}

.social-navigation a[href^="tel://"]::before {
  content: "\f437";
}

.cabecera-pagina-fijada #enlaces-rrss-cabecera-pagina.social-navigation a:hover::before,
.cabecera-pagina-fijada #enlaces-rrss-cabecera-pagina.social-navigation a:focus::before {
  /* Colores */
  color: floralwhite;
}

.cabecera-pagina #enlaces-rrss-cabecera-pagina.social-navigation a:hover::before,
.cabecera-pagina #enlaces-rrss-cabecera-pagina.social-navigation a:focus::before {
  /* Colores */
  color: #f29300;
}

.cabecera-pagina #enlaces-rrss-cabecera-pagina.social-navigation a:hover,
.cabecera-pagina #enlaces-rrss-cabecera-pagina.social-navigation a:focus {
  /* Colores */
  border: 1px solid #f29300;
}

.cabecera-pagina-fijada .toggled-on #menu-menu-de-enlaces-sociales {
  /* Ajuste y tamaño */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#menu-cabecera-pagina {
  margin: 0;
}

/**
 * 1.4.1 - Submenús
 *
 * @brief Submenús del menú de navegación.
 */
body .sub-menu {
  /* Ajuste y tamaño */
  margin-bottom: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;

  /* Sombreado */
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

body .sub-menu.toggled-on {
  /* Sombreado */
  -webkit-box-shadow: 0 7px 14px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
}

.main-navigation .menu-item-has-children>a {
  /* Ajuste y tamaño */
  margin-right: unset;
}


.menu-item.menu-item-gtranslate {
  /* Ajuste y tamaño */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

body.cabecera-pagina-fijada #menu-menu-superior .sub-menu li a {
  /* Colores */
  color: #1a1a1a;
}


/**
 * 1.4.2 - gTranslate
 *
 * @brief Opción del menú de navegación de gTranslate.
 */
.menu-item.menu-item-gtranslate {
  /* Ajuste y tamaño */
  padding: 0.65625rem 0.875rem;
}

@media only screen and (max-width: 909px) {
  .menu-item.menu-item-gtranslate {
    /* Ajuste y tamaño */
    padding: 0.65625rem 0rem;
  }
}