/*
  drdv.css: Archivo personalizado que sobreescribe todos los css del template (en este caso T4)
  Para que funcione, es necesario copiar la siguiente linea de código al final del archivo templates/t4_blank/index.php
  Con esto se hace el llamado de últimas al archivo drdv.css que sobreescribe los otros archivos de estilo cargados previamente.

    // Custom css (drdv)
    JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/drdv.css');

  Fuente: https://joomla.stackexchange.com/questions/3877/how-do-i-override-the-css-styles-in-my-template

  Directorios:
    Local:      http://bitjaguar.co/demo-01/revistalapiola/
    BitJaguar:  http://bitjaguar.co/demo-01/revistalapiola/
    Online:     http://revistalapiola.com/

  Última modificación: 2020-10-15
*/



/******************************************************************************* INI: Footer */
.piola-footer{
  position: relative;
  background-color: #212529;
  z-index: 100;
}
.piola-footer-inner{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 50px 0px 100px 0px !important;
}
/******************************************************************************* FIN: Footer */



/******************************************************************************* INI: Mapa de sitio */
.piola-footer-mapa-sitio{
  padding: 0px 40px 0px 20px;
}
.piola-footer-mapa-sitio ul li{
  list-style: none;
  padding: 8px 15px 0px 0px;
  font-size: 15px;
  color: #8b8b8b;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.2s ease;
}
.piola-footer-mapa-sitio ul li:hover{
  padding: 8px 0px 0px 15px;
  color: #f4a815;
}
.piola-footer-mapa-sitio ul li:hover a{
  color: #f4a815;
  text-decoration: none;
}
.piola-footer-mapa-sitio ul li svg{
  width: 30px;
  height: 30px;
  fill: #8b8b8b;
  vertical-align: text-bottom;
  margin-right: 10px;
  transition: 0.2s ease;
}
.piola-footer-mapa-sitio ul li:hover svg{
  fill: #f4a815;
}
/******************************************************************************* FIN: Mapa de sitio */


/******************************************************************************* INI: logo */
.piola-footer-logo{
  padding: 10px;
  text-align: center;
  color: #ffffff;
}
.piola-footer-logo img{
  max-width: 220px;
  margin: auto;
}
.piola-footer-logo p{
  margin: 5px 0px;
}
.piola-footer-logo > p > a{
  color: #ffffff;
}
.piola-footer-social{
  text-align: center;
  padding: 0px 60px 0px 0px !important;
}
/******************************************************************************* FIN: logo */


/******************************************************************************* INI: Redes sociales */
.piola-footer-social ul li{
  list-style: none;
  padding: 12px 10px;
}
.piola-footer-social ul li svg{
  width: 40px;
  height: 40px;
}
.piola-footer-social ul li svg{
  fill: #8b8b8b;
  cursor: pointer;
}
.piola-footer-social ul li svg.piola-footer-facebook,
.piola-footer-social ul li svg.piola-footer-instagram,
.piola-footer-social ul li svg.piola-footer-twitter,
.piola-footer-social ul li svg.piola-footer-issuu{
  transition: 0.2s;
}
.piola-footer-social ul li svg.piola-footer-facebook:hover{
  fill: #1877f2;
}
.piola-footer-social ul li svg.piola-footer-instagram:hover path:first-of-type{
  fill: url(#SVGID_1_);
}
.piola-footer-social ul li svg.piola-footer-instagram:hover path:last-of-type{
  fill: url(#SVGID_2_);
}
.piola-footer-social ul li svg.piola-footer-instagram:hover circle{
  fill: url(#SVGID_3_);
}
.piola-footer-social ul li svg.piola-footer-twitter:hover{
  fill: #1da1f2;
}
.piola-footer-social ul li svg.piola-footer-issuu:hover{
  fill: #EF5350;
}
/******************************************************************************* FIN: Redes sociales */


/******************************************************************************* INI: Mods responsive */
@media screen and (max-width: 767px) {
  .piola-footer-inner{
    position: relative;
    height: 750px;
  }
  .piola-footer-mapa-sitio{
    position: absolute;
    top: 70px;
    left: 5%;
  }
  .piola-footer-logo{
    position: absolute;
    top: 380px;
    left: 50%;
    transform: translate(-50%, 0%);
  }
  .piola-footer-social{
    position: absolute;
    top: 70px;
    right: 5%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .piola-footer-mapa-sitio,
  .piola-footer-logo,
  .piola-footer-social{
    padding: 0px 10px;
    width: 33%;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .piola-footer-mapa-sitio,
  .piola-footer-logo,
  .piola-footer-social{
    padding: 0px 30px;
    width: 30%;
  }
}
@media screen and (min-width: 1200px) {
  .piola-footer-mapa-sitio,
  .piola-footer-logo,
  .piola-footer-social{
    padding: 0px 30px;
    width: 25%;
  }
}
/******************************************************************************* FIN: Mods responsive */


/******************************************************************************* INI: Políticas cookies */
.jb.cookie.bottom.black.orange{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 5%;
}
.jb.cookie.bottom.black.orange > h2{
  font-size: 13px;
  line-height: 19px;
  font-weight: normal;
  color: #969696;
  padding: 5px 40px 0px 40px;
}
.jb.cookie.bottom.black.orange > p{
  font-size: 13px;
  line-height: 19px;
  color: #c6c6c6;
  padding: 0px 50px 0px 10px;
}
.jb.cookie.bottom.black.orange > .btn{
  padding: 5px 0px;
  margin: auto 0px;
  max-height: 40px;
  font-size: 12px;
  line-height: 18px;
}
.jb.cookie-decline {
  display: none;
}
@media screen and (max-width: 991px) {
  .jb.cookie.bottom.black.orange{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 10px;
  }
  .jb.cookie.bottom.black.orange > h2{
    font-size: 12px;
    line-height: 18px;
    padding: 5px;
  }
  .jb.cookie.bottom.black.orange > p{
    font-size: 12px;
    line-height: 18px;
    padding: 5px;
  }
  .jb.cookie.bottom.black.orange > .btn{
    font-size: 12px;
    line-height: 18px;
    padding-top: 2px;
    padding-bottom: 2px;
    max-width: 100px;
    margin: auto auto 10px auto;
  }
}
/******************************************************************************* FIN: Políticas cookies */


/******************************************************************************* INI: BitJaguar */
.credit-footer{
	color: #d2d2d2;
  background-color: #212529;
  font-size: 12px;
  text-align: center;
  padding: 6px 0px 7px 0px;
	transition: 0.2s ease;
}
.credit-footer img {
	filter: grayscale(0.5);
  height: 15px;
	transition: 0.2s ease;
}
#bitjaguar_footer:hover{
	text-decoration: none;
}
#bitjaguar_footer:hover .credit-footer{
	color: #ffffff;
	background-color: #2e2e2e;
}
#bitjaguar_footer:hover .credit-footer img{
	filter: grayscale(0);
}
/******************************************************************************* FIN: BitJaguar */