PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 2.2.10
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v2.2.10
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
← All changes | public/assets/css/style.css +422 -568 4.0.7 → 2.2.10 View file →
@@ -1,55 +1,47 @@
1 1 /* Extra CSS */
2 2
3 3 .pcp-demo-section {
4 - max-width: 1200px;
5 - margin: 0 auto;
4 + max-width: 1200px;
5 + margin: 0 auto;
6 6 }
7 7
8 8 .pcp-section-padding {
9 - padding: 80px 0;
9 + padding: 80px 0;
10 10 }
11 11
12 12 /* Common CSS */
13 13 .pcp-align-left {
14 - text-align: left;
14 + text-align: left;
15 15 }
16 -
17 16 .pcp-align-center {
18 - text-align: center;
17 + text-align: center;
19 18 }
20 -
21 19 .pcp-align-right {
22 - text-align: right;
20 + text-align: right;
23 21 }
24 -
25 22 .sp-pcp-section {
26 - color: #444;
23 + color: #444;
27 24 }
28 25
29 26 .entry .entry-content .sp-pcp-section a,
30 27 .sp-pcp-section a {
31 - text-decoration: none;
32 - transition: all 0.33s;
28 + text-decoration: none;
29 + transition: all 0.33s;
33 30 }
34 31
35 32 .sp-pcp-section img {
36 - max-width: 100%;
37 - vertical-align: middle;
33 + max-width: 100%;
34 + vertical-align: middle;
38 35 }
39 36
40 37 .sp-pcp-section * {
41 - box-sizing: border-box;
38 + box-sizing: border-box;
42 39 }
43 -
44 40 .sp-pcp-section .swiper-container {
45 - position: initial;
41 + position: initial;
46 42 }
47 43
48 -.sp-pcp-section .swiper-container.sp-pcp-carousel.top_right {
49 - position: relative;
50 -}
51 -
52 44 /* Single post */
53 45
54 46 .sp-pcp-post .sp-pcp-thumb:focus,
55 47 .sp-pcp-post .sp-pcp-thumb img:focus,
@@ -54,30 +46,27 @@
54 46 .sp-pcp-post .sp-pcp-thumb:focus,
55 47 .sp-pcp-post .sp-pcp-thumb img:focus,
56 48 .sp-pcp-post .sp-pcp-thumb:hover,
57 49 .sp-pcp-post .sp-pcp-thumb img:hover {
58 - outline: none;
59 - text-decoration: none;
60 - outline-offset: 0;
61 - color: transparent;
62 - border: none;
50 + outline: none;
51 + text-decoration: none;
52 + outline-offset: 0;
53 + color: transparent;
54 + border: none;
63 55 }
64 -
65 56 .sp-pcp-post {
66 - display: -webkit-flex;
67 - display: flex;
68 - flex-direction: column;
69 - overflow: hidden;
57 + display: -webkit-flex;
58 + display: flex;
59 + flex-direction: column;
60 + overflow: hidden;
70 61 }
71 -
72 62 .sp-pcp-post a {
73 - text-decoration: none;
63 + text-decoration: none;
74 64 }
75 -
76 65 .sp-pcp-post .pcp-post-thumb-wrapper {
77 - overflow: hidden;
78 - display: block;
79 - margin-bottom: 11px;
66 + overflow: hidden;
67 + display: block;
68 + margin-bottom: 11px;
80 69 }
81 70
82 71 /* .sp-pcp-post .sp-pcp-post:hover .sp-pcp-post-thumb-area img {
83 72 transform: scale(1.2);
@@ -82,717 +71,582 @@
82 71 /* .sp-pcp-post .sp-pcp-post:hover .sp-pcp-post-thumb-area img {
83 72 transform: scale(1.2);
84 73 } */
85 74 .sp-pcp-post .sp-pcp-post-thumb-area {
86 - position: relative;
87 - /* margin-bottom: 15px;
75 + position: relative;
76 + /* margin-bottom: 15px;
88 77 order: 1; */
89 78 }
90 79
91 80 .sp-pcp-post .sp-pcp-post-thumb-area img {
92 - max-width: 100%;
93 - transition: ease all 0.3s;
94 - height: 100%;
81 + max-width: 100%;
82 + transition: ease all 0.3s;
83 + height: 100%;
95 84 }
96 85
97 86 .sp-pcp-post .sp-pcp-title {
98 - margin: 0;
99 - font-size: 15px;
87 + margin: 0;
88 + font-size: 15px;
100 89 }
101 -
102 90 .sp-pcp-post .sp-pcp-title {
103 - margin: 0 0 9px 0;
91 + margin: 0 0 9px 0;
104 92 }
105 -
106 93 .sp-pcp-post .sp-pcp-title a,
107 94 .sp-pcp-post .sp-pcp-title {
108 - text-transform: none;
109 - font-size: 20px;
110 - line-height: 24px;
111 - color: #111;
112 - font-weight: 400;
113 - text-decoration: none;
95 + text-transform: none;
96 + font-size: 20px;
97 + line-height: 24px;
98 + color: #111;
99 + font-weight: 400;
114 100 }
115 -
116 101 .sp-pcp-post .sp-pcp-post-meta {
117 - margin: 0px 0px 9px 0px;
118 - text-align: left;
102 + margin: 0px 0px 9px 0px;
103 + text-align: left;
119 104 }
120 -
121 105 .sp-pcp-post .sp-pcp-post-meta ul {
122 - list-style: none;
123 - margin: 0;
124 - padding: 0;
125 - line-height: 1;
106 + list-style: none;
107 + margin: 0;
108 + padding: 0;
109 + line-height: 1;
126 110 }
127 111
128 112 .sp-pcp-post .sp-pcp-post-meta ul li {
129 - display: inline-block;
130 - margin: 0 5px 5px 0;
113 + display: inline-block;
114 + margin: 0 5px 5px 0;
131 115 }
132 116
133 117 .sp-pcp-post .sp-pcp-post-meta ul li .fa,
134 118 .sp-pcp-post .sp_pcp_cf_list .fa {
135 - margin-right: 3px;
119 + margin-right: 3px;
136 120 }
137 121
138 122 .sp-pcp-post .sp-pcp-post-meta ul li a {
139 - display: inline-block;
140 - text-decoration: none;
141 - box-shadow: none;
123 + display: inline-block;
124 + text-decoration: none;
125 + box-shadow: none;
142 126 }
143 -
144 127 .sp-pcp-post .sp-pcp-post-meta li,
145 128 .sp-pcp-post .sp-pcp-post-meta ul,
146 129 .sp-pcp-post .sp-pcp-post-meta li a {
147 - text-transform: none;
148 - font-size: 14px;
149 - line-height: 16px;
150 - letter-spacing: 0px;
151 - color: #888;
130 + text-transform: none;
131 + font-size: 14px;
132 + line-height: 16px;
133 + letter-spacing: 0px;
134 + color: #888;
152 135 }
153 136
154 -.sp-pcp-post-meta ul li .fa-comments-o {
155 - font-family: FontAwesome;
156 -}
157 -
158 137 .sp-pcp-post .sp-pcp-post-content {
159 - text-transform: none;
160 - font-size: 16px;
161 - line-height: 20px;
162 - letter-spacing: 0px;
163 - margin: 0px 0px 17px 0px;
164 - color: #444;
138 + text-transform: none;
139 + font-size: 16px;
140 + line-height: 20px;
141 + letter-spacing: 0px;
142 + margin: 0px 0px 17px 0px;
143 + color: #444;
165 144 }
166 145
167 146 .sp-pcp-post .sp-pcp-post-content p:first-of-type {
168 - margin-top: 0;
147 + margin-top: 0;
169 148 }
170 149
171 150 .sp-pcp-post .sp-pcp-post-content p:last-of-type {
172 - margin-bottom: 0;
151 + margin-bottom: 0;
173 152 }
174 153
175 154 .sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore {
176 - margin-top: 15px;
155 + margin-top: 15px;
177 156 }
178 157
179 158 .sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a {
180 - display: inline-block;
181 - border: 1px solid #888;
182 - padding: 7px 12px;
183 - box-shadow: 0 0 0;
184 - text-transform: uppercase;
185 - font-size: 12px;
186 - line-height: 18px;
187 - letter-spacing: 0px;
188 - background: transparent;
189 - color: #111;
190 - border-color: #888;
191 - border-radius: 0;
159 + display: inline-block;
160 + border: 1px solid #888;
161 + padding: 7px 12px;
162 + box-shadow: 0 0 0;
163 + text-transform: uppercase;
164 + font-size: 12px;
165 + line-height: 18px;
166 + letter-spacing: 0px;
167 + background: transparent;
168 + color: #111;
169 + border-color: #888;
170 + border-radius: 0;
192 171 }
193 172
194 173 /* Carousel */
195 174 .pcp-carousel-wrapper .sp-pcp-carousel {
196 - padding-bottom: 60px;
197 - padding-top: 60px;
175 + padding-bottom: 60px;
176 + padding-top: 60px;
198 177 }
199 178
200 179 .pcp-carousel-wrapper .bottom_center.sp-pcp-carousel {
201 - padding-bottom: 72px;
180 + padding-bottom: 72px;
202 181 }
203 -
204 182 .pcp-carousel-wrapper {
205 - position: relative;
183 + position: relative;
206 184 }
207 185
208 186 .pcp-carousel-wrapper .pcp-button-prev,
209 187 .pcp-carousel-wrapper .pcp-button-next {
210 - background-image: none;
211 - background-size: auto;
212 - font-size: 25px;
213 - height: 33px;
214 - width: 33px;
215 - margin-top: 16px;
216 - /* border: 2px solid #444; */
217 - text-align: center;
218 - /* color: #444; */
219 - line-height: 31px;
220 - -webkit-transition: 0.3s;
188 + background-image: none;
189 + background-size: auto;
190 + font-size: 25px;
191 + height: 33px;
192 + width: 33px;
193 + margin-top: 16px;
194 + /* border: 2px solid #444; */
195 + text-align: center;
196 + /* color: #444; */
197 + line-height: 31px;
198 + -webkit-transition: 0.3s;
221 199 }
222 200
223 201 .pcp-carousel-wrapper .pcp-button-prev.top_right,
224 202 .pcp-carousel-wrapper .pcp-button-next.top_right {
225 - top: 0;
226 - right: 0;
203 + top: 0;
204 + right: 0;
227 205 }
228 206
229 207 .pcp-carousel-wrapper .pcp-button-prev.top_right {
230 - right: 42px;
231 - left: auto;
208 + right: 42px;
209 + left: auto;
232 210 }
233 211
234 212 .pcp-carousel-wrapper .pcp-button-prev.top_center,
235 213 .pcp-carousel-wrapper .pcp-button-next.top_center {
236 - top: 0;
237 - left: calc(50% + 5px);
238 - text-align: center;
214 + top: 0;
215 + left: calc(50% + 5px);
216 + text-align: center;
239 217 }
240 218
241 219 .pcp-carousel-wrapper .pcp-button-prev.top_center {
242 - right: auto;
243 - left: calc(50% - 40px);
220 + right: auto;
221 + left: calc(50% - 40px);
244 222 }
245 223
246 224 .pcp-carousel-wrapper .pcp-button-prev.top_left,
247 225 .pcp-carousel-wrapper .pcp-button-next.top_left {
248 - top: 0;
249 - left: 0;
250 - text-align: center;
226 + top: 0;
227 + left: 0;
228 + text-align: center;
251 229 }
252 230
253 231 .pcp-carousel-wrapper .pcp-button-next.top_left {
254 - right: auto;
255 - left: 40px;
232 + right: auto;
233 + left: 40px;
256 234 }
257 235
258 236 .pcp-carousel-wrapper .swiper-button-prev::after,
259 237 .pcp-carousel-wrapper .swiper-button-next::after {
260 - display: none;
238 + display: none;
261 239 }
262 -
263 240 .swiper-lazy-preloader-black {
264 - --swiper-preloader-color: #888;
241 + --swiper-preloader-color: #888;
265 242 }
266 -
267 243 .pcp-carousel-wrapper.center .swiper-slide .sp-pcp-post {
268 - transform: scale(0.9);
269 - opacity: 0.8;
270 - transition: 0.22s all;
244 + transform: scale(0.9);
245 + opacity: 0.8;
246 + transition: 0.22s all;
271 247 }
272 -
273 248 .pcp-carousel-wrapper.center .swiper-slide.swiper-slide-active .sp-pcp-post {
274 - transform: scale(1.1);
275 - opacity: 1;
249 + transform: scale(1.1);
250 + opacity: 1;
276 251 }
277 252
278 253 /* Bottom Position */
279 254 .pcp-carousel-wrapper .pcp-button-prev.bottom_right,
280 255 .pcp-carousel-wrapper .pcp-button-next.bottom_right {
281 - bottom: 0;
282 - right: 0;
283 - top: auto;
256 + bottom: 0;
257 + right: 0;
258 + top: auto;
284 259 }
285 260
286 261 .pcp-carousel-wrapper .pcp-button-prev.bottom_right {
287 - right: 44px;
288 - left: auto;
262 + right: 44px;
263 + left: auto;
289 264 }
290 265
291 266 .pcp-carousel-wrapper .pcp-button-prev.bottom_center,
292 267 .pcp-carousel-wrapper .pcp-button-next.bottom_center {
293 - top: auto;
294 - bottom: 33px;
295 - left: calc(50% + 5px);
296 - text-align: center;
268 + top: auto;
269 + bottom: 33px;
270 + left: calc(50% + 5px);
271 + text-align: center;
297 272 }
298 273
299 274 .pcp-carousel-wrapper .pcp-button-prev.bottom_center {
300 - right: auto;
301 - left: calc(50% - 40px);
275 + right: auto;
276 + left: calc(50% - 40px);
302 277 }
303 278
304 279 .pcp-carousel-wrapper .pcp-button-prev.bottom_left,
305 280 .pcp-carousel-wrapper .pcp-button-next.bottom_left {
306 - top: auto;
307 - bottom: 0;
308 - left: 0;
281 + top: auto;
282 + bottom: 0;
283 + left: 0;
309 284 }
310 285
311 286 .pcp-carousel-wrapper .pcp-button-next.bottom_left {
312 - right: auto;
313 - left: 40px;
287 + right: auto;
288 + left: 40px;
314 289 }
315 290
316 -.sp-pcp-post {
317 - direction: ltr
291 +/* Center outer */
292 +/*
293 +.pcp-carousel-wrapper .pcp-button-next.vertically_center_outer,
294 +.pcp-carousel-wrapper .pcp-button-prev.vertically_center_outer {
295 + top: 50%;
296 + -webkit-transform: translateY(-50%);
297 + transform: translateY(-50%);
298 + left: -35px;
318 299 }
319 300
320 -html[dir="rtl"] .sp-pcp-post {
321 - direction: rtl
301 +.pcp-carousel-wrapper .pcp-button-next.vertically_center_outer,
302 +.pcp-carousel-wrapper .pcp-button-next.vertical_center_inner_hover {
303 + right: -35px;
304 + left: auto;
322 305 }
306 +.pcp-carousel-wrapper .pcp-button-prev.vertical_center_inner_hover {
307 + right: auto;
308 + left: -35px;
309 +}
310 +.pcp-carousel-wrapper:hover .pcp-button-next.vertical_center_inner_hover {
311 + right: 10px;
312 +}
313 +.pcp-carousel-wrapper:hover .pcp-button-prev.vertical_center_inner_hover {
314 + left: 10px;
315 +}
323 316
317 +.pcp-carousel-wrapper .pcp-button-prev.swiper-button-prev .fa,
318 +.pcp-carousel-wrapper .pcp-button-next.swiper-button-next .fa {
319 + line-height: 31px;
320 +}
321 +
322 +.pcp-carousel-wrapper .pcp-button-prev.swiper-button-prev:hover,
323 +.pcp-carousel-wrapper .pcp-button-next.swiper-button-next:hover {
324 + background: #444444;
325 + color: #fff;
326 +}
327 + */
324 328 /* Bullet pagination */
325 329
326 -.pcp-carousel-wrapper .swiper-pagination-bullets.dots .swiper-pagination-bullet {
327 - width: 11px;
328 - height: 11px;
329 - opacity: 1;
330 - margin: 0 4px;
330 +.pcp-carousel-wrapper
331 + .swiper-pagination-bullets.dots
332 + .swiper-pagination-bullet {
333 + width: 11px;
334 + height: 11px;
335 + opacity: 1;
331 336 }
332 -
333 -.pcp-carousel-wrapper .swiper-pagination-bullets.number .swiper-pagination-bullet {
334 - margin: 0 4px;
335 - background: #444;
336 - padding: 5px 10px;
337 - border-radius: 0;
338 - opacity: 1;
339 - height: auto;
340 - color: #fff;
341 - width: auto;
342 - margin: 3px 3px;
343 - display: inline-block;
344 - font-size: 14px;
337 +.pcp-carousel-wrapper
338 + .swiper-pagination-bullets.number
339 + .swiper-pagination-bullet {
340 + margin: 0 4px;
341 + background: #444;
342 + padding: 5px 10px;
343 + border-radius: 0;
344 + opacity: 1;
345 + height: auto;
346 + color: #fff;
347 + width: auto;
348 + margin: 3px 3px;
349 + display: inline-block;
350 + font-size: 14px;
345 351 }
346 352
347 353 /* Grid CSS */
348 354
349 355 .sp-pcp-container {
350 - width: 100%;
351 - margin-right: auto;
352 - margin-left: auto;
353 - position: relative;
354 - overflow: hidden;
356 + width: 100%;
357 + margin-right: auto;
358 + margin-left: auto;
359 + position: relative;
355 360 }
356 361
357 -.sp-pcp-row.no-gutters>[class*="sp-pcp-col-"] {
358 - padding-right: 0;
359 - padding-left: 0;
362 +.sp-pcp-row.no-gutters > [class*="sp-pcp-col-"] {
363 + padding-right: 0;
364 + padding-left: 0;
360 365 }
361 366
362 367 .sp-pcp-row {
363 - display: flex;
364 - flex-wrap: wrap;
368 + display: flex;
369 + flex-wrap: wrap;
370 + margin-right: -10px;
371 + margin-left: -10px;
365 372 }
366 373
367 374 .sp-pcp-row [class*="sp-pcp-col-"] {
368 - width: 100%;
375 + /* position: relative; */
376 + width: 100%;
377 + padding-right: 10px;
378 + padding-left: 10px;
379 + padding-bottom: 20px;
369 380 }
370 381
371 382 @media (min-width: 1200px) {
372 - .sp-pcp-row .sp-pcp-col-xl-1 {
373 - max-width: 100%;
374 - }
375 -
376 - .sp-pcp-row .sp-pcp-col-xl-2 {
377 - max-width: 50%;
378 - }
379 -
380 - .sp-pcp-row .sp-pcp-col-xl-3 {
381 - max-width: 33.22222222%;
382 - }
383 -
384 - .sp-pcp-row .sp-pcp-col-xl-4 {
385 - max-width: 25%;
386 - }
387 -
388 - .sp-pcp-row .sp-pcp-col-xl-5 {
389 - max-width: 20%;
390 - }
391 -
392 - .sp-pcp-row .sp-pcp-col-xl-6 {
393 - max-width: 16.66666666666667%;
394 - }
395 -
396 - .sp-pcp-row .sp-pcp-col-xl-7 {
397 - max-width: 14.28571428%;
398 - }
399 -
400 - .sp-pcp-row .sp-pcp-col-xl-8 {
401 - max-width: 12.5%;
402 - }
383 + .sp-pcp-row .sp-pcp-col-xl-1 {
384 + flex: 0 0 100%;
385 + max-width: 100%;
386 + }
387 + .sp-pcp-row .sp-pcp-col-xl-2 {
388 + flex: 0 0 50%;
389 + max-width: 50%;
390 + }
391 + .sp-pcp-row .sp-pcp-col-xl-3 {
392 + flex: 0 0 33.22222222%;
393 + max-width: 33.22222222%;
394 + }
395 + .sp-pcp-row .sp-pcp-col-xl-4 {
396 + flex: 0 0 25%;
397 + max-width: 25%;
398 + }
399 + .sp-pcp-row .sp-pcp-col-xl-5 {
400 + flex: 0 0 20%;
401 + max-width: 20%;
402 + }
403 + .sp-pcp-row .sp-pcp-col-xl-6 {
404 + flex: 0 0 16.66666666666667%;
405 + max-width: 16.66666666666667%;
406 + }
407 + .sp-pcp-row .sp-pcp-col-xl-7 {
408 + flex: 0 0 14.28571428%;
409 + max-width: 14.28571428%;
410 + }
411 + .sp-pcp-row .sp-pcp-col-xl-8 {
412 + flex: 0 0 12.5%;
413 + max-width: 12.5%;
414 + }
403 415 }
404 416
405 417 @media (max-width: 1200px) {
406 - .sp-pcp-row .sp-pcp-col-lg-1 {
407 - max-width: 100%;
408 - }
409 -
410 - .sp-pcp-row .sp-pcp-col-lg-2 {
411 - max-width: 50%;
412 - }
413 -
414 - .sp-pcp-row .sp-pcp-col-lg-3 {
415 - max-width: 33.22222222%;
416 - }
417 -
418 - .sp-pcp-row .sp-pcp-col-lg-4 {
419 - max-width: 25%;
420 - }
421 -
422 - .sp-pcp-row .sp-pcp-col-lg-5 {
423 - max-width: 20%;
424 - }
425 -
426 - .sp-pcp-row .sp-pcp-col-lg-6 {
427 - max-width: 16.66666666666667%;
428 - }
429 -
430 - .sp-pcp-row .sp-pcp-col-lg-7 {
431 - max-width: 14.28571428%;
432 - }
433 -
434 - .sp-pcp-row .sp-pcp-col-lg-8 {
435 - max-width: 12.5%;
436 - }
418 + .sp-pcp-row .sp-pcp-col-lg-1 {
419 + flex: 0 0 100%;
420 + max-width: 100%;
421 + }
422 + .sp-pcp-row .sp-pcp-col-lg-2 {
423 + flex: 0 0 50%;
424 + max-width: 50%;
425 + }
426 + .sp-pcp-row .sp-pcp-col-lg-3 {
427 + flex: 0 0 33.22222222%;
428 + max-width: 33.22222222%;
429 + }
430 + .sp-pcp-row .sp-pcp-col-lg-4 {
431 + flex: 0 0 25%;
432 + max-width: 25%;
433 + }
434 + .sp-pcp-row .sp-pcp-col-lg-5 {
435 + flex: 0 0 20%;
436 + max-width: 20%;
437 + }
438 + .sp-pcp-row .sp-pcp-col-lg-6 {
439 + flex: 0 0 16.66666666666667%;
440 + max-width: 16.66666666666667%;
441 + }
442 + .sp-pcp-row .sp-pcp-col-lg-7 {
443 + flex: 0 0 14.28571428%;
444 + max-width: 14.28571428%;
445 + }
446 + .sp-pcp-row .sp-pcp-col-lg-8 {
447 + flex: 0 0 12.5%;
448 + max-width: 12.5%;
449 + }
437 450 }
438 451
439 452 @media (max-width: 992px) {
440 - .sp-pcp-row .sp-pcp-col-md-1 {
441 - max-width: 100%;
442 - }
443 -
444 - .sp-pcp-row .sp-pcp-col-md-2 {
445 - max-width: 50%;
446 - }
447 -
448 - .sp-pcp-row .sp-pcp-col-md-2-5 {
449 - max-width: 75%;
450 - }
451 -
452 - .sp-pcp-row .sp-pcp-col-md-3 {
453 - max-width: 33.333%;
454 - }
455 -
456 - .sp-pcp-row .sp-pcp-col-md-4 {
457 - max-width: 25%;
458 - }
459 -
460 - .sp-pcp-row .sp-pcp-col-md-5 {
461 - max-width: 20%;
462 - }
463 -
464 - .sp-pcp-row .sp-pcp-col-md-6 {
465 - max-width: 16.66666666666667%;
466 - }
467 -
468 - .sp-pcp-row .sp-pcp-col-md-7 {
469 - max-width: 14.28571428%;
470 - }
471 -
472 - .sp-pcp-row .sp-pcp-col-md-8 {
473 - max-width: 12.5%;
474 - }
453 + .sp-pcp-row .sp-pcp-col-md-1 {
454 + flex: 0 0 100%;
455 + max-width: 100%;
456 + }
457 + .sp-pcp-row .sp-pcp-col-md-2 {
458 + flex: 0 0 50%;
459 + max-width: 50%;
460 + }
461 + .sp-pcp-row .sp-pcp-col-md-2-5 {
462 + flex: 0 0 75%;
463 + max-width: 75%;
464 + }
465 + .sp-pcp-row .sp-pcp-col-md-3 {
466 + flex: 0 0 33.333%;
467 + max-width: 33.333%;
468 + }
469 + .sp-pcp-row .sp-pcp-col-md-4 {
470 + flex: 0 0 25%;
471 + max-width: 25%;
472 + }
473 + .sp-pcp-row .sp-pcp-col-md-5 {
474 + flex: 0 0 20%;
475 + max-width: 20%;
476 + }
477 + .sp-pcp-row .sp-pcp-col-md-6 {
478 + flex: 0 0 16.66666666666667%;
479 + max-width: 16.66666666666667%;
480 + }
481 + .sp-pcp-row .sp-pcp-col-md-7 {
482 + flex: 0 0 14.28571428%;
483 + max-width: 14.28571428%;
484 + }
485 + .sp-pcp-row .sp-pcp-col-md-8 {
486 + flex: 0 0 12.5%;
487 + max-width: 12.5%;
488 + }
475 489 }
476 490
477 491 @media (max-width: 768px) {
478 - .sp-pcp-row .sp-pcp-col-sm-1 {
479 - max-width: 100%;
480 - }
481 -
482 - .sp-pcp-row .sp-pcp-col-sm-2 {
483 - max-width: 50%;
484 - }
485 -
486 - .sp-pcp-row .sp-pcp-col-sm-2-5 {
487 - max-width: 75%;
488 - }
489 -
490 - .sp-pcp-row .sp-pcp-col-sm-3 {
491 - max-width: 33.333%;
492 - }
493 -
494 - .sp-pcp-row .sp-pcp-col-sm-4 {
495 - max-width: 25%;
496 - }
497 -
498 - .sp-pcp-row .sp-pcp-col-sm-5 {
499 - max-width: 20%;
500 - }
501 -
502 - .sp-pcp-row .sp-pcp-col-sm-6 {
503 - max-width: 16.66666666666667%;
504 - }
505 -
506 - .sp-pcp-row .sp-pcp-col-sm-7 {
507 - max-width: 14.28571428%;
508 - }
509 -
510 - .sp-pcp-row .sp-pcp-col-sm-8 {
511 - max-width: 12.5%;
512 - }
492 + .sp-pcp-row .sp-pcp-col-sm-1 {
493 + flex: 0 0 100%;
494 + max-width: 100%;
495 + }
496 + .sp-pcp-row .sp-pcp-col-sm-2 {
497 + flex: 0 0 50%;
498 + max-width: 50%;
499 + }
500 + .sp-pcp-row .sp-pcp-col-sm-2-5 {
501 + flex: 0 0 75%;
502 + max-width: 75%;
503 + }
504 + .sp-pcp-row .sp-pcp-col-sm-3 {
505 + flex: 0 0 33.333%;
506 + max-width: 33.333%;
507 + }
508 + .sp-pcp-row .sp-pcp-col-sm-4 {
509 + flex: 0 0 25%;
510 + max-width: 25%;
511 + }
512 + .sp-pcp-row .sp-pcp-col-sm-5 {
513 + flex: 0 0 20%;
514 + max-width: 20%;
515 + }
516 + .sp-pcp-row .sp-pcp-col-sm-6 {
517 + flex: 0 0 16.66666666666667%;
518 + max-width: 16.66666666666667%;
519 + }
520 + .sp-pcp-row .sp-pcp-col-sm-7 {
521 + flex: 0 0 14.28571428%;
522 + max-width: 14.28571428%;
523 + }
524 + .sp-pcp-row .sp-pcp-col-sm-8 {
525 + flex: 0 0 12.5%;
526 + max-width: 12.5%;
527 + }
513 528 }
514 -
515 529 .pcp-post-pagination.pcp-on-mobile {
516 - display: none;
530 + display: none;
517 531 }
518 -
519 532 @media (max-width: 420px) {
520 - .sp-pcp-row .sp-pcp-col-xs-1 {
521 - max-width: 100%;
522 - }
523 -
524 - .sp-pcp-row .sp-pcp-col-xs-2 {
525 - max-width: 50%;
526 - }
527 -
528 - .sp-pcp-row .sp-pcp-col-xs-3 {
529 - max-width: 33.22222222%;
530 - }
531 -
532 - .sp-pcp-row .sp-pcp-col-xs-4 {
533 - max-width: 25%;
534 - }
535 -
536 - .sp-pcp-row .sp-pcp-col-xs-5 {
537 - max-width: 20%;
538 - }
539 -
540 - .sp-pcp-row .sp-pcp-col-xs-6 {
541 - max-width: 16.66666666666667%;
542 - }
543 -
544 - .sp-pcp-row .sp-pcp-col-xs-7 {
545 - max-width: 14.28571428%;
546 - }
547 -
548 - .sp-pcp-row .sp-pcp-col-xs-8 {
549 - max-width: 12.5%;
550 - }
551 -
552 - .pcp-post-pagination.pcp-on-mobile:not(.pcp-hide) {
553 - display: block;
554 - }
555 -
556 - .pcp-post-pagination:not(.pcp-on-mobile) {
557 - display: none;
558 - }
533 + .sp-pcp-row .sp-pcp-col-xs-1 {
534 + flex: 0 0 100%;
535 + max-width: 100%;
536 + }
537 + .sp-pcp-row .sp-pcp-col-xs-2 {
538 + flex: 0 0 50%;
539 + max-width: 50%;
540 + }
541 + .sp-pcp-row .sp-pcp-col-xs-3 {
542 + flex: 0 0 33.22222222%;
543 + max-width: 33.22222222%;
544 + }
545 + .sp-pcp-row .sp-pcp-col-xs-4 {
546 + flex: 0 0 25%;
547 + max-width: 25%;
548 + }
549 + .sp-pcp-row .sp-pcp-col-xs-5 {
550 + flex: 0 0 20%;
551 + max-width: 20%;
552 + }
553 + .sp-pcp-row .sp-pcp-col-xs-6 {
554 + flex: 0 0 16.66666666666667%;
555 + max-width: 16.66666666666667%;
556 + }
557 + .sp-pcp-row .sp-pcp-col-xs-7 {
558 + flex: 0 0 14.28571428%;
559 + max-width: 14.28571428%;
560 + }
561 + .sp-pcp-row .sp-pcp-col-xs-8 {
562 + flex: 0 0 12.5%;
563 + max-width: 12.5%;
564 + }
565 + .pcp-post-pagination.pcp-on-mobile:not(.pcp-hide) {
566 + display: block;
567 + }
568 + .pcp-post-pagination:not(.pcp-on-mobile) {
569 + display: none;
570 + }
559 571 }
560 572
561 573 /* post pagination */
562 574 .pcp-post-pagination {
563 - margin-top: 20px;
564 - margin-bottom: 30px;
575 + margin-top: 20px;
576 + margin-bottom: 30px;
565 577 }
566 -
567 578 .pcp-post-pagination a,
568 579 .pcp-post-pagination .page-numbers {
569 - background: #fff;
570 - color: #5e5e5e;
571 - border: 2px solid #bbb;
572 - width: 34px;
573 - height: 34px;
574 - line-height: 34px;
575 - font-size: 14px;
576 - text-align: center;
577 - display: inline-block;
578 - font-weight: 700;
579 - margin-right: 4px;
580 - text-decoration: none;
581 - font-weight: 700;
582 - border-radius: 3px;
583 - -webkit-transition: all 0.33s;
584 - transition: all 0.33s;
585 - -webkit-box-sizing: content-box;
586 - box-sizing: content-box;
587 - cursor: pointer;
580 + background: #fff;
581 + color: #5e5e5e;
582 + border: 2px solid #bbb;
583 + width: 34px;
584 + height: 34px;
585 + line-height: 34px;
586 + font-size: 14px;
587 + text-align: center;
588 + display: inline-block;
589 + font-weight: 700;
590 + margin-right: 4px;
591 + text-decoration: none;
592 + font-weight: 700;
593 + border-radius: 3px;
594 + -webkit-transition: all 0.33s;
595 + transition: all 0.33s;
596 + -webkit-box-sizing: content-box;
597 + box-sizing: content-box;
598 + cursor: pointer;
588 599 }
589 -
590 600 .pcp-post-pagination a.pcp_next.active,
591 601 .pcp-post-pagination a.pcp_prev.active {
592 - display: none;
602 + display: none;
593 603 }
594 -
595 604 .pcp-post-pagination .page-numbers.current,
596 605 .pcp-post-pagination a.active {
597 - cursor: auto;
598 - color: #fff;
599 - background: #e1624b;
600 - border-color: #e1624b;
606 + cursor: auto;
607 + color: #fff;
608 + background: #e1624b;
609 + border-color: #e1624b;
601 610 }
602 -
603 611 .pcp-load-more button {
604 - margin-top: 20px;
605 - box-shadow: none;
606 - border: none;
607 - border-radius: 2px;
608 - padding: 10px 18px;
609 - background: #e1624b;
610 - color: #fff;
611 - font-size: 14px;
612 - text-transform: uppercase;
613 - font-weight: 500;
612 + margin-top: 20px;
613 + box-shadow: none;
614 + border: none;
615 + border-radius: 2px;
616 + padding: 10px 18px;
617 + background: #e1624b;
618 + color: #fff;
619 + font-size: 14px;
620 + text-transform: uppercase;
621 + font-weight: 500;
614 622 }
615 -
616 623 .pcp-hide {
617 - display: none;
624 + display: none;
618 625 }
619 -
620 626 .pcp-post-pagination a.pcp-hide,
621 627 .pcp-post-pagination .page-numbers.pcp-hide {
622 - display: none;
628 + display: none;
623 629 }
624 -
625 630 .pcp-infinite-scroll-loader svg {
626 - stroke: #e1624b;
631 + stroke: #e1624b;
627 632 }
628 633
629 -.pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-initialized, .swiper-container-initialized) .swiper-wrapper {
630 - display: flex;
631 - width: unset;
632 -}
633 634
634 -@media screen and (min-width: 992px) {
635 - .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-initialized, .swiper-container-initialized) .swiper-wrapper {
636 - margin-left: -20px;
637 - }
638 -
639 - .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-initialized, .swiper-container-initialized) .swiper-wrapper>.swiper-slide {
640 - width: 25%;
641 - min-width: 25%;
642 - padding-left: 20px;
643 - }
644 -}
645 -
646 635 /**
647 636 * Ajax Preloader.
648 637 */
649 638 .pcp-ajax-preloader {
650 - text-align: center;
639 + text-align: center;
651 640 }
652 -
653 641 /* Preloader */
654 642 .pcp-preloader {
655 - background-color: #fff;
656 - background-image: url(../img/preloader.svg);
657 - background-repeat: no-repeat;
658 - background-position: center center;
659 - position: absolute;
660 - z-index: 9999;
661 - width: 100%;
662 - height: 100%;
663 - visibility: visible;
664 -}
665 -
666 -.block-editor-page a.sp_sps_block_edit_button,
667 -a.sp_sps_block_edit_button {
668 - display: inline-block;
669 - text-decoration: underline;
670 - font-size: 16px;
671 - margin: 10px 0;
672 -}
673 -
674 -/* Fix the issue of not showing carousel with Elementor Pro v3.14.1 */
675 -.elementor-default .sp-pcp-section .swiper-container:not(.swiper-container-initialized) .swiper-wrapper,
676 -.elementor-default .sp-pcp-section .swiper:not(.swiper-initialized) .swiper-wrapper {
677 - overflow: initial;
678 -}
679 -
680 -/* Slider layout */
681 -.sp-slider_layout .sp-pcp-post.sp-overlay {
682 - position: relative;
683 - overflow: hidden;
684 -}
685 -
686 -.sp-slider_layout .sp-pcp-post .sp-pcp-post-thumb-area {
687 - position: relative;
688 - text-align: center;
689 -}
690 -
691 -.sp-slider_layout .sp-pcp-post .pcp-post-thumb-wrapper {
692 - margin: 0px;
693 -}
694 -
695 -.sp-slider_layout .sp-pcp-post .pcp-post-thumb-wrapper {
696 - overflow: hidden;
697 - display: block;
698 -}
699 -
700 -.sp-slider_layout .sp-pcp-post .sp-pcp-post-details {
701 - display: flex;
702 - -webkit-box-align: center;
703 - -webkit-align-items: center;
704 - -ms-flex-align: center;
705 - align-items: center;
706 -}
707 -
708 -.sp-slider_layout .sp-pcp-post .sp-pcp-post-details {
709 - background: rgba(0, 0, 0, 0.5);
710 -}
711 -
712 -.sp-slider_layout .sp-pcp-post-details-content {
713 - width: 100%;
714 - text-align: center;
715 - padding: 0 15px
716 -}
717 -
718 -.sp-slider_layout .sp-pcp-post .sp-pcp-post-details-content .sp-pcp-post-meta {
719 - text-align: center;
720 -}
721 -
722 -.sp-slider_layout .sp-pcp-post .sp-pcp-post-details {
723 - position: absolute;
724 - /* height: 100%;
725 - width: 100%; */
726 - bottom: 0;
727 - left: 0;
728 - top: 0;
729 - right: 0;
730 -}
731 -
732 -.sps-list-layout .sp-pcp-post.left-thumb {
733 - -ms-flex-align: start;
734 - -webkit-box-align: start;
735 - align-items: flex-start;
736 - flex-direction: unset;
737 - gap: 20px;
738 -}
739 -
740 -.sps-list-layout .sp-pcp-post.left-thumb .sp-pcp-post-details {
741 - max-width: calc(60% - 20px);
742 -}
743 -
744 -.sps-list-layout .sp-pcp-post.left-thumb .pcp-post-thumb-wrapper {
745 - order: unset;
746 - /* flex: 0 0 40%; */
747 - margin: 0;
748 - max-width: 40%;
749 - flex-shrink: 0;
750 -}
751 -
752 -/* Left Thumb right content */
753 -.sp-pcp-post.left-thumb {
754 - display: -ms-flexbox;
755 - display: -webkit-box;
756 - display: flex;
757 - -ms-flex-align: start;
758 - -webkit-box-align: start;
759 - align-items: flex-start;
760 - flex-direction: unset;
761 -}
762 -
763 -.sp-pcp-post.left-thumb .sp-pcp-post-details {
764 - margin-left: 20px;
765 -}
766 -
767 -.thumbnails_slider .sp-pcp-post.left-thumb .sp-pcp-post-details {
768 - margin-left: 1px;
769 -}
770 -
771 -.sp-pcp-post.left-thumb .pcp-post-thumb-wrapper {
772 - order: unset;
773 - margin: 0;
774 - max-width: 40%;
775 -}
776 -
777 -/* Right Thumb left content */
778 -.sp-pcp-post.right-thumb {
779 - display: -ms-flexbox;
780 - display: -webkit-box;
781 - display: flex;
782 - -ms-flex-align: start;
783 - -webkit-box-align: start;
784 - align-items: flex-start;
785 - flex-direction: row-reverse;
786 - /* width: 100%; */
787 -}
788 -
789 -.sp-pcp-post.right-thumb .pcp-post-thumb-wrapper {
790 - order: unset;
791 - flex: 0 0 40%;
792 - margin: 0;
793 -}
794 -
795 -.sp-pcp-post.right-thumb .sp-pcp-post-details {
796 - text-align: right;
797 - margin-right: 20px;
643 + background-color: #fff;
644 + background-image: url(../img/preloader.svg);
645 + background-repeat: no-repeat;
646 + background-position: center center;
647 + position: absolute;
648 + z-index: 9999;
649 + width: 100%;
650 + height: 100%;
651 + visibility: visible;
798 652 }