1<#-- 

2Widget templates can be used to modify the look of a 

3specific application. 

4 

5Please use the right panel to quickly add commonly used variables. 

6Autocomplete is also available and can be invoked by typing "${". 

7--> 

8 

9<#if themeDisplay?? > 

10	<#attempt> 

11		<#assign instanceIdBc7n = themeDisplay.getPortletDisplay().getInstanceId() > 

12	<#recover> 

13		<#assign instanceIdBc7n = "test" > 

14	</#recover> 

15</#if> 

16 

17<#-- <div id="bc7n-container" class="container-fluid container-it"> --> 

18	<div class="row no-gutters justify-content-center"> 

19		<div class="col-10"> 

20			<div class="row no-gutters align-items-start"> 

21				<div id="bc7n-${instanceIdBc7n}" class="carousel owl-carousel"> 

22					 

23					<#if entries?has_content> 

24						<#list entries as curEntry> 

25							 

26							<#assign docXml = saxReaderUtil.read(curEntry.getAssetRenderer().getArticle().getContent()) /> 

27							<#assign titulo = docXml.getRootElement().selectSingleNode("dynamic-element[@name='titulo']/dynamic-content").getText()/> 

28							<#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='img']")> 

29							<#assign imgNews = xPathSelector.selectSingleNode(docXml.getRootElement()).getStringValue()> 

30							<#if imgNews?? && imgNews?has_content && imgNews?trim !=""> 

31								<#attempt> 

32									<#assign imgJson = jsonFactoryUtil.createJSONObject(imgNews)> 

33									<#assign urlimg = "/documents/"+ imgJson.groupId +"/" +imgJson.fileEntryId +"/"+ imgJson.name +"/"+imgJson.uuid > 

34								<#recover> 

35								</#recover> 

36							<#else> 

37								<#assign urlimg = "/documents/123/40770/lorem-ipsum.jpg/d705df6c-f78f-adf5-f2dd-616265917670?t=1639427532057" > 

38							</#if> 

39							 

40							<#assign  urldetalle = "/web/general/detalle?group_id="+curEntry.getClassPK() /> 

41								 

42							<div class="cardItem-bc7n"> 

43								<a href="${urldetalle}" target="_blank"> 

44									<div class="img-bc7n" style="background-image:url(${urlimg})"></div> 

45									<h1 class="text-center titulo-card-bc7n mt-4 mb-3">${titulo}</h1> 

46								</a> 

47							</div> 

48							 

49						</#list> 

50					</#if> 

51					 

52				</div> 

53			</div> 

54		</div> 

55	</div> 

56<#-- </div> --> 

57			 

58<script> 

59	$( document ).ready(function() { 

60$("#bc7n-${instanceIdBc7n}").owlCarousel({ 

61	margin: 28, 

62	loop: true, 

63	autoplay: true, 

64	autoplayTimeout: 5000, 

65	autoplayHoverPause: true, 

66	dots: false, 

67	nav: true, 

68	startPosition  : 0, 

69	navText: ['<i class="fal fa-chevron-circle-left"></i>','<i class="fal fa-chevron-circle-right"></i>'], 

70	responsive: { 

71	  0:{ 

72		items:1, 

73		nav: false, 

74		dots: true 

75	  }, 

76	  767:{ 

77		items:2, 

78	  }, 

79	  1281:{ 

80		items:3 

81	  } 

82	} 

83  }); 

84		}); 

85</script> 

86 

87<style type="text/css"> 

88	#bc7n-container{ 

89		background-color: #f3edea; 

90	} 

91	.bc7n-titulo{ 

92		font-family: 'Degular-Bold'; 

93		font-size: 3.5em; 

94		font-weight: bold; 

95		font-stretch: normal; 

96		font-style: normal; 

97		line-height: normal; 

98		letter-spacing: 1.11px; 

99		color: #00447d; 

100		/*text-transform: uppercase;*/ 

101	} 

102	.cardItem-bc7n .img-bc7n { 

103		border-radius: 20px; 

104		margin-bottom: 0 auto !important; 

105	} 

106	@media (min-width: 300px){ 

107		.cardItem-bc7n { 

108			padding: 20px 20px 43px; 

109			border-radius: 20px; 

110			background-color: #fff; 

111		} 

112		.cardItem-bc7n .img-bc7n { 

113			height: 227px; 

114			margin-bottom: 24px; 

115		} 

116		#bc7n-${instanceIdBc7n} .cardItem-bc7n { 

117			height: 485px; 

118		} 

119	} 

120 

121	@media (min-width: 768px){ 

122		.cardItem-bc7n { 

123			margin: 0 15px 0 0; 

124			padding: 15px 12px 27px 18px; 

125			border-radius: 20px; 

126			background-color: #fff; 

127		} 

128		.cardItem-bc7n .img-bc7n { 

129			height: 146px; 

130			margin-bottom: 17px; 

131		} 

132		#bc7n-${instanceIdBc7n} .cardItem-bc7n { 

133			height: 485px; 

134		} 

135	} 

136	@media (min-width: 992px) { 

137		.vinculo-bc7n{ 

138			justify-content: flex-end !important; 

139		} 

140		.circulo-bc7-n{ 

141			font-size:32px; 

142			padding-right: 40px; 

143		} 

144		.cardItem-bc7n { 

145			background-color: #fff; 

146			height: auto; 

147			padding: 26px; 

148		} 

149		.cardItem-bc7n .img-bc7n{ 

150			height: 227px; 

151			margin-bottom: 28px; 

152		} 

153		#bc7n-${instanceIdBc7n} .cardItem-bc7n{ 

154			height:485px; 

155		} 

156	} 

157	@media(min-width:1920px){ 

158		.cardItem-bc7n .img-bc7n { 

159			height: 304px; 

160			margin-bottom: 38px; 

161		} 

162		#bc7n-${instanceIdBc7n} .cardItem-bc7n{ 

163			height:570px; 

164		} 

165	} 

166	#bc7n-${instanceIdBc7n} .owl-prev { 

167		position: absolute; 

168		top: 50%; 

169		margin-left: -10%; 

170		display: block !important; 

171	} 

172	#bc7n-${instanceIdBc7n} .owl-next { 

173		position: absolute; 

174		top: 50%; 

175		right: -10.2%; 

176		display: block !important; 

177	} 

178	#bc7n-${instanceIdBc7n} button.owl-next:focus, #bc7n-${instanceIdBc7n} button.owl-prev:focus { 

179		outline: unset !important; 

180	} 

181 

182	.titulo-card-bc7n{ 

183		font-family: 'Degular-Bold'; 

184		font-size: 1.5em; 

185		font-weight: bold; 

186		font-stretch: normal; 

187		font-style: normal; 

188		line-height: normal; 

189		letter-spacing: 0.44px; 

190		color: #2b333a; 

191	} 

192	.subtitulo-card-bc7n { 

193		font-family: 'Degular-Light'; 

194		font-size: 1.5em; 

195		font-weight: 300; 

196		font-stretch: normal; 

197		font-style: normal; 

198		line-height: normal; 

199		letter-spacing: 0.25px; 

200		color: #666666; 

201	} 

202	 

203	#bc7n-${instanceIdBc7n} button.owl-prev i , #bc7n-${instanceIdBc7n} button.owl-next i { 

204		font-size: 40px; 

205	} 

206	#bc7n-${instanceIdBc7n} button.owl-prev, #bc7n-${instanceIdBc7n} button.owl-next { 

207		color: #42b4e3 !important; 

208	} 

209	#bc7n-${instanceIdBc7n} .img-bc7n { 

210		background-size: cover; 

211		background-position: center; 

212		background-repeat: no-repeat; 

213	} 

214	#bc7n-${instanceIdBc7n} .titulo-card-bc7n { 

215		display: -webkit-box; 

216		-webkit-line-clamp: 5; 

217		-webkit-box-orient: vertical; 

218		overflow: hidden; 

219		text-overflow: ellipsis; 

220	} 

221	.bc7n-subtitulo { 

222		font-family: 'Degular-Regular'; 

223		font-size: 1.6em; 

224		font-weight: normal; 

225		font-stretch: normal; 

226		font-style: normal; 

227		line-height: 1.54; 

228		letter-spacing: 0px; 

229		text-align: center; 

230		color: #666666; 

231	} 

232	#bc7n-${instanceIdBc7n} .owl-dot{ 

233		height: 10px; 

234		width: 10px; 

235		margin: 0 5px; 

236		outline: none; 

237		border-radius: 50%; 

238		transition: all 0.3s ease; 

239	} 

240	#bc7n-${instanceIdBc7n} .owl-dot.active, #bc7n-${instanceIdBc7n} .owl-dot:hover{ 

241		background: #fff !important; 

242		outline: transparent !important; 

243	} 

244	#bc7n-${instanceIdBc7n} button.owl-dot { 

245		background-color: gray !important; 

246	} 

247	#bc7n-${instanceIdBc7n} .owl-dots { 

248		text-align: center !important; 

249		-webkit-tap-highlight-color: transparent; 

250		margin-top: 40px; 

251		margin-bottom: 40px; 

252	} 

253	.vinculo-bc7n{ 

254		justify-content: center; 

255	} 

256	.cardItem-bc7n a { 

257		text-decoration: none; 

258	} 

259	@media(min-width:300px) and (max-width: 991.5px){ 

260		.bc7n-titulo { 

261			color:#666666; 

262			text-transform:capitalize; 

263			font-size: 3em; 

264		}  

265		.circulo-bc7-n{ 

266			font-size:24px; 

267			padding-right: 20px; 

268		} 

269	} 

270 

271	@media(min-width:767px) and (max-width:991.5px){ 

272		.cardItem-bc7n { 

273			margin-bottom: 60px; 

274		} 

275		#bc7n-${instanceIdBc7n} .cardItem-bc7n{ 

276			height: 390px; 

277		} 

278	} 

279</style>