.intro-items{
  position:relative;
  min-height:650px !important;
}

/************************************************************  style #1  ***********************************************/

.style1{
  background:var(--blanco);
  font-size: 10px;
  color:var(--textoOscuro);
  min-width:155px;
  transition: all 0.2s ease-in-out;
}
.style1:hover{
  box-shadow: 0px 0px 15px var(--negro);
  cursor: pointer;
}

.style1 .hl-imagen .imagen{
    min-height: 180px;
}
.style1 .hl-info{
  padding: 10px;
}
.style1 .hl-info .destacadoCbg{
  background: var(--oscuro);
  color:var(--textoGris);
  padding:5px;
}
.style1 .hl-info .destacadoCbg a{
  color:var(--textoGris);
}
.style1 .hl-info .destacadoCbg a:hover{
  text-decoration: none;
}
.style1 .hl-info .texto{
  margin-top:20px;
  margin-bottom:20px;
}
.style1 .hl-info .boton a{
  text-transform: uppercase;
  color:var(--textoGris);
}
.style1 .hl-info .boton a:hover{
  color:var(--textoOscuro);
  text-decoration: none;
}


/************************************************************  style #2  ***********************************************/

.style2{
  background:var(--blanco);
  min-width:284px;
  transition: all 0.2s ease-in-out;
}
.style2:hover{
  box-shadow: 0px 0px 15px var(--negro);
  cursor: pointer;
}
.style2 .hl-imagen .imagen{
    min-height: 280px;
}
.style2 .hl-info{
  position:relative;
}
.style2 .hl-info .vertical{
  position: absolute;
  right:-180px;
  bottom:20px;
  transform: rotate(-90deg);
	transform-origin: left top 0;
  padding:15px;
}

.style2 .hl-info .vertical a{
  color:var(--claro);
  font-size:30px;
  font-weight:700;
}



/************************************************************  style #3  ***********************************************/

.style3{
  background:var(--blanco);
  font-size:10px;
  width:220px;
  transition: all 0.2s ease-in-out;
}
.style3:hover{
  box-shadow: 0px 0px 15px var(--negro);
  cursor: pointer;
}

.style3 .hl-imagen .imagen{
    min-height: 275px;
}
.style3 .hl-info{
  padding: 10px;
}
.style3 .hl-info .titulo{
  padding:5px;
}
.style3 .hl-info .titulo a{
  color:var(--textoOscuro);
}

.style3 .hl-info .texto{
  padding:5px;
  color:var(--textoGris);
}


/************************************************************  style #4  ***********************************************/

.style4{
  background:var(--blanco);
  font-size:10px;
  position: relative;
  min-width:250px;
  transition: all 0.2s ease-in-out;
}
.style4:hover{
  box-shadow: 0px 0px 15px var(--negro);
  cursor: pointer;
}

.style4 .hl-imagen .imagen{
    min-height: 250px;
}
.style4 .hl-info{
  padding: 10px;
  position: absolute;
  bottom:10px;
  left:20px;
}

.style4 .hl-info .destacadoSbg{
  margin-bottom:10px;
  color:var(--textoGris);
}

.style4 .hl-info .titulo{
  font-weight: 700;
}
.style4 .hl-info .titulo a{
  color:var(--textoOscuro);
}


/************************************************************  style #5  ***********************************************/

.style5{
  background:var(--blanco);
  font-size:10px;
  position: relative;
  min-width:130px;
  transition: all 0.2s ease-in-out;
}
.style5:hover{
  box-shadow: 0px 0px 15px var(--negro);
  cursor: pointer;
}

.style5 .hl-imagen .imagen{
    min-height: 250px;
}
.style5 .hl-info{
  padding: 10px;
  position: absolute;
  bottom:10px;
  left:20px;
}

.style5 .hl-info .logo{

}


/************************************************************  style #6  ***********************************************/

.style6{
  background:var(--blanco);
  font-size:10px;
  padding:5px;
  padding-bottom: 20px;
  min-width:285px;
  transition: all 0.2s ease-in-out;
}
.style6:hover{
  box-shadow: 0px 0px 15px var(--negro);
  cursor: pointer;
}

.style6 .hl-imagen .imagen{
    min-height: 150px;
}
.style6 .hl-info{

}

.style6 .hl-info .destacadoSbg{
  text-align: center;
  color:var(--textoGris);
}

.style6 .hl-info .titulo{
  text-align: center;
  color:var(--textoOscuro);
  font-weight: 900;
  margin-top:20px;
}

.style6 .hl-info .boton{
  text-align: center;
  background:var(--oscuro);
  font-weight: 400;
  margin-top:20px;
}

.style6 .hl-info .boton a{
  color:var(--claro);
  text-align: center;
}

.style6 .hl-info .boton a:hover{
  text-decoration: none;
}


/************************************************************  style #7  ***********************************************/

.style7{
  background:var(--blanco);
  font-size:10px;
  padding:0px;
  position: relative;
  min-width:385px;
  transition: all 0.2s ease-in-out;
}
.style7:hover{
  box-shadow: 0px 0px 15px var(--negro);
  cursor: pointer;
}

.style7 .hl-imagen .imagen{
    min-height: 385px;
}
.style7 .hl-info{
  position:absolute;
  bottom:10px;
  margin-left:10px;
  margin-right:10px;
  background: var(--oscuro);
  padding:20px 0 0;
}

.style7 .hl-info .destacadoSbg{
  text-align: center;
  color:var(--textoGris);
}

.style7 .hl-info .titulo{
  text-align: center;
  color:var(--textoClaro);
  font-weight: 700;
  margin:20px 0;
}

.style7 .hl-info .texto{
  text-align: center;
  background:var(--claro);
  font-weight: 400;
  padding:10px;
  text-align: center;
  color:var(--textoGris);
}

/************************************************************  style #8  ***********************************************/

.style8{
  background:var(--blanco);
  font-size:10px;
  padding:0px;
  position: relative;
  padding:5px;
  min-width:200px;
  transition: all 0.2s ease-in-out;
}
.style8:hover{
  box-shadow: 0px 0px 15px var(--negro);
  cursor: pointer;
}

.style8 .hl-imagen{
  position:relative;
}
.style8 .hl-imagen .imagen{
  min-height: 245px;
}

.style8 .hl-imagen .destacadoCbg{
  text-align: center;
  position:absolute;
  bottom:-10px;
  right:0;
}

.style8 .hl-imagen .destacadoCbg a{
  padding:5px;
  background:var(--oscuro);
  color:var(--textoClaro);
}
.style8 .hl-imagen .destacadoCbg a:hover{
  color:var(--textoGris);
  text-decoration: none;
}

.style8 .hl-info{
  margin-left:10px;
  margin-right:10px;
  padding:20px 0 0;
}
.style8 .hl-info .titulo{
  text-align: center;
  color:var(--textoOscuro);
  font-weight: 700;
  margin:20px 0;
}

.style8 .hl-info .texto{
  text-align: center;
  padding:10px;
  color:var(--textoGris);
}