/*
  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:      https://solucionverticaladventure.test/
    BitJaguar:  https://bitjaguar.co/demo-02/solucionverticaladventure/
    Online:     https://solucionverticaladventure.com/

  Última modificación: 2021-03-09
*/

/******************************************************************************* INI: Menú Navbar*/
.t4-section.t4-header .t4-section-inner{
  height: 55px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  background-color: #2c2e2d;
  z-index: 100;
}
.t4-section.t4-header .t4-section-inner .logo{
  padding: 5px 0px 0px 0px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  background-color: #2c2e2d;
}
.t4-section.t4-header .navbar-brand.logo-control img.logo-img{
  height: 70px;
  max-height: 70px;
  width: 100%;
}
@media only screen and (max-width: 767px){
  .t4-section.t4-header .t4-section-inner{
    height: 40px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  .t4-section.t4-header .t4-section-inner .t4-navbar .navbar{
    min-height: 40px;
  }
  .t4-section.t4-header .t4-section-inner .t4-navbar .t4-offcanvas-toggle{
    line-height: 40px;
  }
  .t4-section.t4-header .t4-section-inner .logo{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 0px 0px 10px;
  }
  .t4-section.t4-header .navbar-brand.logo-control{
    margin: 0px;
  }
  .t4-section.t4-header .navbar-brand.logo-control img.logo-img,
  .t4-section.t4-header .navbar-brand.logo-control img.logo-img-sm{
    height: 40px;
    max-height: 40px;
  }
}
.t4-section.t4-header .t4-section-inner .mainnav{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  border-left: solid 25px #2c2e2d;
  border-bottom: solid 20px rgba(255, 255, 255, 0);
  padding-left: 50px;
}
@media only screen and (max-width: 992px){
  .t4-section.t4-header .t4-section-inner .mainnav{
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
  }
}
.t4-section.t4-header .t4-section-inner .mainnav .t4-navbar nav .t4-megamenu ul li a{
  color: #ffffff;
  border-bottom: solid 1px #2c2e2d;
  margin: 0px 5px 0px 5px;
  transition: 0.2s;
}
.t4-section.t4-header .t4-section-inner .mainnav .t4-navbar nav .t4-megamenu ul li a:hover{
  color: #f7992f;
}
.t4-section.t4-header .t4-section-inner .mainnav .t4-navbar nav .t4-megamenu ul li.current.active a{
  color: #f7992f;
}
/******************************************************************************* FIN: Menú Navbar*/


/******************************************************************************* INI: Menú Sidebar*/
.t4-offcanvas{
  background: linear-gradient(90deg, transparent 2%, #2c2e2d 8%, #2c2e2d 50%) !important;
}
.t4-offcanvas .t4-off-canvas-body{
  padding: 0px 0px 0px 30px !important;
  overflow-x: hidden;
}
.t4-offcanvas .t4-off-canvas-header{
  height: 40px;
  padding: 5px 10px 5px 10px !important;
  background: linear-gradient(90deg, transparent 2%, #2c2e2d 8%, #2c2e2d 50%) !important;
}
.t4-offcanvas .t4-off-canvas-header h3{
  display: none;
}
.t4-offcanvas .t4-off-canvas-header button{
  height: 30px !important;
  color: #ffffff;
}
.t4-offcanvas .t4-off-canvas-header button span{
  color: #ffffff !important;
  background-color: #2c2e2d;
}
.solucion-vertical-menu-sidebar{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: calc(100vh - 100px);
}
.solucion-vertical-menu-sidebar ul{
  padding: 0px;
  width: 320px;
}
.solucion-vertical-menu-sidebar ul li{
  list-style: none;
  padding: 5px 0px 5px 20px;
  margin: 0px 0px 20px 20px;
  font-size: 16px;
  border-top: 2px solid #f69931;
  border-left: 2px solid #f69931;
  border-bottom: 2px solid #f69931;
  border-right: none;
  color: #dedede;
  line-height: 40px;
  transform: skew(-25deg);
  cursor: pointer;
  transition: 0.2s ease;
}
.solucion-vertical-menu-sidebar ul li a{
  color: #dedede;
}
.solucion-vertical-menu-sidebar ul li a:hover,
.solucion-vertical-menu-sidebar ul li a:active,
.solucion-vertical-menu-sidebar ul li a:focus
{
  color: #dedede;
  text-decoration: none;
}
.solucion-vertical-menu-sidebar ul li div{
  transform: skew(25deg);
}
.solucion-vertical-menu-sidebar ul li:hover{
  margin-left: 0px;
  text-decoration: none;
}
.solucion-vertical-menu-sidebar ul li svg{
  height: 25px;
  width: 25px;
  vertical-align: text-bottom;
  margin-right: 15px;
  transition: 0.2s ease;
}
.solucion-vertical-menu-sidebar ul li img{
  height: 25px;
  width: 25px;
  vertical-align: middle;
  margin-right: 15px;
  transition: 0.2s ease;
}
.solucion-vertical-menu-sidebar .solucion-vertical-menu-sidebar-footer{
  margin: auto 0px 20px 0px;
  text-align: center;
}
.solucion-vertical-menu-sidebar .solucion-vertical-menu-sidebar-footer img{
  max-height: 200px;
  border-radius: 200px;
}
.solucion-vertical-menu-sidebar .solucion-vertical-menu-sidebar-footer div{
  margin: 0px 0px 20px 0px;
}
.solucion-vertical-menu-sidebar .solucion-vertical-menu-sidebar-footer div a{
  font-size: 13px;
  color: #ffffff;
  white-space: nowrap;
}
@media (max-width: 575.98px){
  .t4-section.t4-header.t4-sticky {
    position: sticky !important;
    top: 0 !important;
}
/******************************************************************************* FIN: Menú Sidebar*/