/*
  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: 2023-11-01
*/

.t4-section.t4-hero{
  padding: 0px;
  background-color: #212529;
}

/******************************************************************************* INI: Hero*/
.piola-home-hero{
  position: relative;
}
.piola-home-hero .piola-home-hero-imagenes{
  position: relative;
  width: 100%;
  max-width: 100%;
  height: calc(100vh - 50px);
  overflow: hidden;
}
#home-img0{
  position: absolute;
  left: 0;
  width: 100%;
  max-width: 100%;
  pointer-events: none;  
}
#home-img1{
  position: absolute;
  left: 0;
  width: 100%;
  max-width: 100%;  
  pointer-events: none;  
}
#home-img2{
  position: absolute;  
  left: 0;
  width: 100%;
  max-width: 100%;
  pointer-events: none;  
}
#home-logo{
  position: absolute;  
  left: 50%;
  transform: translate(-50%, 0px);  
  pointer-events: none;  
}
@media screen and (max-width: 767px) {
	.piola-home-hero .piola-home-hero-imagenes{
	  height: calc(100vh - 100px);
	}
	#home-img0{
		top: calc(-27vh - 50px);	
		left: 50%;
		transform: translate(-50%, 0px);
		width: 250%;
		max-width: 250%;
		z-index: 0;
	}
	#home-img1{
		top: 66vh;
		left: 50%;
		transform: translate(-50%, 0px);
		width: 180%;
		max-width: 180%;
		z-index: 2;
	}
	#home-img2{
		top: 81vh;
		left: 50%;
		transform: translate(-50%, 0px);
		width: 180%;
		max-width: 180%;
		z-index: 3;
	}
	#home-logo{
		top: 28vh;
		width: 300px;
		max-width: 300px;
		z-index: 1;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	#home-img0{
		top: -33vh;	
		left: 50%;
		transform: translate(-50%, 0px);
		width: 160%;
		max-width: 160%;		
		z-index: 0;
	}
	#home-img1{
		top: 65vh;
		left: 50%;
		transform: translate(-50%, 0px);
		width: 160%;
		max-width: 160%;
		z-index: 2;
	}
	#home-img2{
		top: 82vh;
		left: 50%;
		transform: translate(-50%, 0px);
		width: 160%;
		max-width: 160%;
		z-index: 3;
	}
	#home-logo{
		top: 28vh;
		width: 400px;
		max-width: 400px;
		z-index: 1;
	}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	#home-img0{
		top: -30vh;	
		left: 50%;
		transform: translate(-50%, 0px);
		width: 130%;
		max-width: 130%;
		z-index: 0;
	}
	#home-img1{
		top: 70vh;
		z-index: 2;
	}
	#home-img2{
		top: 85vh;
		z-index: 3;
	}
	#home-logo{
		top: 28vh;
		width: 400px;
		max-width: 400px;
		z-index: 1;
	}
}
@media screen and (min-width: 1200px) and (max-width: 1499px) {
	#home-img0{
		top: -41vh;	
		left: 50%;
		transform: translate(-50%, 0px);
		width: 120%;
		max-width: 120%;		
		z-index: 0;
	}
	#home-img1{
		top: 70vh;
		z-index: 2;
	}
	#home-img2{
		top: 89vh;
		z-index: 3;
	}
	#home-logo{
		top: 28vh;
		width: 400px;
		max-width: 400px;
		z-index: 1;
	}
}
@media screen and (min-width: 1500px) and (max-width: 1699px) {
	#home-img0{
		top: -43vh;		
		z-index: 0;
	}
	#home-img1{
		top: 67vh;
		left: 50%;
		transform: translate(-50%, 0px);
		width: 100%;
		max-width: 100%;
		z-index: 2;
	}
	#home-img2{
		top: 92vh;
		left: 50%;
		transform: translate(-50%, 0px);
		width: 100%;
		max-width: 100%;
		z-index: 3;
	}
	#home-logo{
		top: 28vh;
		width: 500px;
		max-width: 500px;
		z-index: 1;
	}
}
@media screen and (min-width: 1700px) {
	#home-img0{
		top: -48vh;		
		z-index: 0;
	}
	#home-img1{
		top: 68vh;
		z-index: 2;
	}
	#home-img2{
		top: 96vh;
		z-index: 3;
	}
	#home-logo{
		top: 30vh;
		width: 500px;
		max-width: 500px;
		z-index: 1;
	}
}
.piola-home-slogan{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0px);
  bottom: 0px;	  
  width: 100%;
  max-width: 100%;
  z-index: 4;    
  color: #000000;
  text-shadow: 2px 1px 2px #ffffff;
  line-height: 20px;
  text-align: center;
  font-weight: 300;
  font-style: oblique;  
  padding: 8px 15px;
  border-bottom: solid 10px #ec8e00;
}
#piola_home_hero_scroll_btn{
  padding: 5px 0px 2px 0px;
  width: 50px;
  margin: auto;
}
#piola_home_hero_scroll_btn:hover{
  cursor: pointer;
}
#piola_home_hero_scroll_btn:hover svg{
  fill: #ec8e00;
  stroke: #ec8e00;
  stroke-width:100;
}
#piola_home_hero_scroll_btn svg{
  fill: #9b9b9b;
  stroke: #9b9b9b;
  height: 15px;
  width: 15px;
  transition: 0.1s;
}
#piola-home-hero-credit{
  position: absolute;
  right: 3px;
  bottom: 8px;
  text-align: right;
  line-height: 20px;
  padding-right: 5px;
  z-index: 4;
}
#piola-home-hero-credit a{
  color: #9b9b9b;
  font-size: 11px;
  letter-spacing: 1px;
  text-decoration: none;
}
#piola-home-hero-credit a svg{
  fill: #9b9b9b;
}
/******************************************************************************* FIN: Hero*/


/******************************************************************************* INI: Slider*/
.djslider-loader.djslider-loader-default .slider-container ul li .slide-desc .slide-desc-in .slide-desc-bg{
  background: linear-gradient(180deg, rgba(34,30,31,0) 1%, rgba(34,30,31,0.6) 8%) !important;
}
.djslider-loader.djslider-loader-default .slider-container ul li .slide-desc .slide-desc-in .slide-desc-text{
  padding: 30px 50px 40px 50px !important;
}
.djslider-loader.djslider-loader-default .slider-container ul li .slide-desc .slide-desc-in .slide-desc-text .slide-title,
.djslider-loader.djslider-loader-default .slider-container ul li .slide-desc .slide-desc-in .slide-desc-text .slide-title a{
  color: #ec8e00 !important;
  font-size: 25px !important;
}
.djslider-loader.djslider-loader-default .slider-container ul li .slide-desc .slide-desc-in .slide-desc-text .slide-text,
.djslider-loader.djslider-loader-default .slider-container ul li .slide-desc .slide-desc-in .slide-desc-text .slide-text a{
  color: #FFFFFF !important;
}
.djslider-default .navigation-container-custom, .djslider-default .navigation-numbers{
  position: absolute !important;
  top: auto !important;
  bottom: 10px !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, 0px);
}
#djslider-loader126{
  background-color: #221e1f !important;
  padding-bottom: 0px !important;
}
#djslider-loader126 .navigation-container .prev-button,
#djslider-loader126 .navigation-container .next-button{
  height: 75px !important;
}
@media screen and (max-width: 767px){
  #djslider-loader126 .slider-container ul li .slide-desc .slide-desc-in .slide-desc-bg{
    background: rgb(34,30,31) !important;
  }
  #djslider-loader126 .slide-desc-text.slide-desc-text-default{
    padding-left: 4% !important;
    padding-right: 4% !important;
    padding-top: 4% !important;
    padding-bottom: 10% !important;
    font-size: 13px;
  }
  #djslider-loader126 .djslider.djslider-default{
    height: 380px !important;
  }
  #djslider-loader126 .slider-container ul li{
    height: 380px !important;
  }
  #djslider-loader126 .slide-desc-text.slide-desc-text-default .slide-title,
  #djslider-loader126 .slide-desc-text.slide-desc-text-default .slide-title a{
    font-size: 20px !important;
    line-height: 25px;
    padding-bottom: 0.5%;
  }
  #djslider-loader126 .slider-container ul li a{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  #djslider-loader126 .slider-container ul li img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  #djslider-loader126 .slider-container ul li .slide-desc{
    position: relative;   
  }  
  
  #djslider-loader126 .navigation-container{
    top: 25% !important;
  }
  #djslider-loader126 .navigation-container .prev-button,
  #djslider-loader126 .navigation-container .next-button{
    height: 30px !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  #djslider-loader126 .slider-container ul li .slide-desc .slide-desc-in .slide-desc-bg{
    background: linear-gradient(180deg, rgba(34,30,31,0) 1%, rgba(34,30,31,0.8) 8%) !important;
  }
  #djslider-loader126 .slide-desc-text.slide-desc-text-default{
    background: linear-gradient(180deg, rgba(34,30,31,0) 1%, rgba(34,30,31,0.8) 8%) !important;
    padding-left: 4% !important;
    padding-right: 4% !important;
    padding-bottom: 4.5% !important;
    font-size: 15px;
  }
  #djslider-loader126 .djslider.djslider-default{
    height: 420px !important;
  }
  #djslider-loader126 .slider-container ul li{
    height: 420px !important;
  }
  #djslider-loader126 .slide-desc-text.slide-desc-text-default .slide-title,
  #djslider-loader126 .slide-desc-text.slide-desc-text-default .slide-title a{
    font-size: 25px !important;
    line-height: 28px;
    padding-bottom: 0.5%;
  }
  #djslider-loader126 .slider-container ul li a{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  #djslider-loader126 .slider-container ul li img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  #djslider-loader126 .navigation-container {
    top: 30% !important;
  }
  #djslider-loader126 .navigation-container .prev-button,
  #djslider-loader126 .navigation-container .next-button{
    height: 60px !important;
  }
}
/******************************************************************************* FIN: Slider*/



/******************************************************************************* INI: Search*/
.t4-section.t4-intro-1 .t4-section-inner.container .mod-search.search form{
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.t4-section.t4-intro-1 .t4-section-inner.container .mod-search.search form .input-group{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 300px;
  padding-top: 2px;
  border: solid 1px #c5c5c5;
}
.t4-section.t4-intro-1 .t4-section-inner.container .mod-search.search form .input-group input{
  border: none;
  color: #9d9d9d;
}
.t4-section.t4-intro-1 .t4-section-inner.container .mod-search.search form .input-group input::placeholder {
  color: #9d9d9d;
}
.t4-section.t4-intro-1 .t4-section-inner.container .mod-search.search form .input-group-append button,
.t4-section.t4-intro-1 .t4-section-inner.container .mod-search.search form .input-group button{
  background-color: #ffffff !important;
  color: #c5c5c5;
  border-radius: 0px !important;
  border: none;
  border-left: solid 1px #c5c5c5 !important;
}
.t4-section.t4-intro-1 .t4-section-inner.container .mod-search.search form .input-group button span{
  margin-right: 0px !important;
}
/******************************************************************************* FIN: Search*/



/******************************************************************************* INI: Mini-Banner */
.t4-section.t4-intro-1{
  padding-top: 70px;
  margin-bottom: 40px;
}
.banneritem{
  text-align: center;
  padding-bottom: 22px;
  transition: 0.3s;
}
.banneritem:hover{
  padding-left: 10px;
}
.inicio-banner-issuu{
  text-align: center;
  margin-bottom: 50px;
  cursor: pointer;
  transition: 0.3s;
}
.inicio-banner-issuu:hover{
  padding-left: 10px;
}
.inicio-ads-google{
  text-align: center;
  cursor: pointer;
  margin: 0px 0px 100px 0px;
}
/******************************************************************************* FIN: Mini-Banner */



/******************************************************************************* INI: Inicio MODS */
#t4-intro-1 .t4-section-inner.container,
#t4-section-1 .t4-section-inner.container{
  padding: 0px;
  margin: 0px;
}
#t4-intro-1 .row,
#t4-section-1 .mfp-grid{
  margin-left: 0px;
  margin-right: 0px;
}
.mfp-grid > div:nth-child(odd){
  padding-right: 2%;
  padding-left: 5%;
  margin-bottom: 6% !important;
}
.mfp-grid > div:nth-child(even){
  padding-right: 5%;
  padding-left: 2%;
  margin-bottom: 6% !important;
}
#t4-intro-1 .mfp-grid > div{
  padding-right: 0px;
  padding-left: 7%;
  margin-bottom: 6% !important;
}

@media screen and (min-width: 1500px){
  .mfp-grid > div:nth-child(odd){
    padding-right: 3%;
    padding-left: 14%;
	margin-top: 2% !important;
    margin-bottom: 4% !important;
  }
  .mfp-grid > div:nth-child(even){
    padding-right: 14%;
    padding-left: 3%;
	margin-top: 2% !important;
    margin-bottom: 4% !important;
  }
	#t4-intro-1 .mfp-grid > div{
	  padding-right: 0px;
	  padding-left: 21%;
	  margin-bottom: 20px !important; /*6% !important;*/
	  max-width: 1100px;
	}
	#t4-intro-1 .t4-col.section-2.col-12.col-lg{
		padding-right: 12%;
	}	
}

@media screen and (min-width: 1200px) and (max-width: 1499px) {
  .mfp-grid > div:nth-child(odd){
    padding-right: 4%;
    padding-left: 12%;
	margin-top: 2% !important;
    margin-bottom: 4% !important;
  }
  .mfp-grid > div:nth-child(even){
    padding-right: 12%;
    padding-left: 4%;
	margin-top: 2% !important;
    margin-bottom: 4% !important;
  }
	#t4-intro-1 .mfp-grid > div{
	  padding-right: 0px;
	  padding-left: 18%;
	  margin-bottom: 20px !important; /*6% !important;*/
	  max-width: 1100px;
	}
	#t4-intro-1 .t4-col.section-2.col-12.col-lg{
		padding-right: 6%;
	}	
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.mfp-grid > div:nth-child(odd){
		padding-right: 3%;
		padding-left: 10%;
		margin-bottom: 8% !important;
	}
	.mfp-grid > div:nth-child(even){
		padding-right: 10%;
		padding-left: 3%;
		margin-bottom: 8% !important;
	}
	#t4-intro-1 .mfp-grid > div{
	  padding-right: 0px;
	  padding-left: 15%;
	  margin-bottom: 6% !important;
	}
	#t4-intro-1 .t4-col.section-2.col-12.col-lg{
		padding-right: 8%;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .mfp-grid > div:nth-child(odd){
    padding-right: 4%;
    padding-left: 6%;
    margin-bottom: 8% !important;
  }
  .mfp-grid > div:nth-child(even){
    padding-right: 6%;
    padding-left: 4%;
    margin-bottom: 8% !important;
  }
  #t4-intro-1 .mfp-grid > div{
    padding-right: 8%;
    padding-left: 8%;
    margin-top: 4% !important;
    margin-bottom: 8% !important;
  }
}
@media screen and (max-width: 767px) {
  .mfp-grid > div:nth-child(odd){
    padding-right: 8%;
    padding-left: 8%;
    margin-bottom: 14% !important;
  }
  .mfp-grid > div:nth-child(even){
    padding-right: 8%;
    padding-left: 8%;
    margin-bottom: 14% !important;
  }
  #t4-intro-1 .mfp-grid > div{
    padding-right: 8%;
    padding-left: 8%;
    margin-top: 4% !important;
    margin-bottom: 14% !important;
  }
}
.mfp-grid > div > div{
  border-bottom: dashed 1px #ec8e00;
  padding-bottom: 30px;
  margin-bottom: 0px;
}
@media only screen and (min-width: 48em){
  .t4-section.t4-intro-1 .mfp-grid > .mfp-col-sm-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 100%;
    max-width: 100%;
  }
}
.mfp_default_skin_default .mfp_default_item > div{
  overflow: hidden;
}
.mfp_default_skin_default .mfp_default_item .mfp_thumb_pos_top img,
.mfp_default_skin_default .mfp_default_item .mfp_thumb_pos_top2 img{
  transition: 0.3s ease;
}
.mfp_default_skin_default .mfp_default_item .mfp_thumb_pos_top img:hover,
.mfp_default_skin_default .mfp_default_item .mfp_thumb_pos_top2 img:hover{
  transform: scale(1.08) translateY(-3%);
}
.mfp_default_skin_default .mfp_default_item .mfp_cat{
  position: absolute;
  top: 0px;
  border-top: 25px solid #ffffff;
  border-left: 0px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 110px;
}
.mfp_default_skin_default .mfp_default_item .mfp_cat a{
  position: absolute;
  top: -25px;
  font-weight: 500 !important;
  color: #ec8e00 !important;
  font-size: 12px;
  letter-spacing: 0.5px;
  transition: 0.1s;
}
.t4-intro-1 .mfp_default_skin_default .mfp_default_item{
  margin-bottom: 60px !important;
}
.t4-intro-1 .mfp_default_skin_default .mfp_default_item .mfp_cat{
  /*border-top: 20px solid #ffffff;*/
  border-top: 30px solid #ffffff;
  border-right: 25px solid transparent;
  width: 125px;
}
.t4-intro-1 .mfp_default_skin_default .mfp_default_item .mfp_cat a{
  position: absolute;
  top: -30px;
  color: #ec8e00 !important;
  font-size: 14px;
  letter-spacing: 0.5px;
  font-weight: 500 !important;
}
.mfp_default_skin_default .mfp_default_item .mfp_cat a:hover{
  letter-spacing: 1px;
  text-decoration: none;
}
.t4-intro-1 .section-1 .mfp_default_skin_default .mfp_default_item .mfp_default_title a {
  font-size: 25px !important;
}
@media screen and (min-width: 992px) {
	.t4-intro-1 .section-1 .mfp_default_skin_default .mfp_default_item .mfp_default_title a {
	  font-size: 30px !important;
	}
}
.t4-section .mfp_default_skin_default.mfp_mid_97{
  background-color: #231f20;
  margin-bottom: 100px;
  padding-top: 8%;
  padding-bottom: 2%;
}
@media screen and (max-width: 991px) {
  .t4-section .mfp_default_skin_default.mfp_mid_97{
    padding-top: 20%;
  }
}
.t4-section .mfp_default_skin_default.mfp_mid_97 .mfp_default_item .mfp_cat{
  border-top: 30px solid #231f20;
}
.t4-section .mfp_default_skin_default .mfp_default_item .mfp_default_title{
  margin-bottom: 0px;
}
.t4-section .mfp_default_skin_default .mfp_default_item .mfp_default_title a {
  font-weight: 500 !important;
  font-size: 24px !important;
  color: #ec8e00;
  transition: 0.1s;
}
@media screen and (min-width: 1400px){
	.t4-section .mfp_default_skin_default .mfp_default_item .mfp_default_title a {
	font-weight: 500 !important;
	font-size: 28px !important;
  }
}
.t4-section .mfp_default_skin_default .mfp_default_item .mfp_default_title a:hover {
  color: #bb7407;
  text-decoration: none;
}
.t4-intro-1 .mfp_default_skin_default .mfp_default_item .mfp_introtext{
  color: #808080;
}
.t4-section .mfp_default_skin_default .mfp_default_item .mfp_introtext{
  color: #464646;
  margin-top: 5px;
}
.t4-section .mfp_default_skin_default.mfp_mid_97 .mfp_default_item .mfp_introtext{
  color: #999999;
  margin-top: 5px;
}
.mfp_default_skin_default .mfp_default_item .mfp_date,
.mfp_default_skin_default .mfp_default_item .mfp_author{
  font-size: 12px !important;
}
/******************************************************************************* FIN: Inicio MODS */