/*
  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: Root */
:root{
  --piola-menu-height: 50px;
}
/******************************************************************************* FIN: Root */


/******************************************************************************* INI: Menu */
body .piola-menu{
  height: var(--piola-menu-height);
  position: sticky !important;
  top: 0 !important;
}
@media only screen and (max-width: 767px){
	body .piola-menu{	  
	  padding-left: 20px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
	body .piola-menu{	  
	  padding-left: 30px;
	}
}
@media only screen and (min-width: 992px){
	body .piola-menu{	  
	  padding-left: 50px;
	}
	.piola-menu .mainnav{
		padding-left: 0px;
		padding-right: 0px;
	}
}

.piola-menu .navbar-brand.logo-image.logo-control img{
  width: auto;
  height: var(--piola-menu-height);
  max-width: none;
  max-height: none;
  margin-right: 0px;
}
.piola-menu .t4-navbar .navbar.navbar-expand-lg button{
  display: none;
}
.piola-menu .t4-navbar > span{
  right: 8px;
}
.piola-menu .t4-navbar .navbar{
  margin-left: 10px;
}
.piola-menu .t4-navbar .navbar .t4-megamenu ul li{
  padding: 0px 10px;
}
.piola-menu .t4-navbar .navbar .t4-megamenu ul li.active a{
  color: #f9a90c;
}
.piola-menu .t4-navbar .navbar .t4-megamenu ul li a{
  font-size: 14px;
  transition: 0.1s;
}
.piola-menu .t4-navbar .navbar .t4-megamenu ul li:hover a{
  color: #f4a815;
  transform: scale(1.15);
}
.piola-menu .t4-section-inner .t4-row .t4-col .t4-navbar span span{
  color: #ffffff;
}
.navigation-nav-revistalapiola .t4-offcanvas .t4-off-canvas-header h3{
  display: none;
}
.navigation-nav-revistalapiola .t4-offcanvas .t4-off-canvas-header{
  background-color: #231f20;
}
.navigation-nav-revistalapiola .t4-offcanvas .t4-off-canvas-header button{
  background-color: #231f20;
}
.navigation-nav-revistalapiola .t4-offcanvas .t4-off-canvas-header button span{
  color: #ffffff;
}
.navigation-nav-revistalapiola .t4-offcanvas .t4-off-canvas-body{
  background-color: #ffffff;
  padding: 15px;
}
@media screen and (min-width: 992px) and (max-width: 1199px){
  .piola-menu .t4-navbar .navbar .t4-megamenu ul li{
    padding: 0px 5px;
  }
  .piola-menu .t4-navbar .navbar .t4-megamenu ul li a{
    padding: 10px 6px;
  }
}
.piola-menu-sidebar{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: calc(100vh - var(--piola-menu-height) - 80px);
  border: 2px dotted #afafaf;
}
.piola-menu-sidebar-ul > ul{
  padding: 0px;
}
.piola-menu-sidebar-ul > ul li{
  list-style: none;
  padding: 5px 0px 5px 20px;
  font-size: 16px;
  color: #000000;
  line-height: 45px;
  cursor: pointer;
  transition: 0.2s ease;
}
.piola-menu-sidebar-ul > ul li:hover{
  padding-left: 35px;
  text-decoration: none;
}
.piola-menu-sidebar-ul > ul a:hover{
  color: #000000;
  text-decoration: none;
}
.piola-menu-sidebar-ul > ul li svg{
  height: 25px;
  width: 25px;
  vertical-align: text-bottom;
  margin-right: 15px;
  transition: 0.2s ease;
}
.piola-menu-sidebar-ul > ul li img{
  height: 25px;
  width: 25px;
  vertical-align: middle;
  margin-right: 15px;
  transition: 0.2s ease;
}
.piola-menu-sidebar .piola-menu-sidebar-footer{
  margin: auto 0px 20px 0px;
  text-align: center;
}
.piola-menu-sidebar .piola-menu-sidebar-footer img{
  max-height: 200px;
}
.piola-menu-sidebar .piola-menu-sidebar-footer p{
  margin: 5px 0px;
}
.piola-menu-sidebar .piola-menu-sidebar-footer > p > a:hover,
.piola-menu-sidebar .piola-menu-sidebar-footer > p > a:focus,
.piola-menu-sidebar .piola-menu-sidebar-footer > p > a:active{
  color: #000000;
}
/******************************************************************************* FIN: Menu */


/******************************************************************************* INI: Menu Redes */
.piola-menu-redes > ul{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 0px;
}
.piola-menu-redes > ul li{
  list-style: none;
  padding: 12px 15px;
}
.piola-menu-redes > ul li svg{
  width: 25px;
  height: 25px;
}
.piola-menu-redes > ul li svg{
  fill: #ffffff;
  cursor: pointer;
}
.piola-menu-redes > ul li svg.piola-menu-redes-facebook,
.piola-menu-redes > ul li svg.piola-menu-redes-instagram,
.piola-menu-redes > ul li svg.piola-menu-redes-twitter,
.piola-menu-redes > ul li svg.piola-menu-redes-issuu{
  transition: 0.2s;
}
.piola-menu-redes > ul li svg.piola-menu-redes-facebook:hover{
  fill: #1877f2;
}
.piola-menu-redes > ul li svg.piola-menu-redes-instagram:hover path:first-of-type{
  fill: url(#SVGID_1_);
}
.piola-menu-redes > ul li svg.piola-menu-redes-instagram:hover path:last-of-type{
  fill: url(#SVGID_2_);
}
.piola-menu-redes > ul li svg.piola-menu-redes-instagram:hover circle{
  fill: url(#SVGID_3_);
}
.piola-menu-redes > ul li svg.piola-menu-redes-twitter:hover{
  fill: #1da1f2;
}
.piola-menu-redes > ul li svg.piola-menu-redes-issuu:hover{
  fill: #EF5350;
}
/******************************************************************************* FIN: Menu Redes */


/******************************************************************************* INI: Menu Redes */
.piola-menu-sidebar-redes > ul{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 5px;
  padding-bottom: 4px;
  padding-left: 7px;
}
.piola-menu-sidebar-redes > ul li{
  list-style: none;
  padding: 12px 15px;
}
.piola-menu-sidebar-redes > ul li svg{
  width: 25px;
  height: 25px;
}
.piola-menu-sidebar-redes > ul li svg{
  fill: #231f20;
  cursor: pointer;
}
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-facebook,
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-instagram,
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-twitter,
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-issuu{
  transition: 0.2s;
}
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-facebook:hover{
  fill: #1877f2;
}
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-instagram:hover path:first-of-type{
  fill: url(#SVGID_1_);
}
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-instagram:hover path:last-of-type{
  fill: url(#SVGID_2_);
}
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-instagram:hover circle{
  fill: url(#SVGID_3_);
}
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-twitter:hover{
  fill: #1da1f2;
}
.piola-menu-sidebar-redes > ul li svg.piola-menu-sidebar-redes-issuu:hover{
  fill: #EF5350;
}
/******************************************************************************* FIN: Menu Redes