254. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2023-03-13 03:01:08 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

254.1 Files compared

#LocationFileLast Modified
1Porto v4.0.4/Porto Theme/app/design/frontend/Smartwave/porto/Smartwave_Porto/web/css/source_module.less2022-11-02 08:56:55 +0000
2Porto v4.0.5/Porto Theme/app/design/frontend/Smartwave/porto/Smartwave_Porto/web/css/source_module.less2023-03-10 04:19:08 +0000

254.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged13026
Changed00
Inserted1182
Removed00

254.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

254.4 Active regular expressions

No regular expressions were active.

254.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5 & when (@media-common = true) { 5 & when (@media-common = true) {
6     .theme-color { 6     .theme-color {
7         color: @theme-color !important; 7         color: @theme-color !important;
8     } 8     }
9     .block { 9     .block {
10         .block-title { 10         .block-title {
11             margin: 5px 0 10px; 11             margin: 5px 0 10px;
12             line-height: 1.2; 12             line-height: 1.2;
13             font-size: 16px; 13             font-size: 16px;
14         } 14         }
15     } 15     }
16     .porto-separator { 16     .porto-separator {
17       margin: 0 0 22px; 17       margin: 0 0 22px;
18       &.short { 18       &.short {
19           margin: -11px 0 11px; 19           margin: -11px 0 11px;
20       } 20       }
21       &.tall { 21       &.tall {
22           margin: 22px 0 44px; 22           margin: 22px 0 44px;
23       } 23       }
24       &.taller { 24       &.taller {
25         margin: 44px 0 66px; 25         margin: 44px 0 66px;
26       } 26       }
27       .separator-line { 27       .separator-line {
28         margin: 0 auto; 28         margin: 0 auto;
29         &.align_left { 29         &.align_left {
30             margin: 0 auto 0 0; 30             margin: 0 auto 0 0;
31         } 31         }
32         &.align_center { 32         &.align_center {
33             margin: 0 auto; 33             margin: 0 auto;
34         } 34         }
35         &.align_right { 35         &.align_right {
36             margin: 0 0 0 auto; 36             margin: 0 0 0 auto;
37         } 37         }
38       } 38       }
39     } 39     }
40     .porto-ibanner { 40     .porto-ibanner {
41         z-index: 1; 41         z-index: 1;
42         overflow: hidden; 42         overflow: hidden;
43         margin: 0 0 35px; 43         margin: 0 0 35px;
44         text-align: center; 44         text-align: center;
45         &,>img { 45         &,>img {
46             display: block; 46             display: block;
47             position: relative; 47             position: relative;
48         } 48         }
49         >img { 49         >img {
50             width: 100%; 50             width: 100%;
51             transition: opacity 0.35s; 51             transition: opacity 0.35s;
52             border: none; 52             border: none;
53             padding: 0; 53             padding: 0;
54             margin: 0; 54             margin: 0;
55             min-height: inherit; 55             min-height: inherit;
56             object-fit: cover; 56             object-fit: cover;
57             transition: transform 0.5s,opacity 0.5s; 57             transition: transform 0.5s,opacity 0.5s;
58             -webkit-backface-visibility: hidden; 58             -webkit-backface-visibility: hidden;
59             &.porto-lazyload:not(.lazy-load-loaded) { 59             &.porto-lazyload:not(.lazy-load-loaded) {
60                 visibility: hidden; 60                 visibility: hidden;
61             } 61             }
62         } 62         }
63         &-layer { 63         &-layer {
64             text-align: left; 64             text-align: left;
65             font-size: 1rem; 65             font-size: 1rem;
66         } 66         }
67         .porto-ibanner-desc { 67         .porto-ibanner-desc {
68             padding: 15px; 68             padding: 15px;
69             color: #fff; 69             color: #fff;
70             font-size: 1em; 70             font-size: 1em;
71             -webkit-backface-visibility: hidden; 71             -webkit-backface-visibility: hidden;
72             backface-visibility: hidden; 72             backface-visibility: hidden;
73             transition: opacity 0.3s; 73             transition: opacity 0.3s;
74             &.no-padding { 74             &.no-padding {
75                 padding: 0; 75                 padding: 0;
76             } 76             }
77             .porto-ibanner-container { 77             .porto-ibanner-container {
78                 position: relative; 78                 position: relative;
79                 height: 100%; 79                 height: 100%;
80             } 80             }
81             &:before,&:after { 81             &:before,&:after {
82                 pointer-events: none; 82                 pointer-events: none;
83             } 83             }
84         } 84         }
85         .porto-ibanner-desc,.porto-ibanner-link { 85         .porto-ibanner-desc,.porto-ibanner-link {
86             position: absolute; 86             position: absolute;
87             top: 0; 87             top: 0;
88             left: 0; 88             left: 0;
89             width: 100%; 89             width: 100%;
90             height: 100% 90             height: 100%
91         } 91         }
92         .porto-ibanner-content { 92         .porto-ibanner-content {
93             font-size: .8125em; 93             font-size: .8125em;
94             line-height: 1.6; 94             line-height: 1.6;
95         } 95         }
96         .porto-ibanner-title,p { 96         .porto-ibanner-title,p {
97             letter-spacing: normal; 97             letter-spacing: normal;
98             padding: 0; 98             padding: 0;
99             margin: 0; 99             margin: 0;
100             font-size: inherit; 100             font-size: inherit;
101             line-height: inherit; 101             line-height: inherit;
102             font-weight: inherit; 102             font-weight: inherit;
103             text-decoration: inherit; 103             text-decoration: inherit;
104             font-style: inherit; 104             font-style: inherit;
105             color: inherit; 105             color: inherit;
106         } 106         }
107         a.porto-ibanner-link { 107         a.porto-ibanner-link {
108             display: block; 108             display: block;
109             z-index: 7; 109             z-index: 7;
110             opacity: 0; 110             opacity: 0;
111             background: 0 0; 111             background: 0 0;
112         } 112         }
113     } 113     }
114     ul.products { 114     ul.products {
115       .product-col { 115       .product-col {
116         padding-left: 10px; 116         padding-left: 10px;
117         padding-right: 10px; 117         padding-right: 10px;
118       } 118       }
119       li.product-category { 119       li.product-category {
120           text-align: center; 120           text-align: center;
121           a { 121           a {
122               text-decoration: none; 122               text-decoration: none;
123           } 123           }
124           .thumb-info { 124           .thumb-info {
125               min-height: 90px; 125               min-height: 90px;
126               margin-bottom: 0; 126               margin-bottom: 0;
127               text-align: left; 127               text-align: left;
128               h3 { 128               h3 {
129                   font-weight: 700; 129                   font-weight: 700;
130                   margin: 0 0 10px; 130                   margin: 0 0 10px;
131                   color: inherit; 131                   color: inherit;
132                   letter-spacing: -.005em; 132                   letter-spacing: -.005em;
133               } 133               }
134           } 134           }
135           .thumb-info-title { 135           .thumb-info-title {
136               background: none; 136               background: none;
137               max-width: none; 137               max-width: none;
138               width: 100%; 138               width: 100%;
139               bottom: 0; 139               bottom: 0;
140               padding: 1.2em 1.5em; 140               padding: 1.2em 1.5em;
141               margin: 0; 141               margin: 0;
142           } 142           }
143           .thumb-info-type { 143           .thumb-info-type {
144               display: block; 144               display: block;
145               margin: -10px 0 0; 145               margin: -10px 0 0;
146               padding: 0; 146               padding: 0;
147               font-weight: 400; 147               font-weight: 400;
148               background: none; 148               background: none;
149               float: none; 149               float: none;
150               opacity: .7; 150               opacity: .7;
151               line-height: 1.8; 151               line-height: 1.8;
152           } 152           }
153  153 
154           mark { 154           mark {
155               padding: 0; 155               padding: 0;
156               background: none; 156               background: none;
157               color: inherit; 157               color: inherit;
158           } 158           }
159           .thumb-info-wrapper:after { 159           .thumb-info-wrapper:after {
160               background: rgba(27, 27, 23, .15); 160               background: rgba(27, 27, 23, .15);
161               z-index: 1; 161               z-index: 1;
162               opacity: 1; 162               opacity: 1;
163           } 163           }
164           &:hover .thumb-info-wrapper:after { 164           &:hover .thumb-info-wrapper:after {
165               background: rgba(27, 27, 23, .3); 165               background: rgba(27, 27, 23, .3);
166           } 166           }
167       } 167       }
168       li.cat-has-icon { 168       li.cat-has-icon {
169           .thumb-info { 169           .thumb-info {
170               padding: 40px 0 25px; 170               padding: 40px 0 25px;
171               transition: box-shadow .2s; 171               transition: box-shadow .2s;
172               text-align: center; 172               text-align: center;
173               > i { 173               > i {
174                   font-size: 3em; 174                   font-size: 3em;
175                   display: inline-block; 175                   display: inline-block;
176                   margin-bottom: 15px; 176                   margin-bottom: 15px;
177               } 177               }
178           } 178           }
179           .thumb-info-wrap { 179           .thumb-info-wrap {
180               display: block; 180               display: block;
181           } 181           }
182           .thumb-info-title { 182           .thumb-info-title {
183               display: block; 183               display: block;
184               position: static; 184               position: static;
185               padding: 0 0 10px; 185               padding: 0 0 10px;
186           } 186           }
187       } 187       }
188       &.category-pos-middle li.product-category .thumb-info-title { 188       &.category-pos-middle li.product-category .thumb-info-title {
189           position: absolute; 189           position: absolute;
190           bottom: auto; 190           bottom: auto;
191           top: 50%; 191           top: 50%;
192           transform: translateY(-50%); 192           transform: translateY(-50%);
193       } 193       }
194       &.category-pos-outside li.product-category .thumb-info-title { 194       &.category-pos-outside li.product-category .thumb-info-title {
195           position: static; 195           position: static;
196           transform: none; 196           transform: none;
197           display: block; 197           display: block;
198           padding-left: 0; 198           padding-left: 0;
199           padding-right: 0; 199           padding-right: 0;
200       } 200       }
201       &.category-text-center .thumb-info-title { 201       &.category-text-center .thumb-info-title {
202           text-align: center; 202           text-align: center;
203       } 203       }
204       &.category-text-right .thumb-info-title { 204       &.category-text-right .thumb-info-title {
205             text-align: right; 205             text-align: right;
206         } 206         }
207     } 207     }
208     li.product-category { 208     li.product-category {
209       .thumb-info-title a { 209       .thumb-info-title a {
210         color: inherit 210         color: inherit
211       } 211       }
212       .thumb-info-title a:hover { 212       .thumb-info-title a:hover {
213         color: inherit; 213         color: inherit;
214         text-decoration: underline; 214         text-decoration: underline;
215       } 215       }
216       .sub-categories { 216       .sub-categories {
217         font-size: .875rem; 217         font-size: .875rem;
218         font-weight: 400; 218         font-weight: 400;
219         opacity: .7 219         opacity: .7
220       } 220       }
221     } 221     }
222     ul.category-color-dark li.product-category .thumb-info-title { 222     ul.category-color-dark li.product-category .thumb-info-title {
223       color: #1d2127; 223       color: #1d2127;
224     } 224     }
225     .grid-creative { 225     .grid-creative {
226         &.category-pos-outside { 226         &.category-pos-outside {
227             li.product-category .thumb-info { 227             li.product-category .thumb-info {
228                 height: calc(~"100% - (60px)");; 228                 height: calc(~"100% - (60px)");;
229             } 229             }
230         } 230         }
231     } 231     }
232     .porto-products.show-count-on-hover li.product-category .thumb-info-type { 232     .porto-products.show-count-on-hover li.product-category .thumb-info-type {
233         max-height: 10px; 233         max-height: 10px;
234         transition: .5s; 234         transition: .5s;
235         transform: translateY(20%); 235         transform: translateY(20%);
236         opacity: 0; 236         opacity: 0;
237     } 237     }
238     .porto-products.show-count-on-hover li.product-category:hover .thumb-info-type { 238     .porto-products.show-count-on-hover li.product-category:hover .thumb-info-type {
239         max-height: 30px; 239         max-height: 30px;
240         transform: translateY(0); 240         transform: translateY(0);
241         opacity: .7; 241         opacity: .7;
242     } 242     }
243     .porto-products.hide-count { 243     .porto-products.hide-count {
244         li.product-category { 244         li.product-category {
245             .thumb-info-type { 245             .thumb-info-type {
246                 display: none; 246                 display: none;
247             } 247             }
248             .thumb-info h3 { 248             .thumb-info h3 {
249                 margin-bottom: 0; 249                 margin-bottom: 0;
250             } 250             }
251         } 251         }
252     } 252     }
253     .thumb-info { 253     .thumb-info {
254       display: block; 254       display: block;
255       position: relative; 255       position: relative;
256       text-decoration: none; 256       text-decoration: none;
257       max-width: 100%; 257       max-width: 100%;
258       -webkit-backface-visibility: hidden; 258       -webkit-backface-visibility: hidden;
259       backface-visibility: hidden; 259       backface-visibility: hidden;
260       -webkit-transform: translate3d(0,0,0); 260       -webkit-transform: translate3d(0,0,0);
261       transform: translate3d(0,0,0); 261       transform: translate3d(0,0,0);
262       .thumb-info-wrapper { 262       .thumb-info-wrapper {
263         -webkit-backface-visibility: hidden; 263         -webkit-backface-visibility: hidden;
264         backface-visibility: hidden; 264         backface-visibility: hidden;
265         -webkit-transform: translate3d(0,0,0); 265         -webkit-transform: translate3d(0,0,0);
266         transform: translate3d(0,0,0); 266         transform: translate3d(0,0,0);
267         margin: 0; 267         margin: 0;
268         overflow: hidden; 268         overflow: hidden;
269         display: block; 269         display: block;
270         position: relative; 270         position: relative;
271         &:after { 271         &:after {
272           content: ""; 272           content: "";
273           transition: all 0.3s; 273           transition: all 0.3s;
274           bottom: 0; 274           bottom: 0;
275           color: #FFF; 275           color: #FFF;
276           left: 0; 276           left: 0;
277           position: absolute; 277           position: absolute;
278           right: 0; 278           right: 0;
279           top: 0; 279           top: 0;
280           display: block; 280           display: block;
281           opacity: 0; 281           opacity: 0;
282           z-index: 1 282           z-index: 1
283         } 283         }
284       } 284       }
285       .thumb-info-title { 285       .thumb-info-title {
286         transition: all 0.3s; 286         transition: all 0.3s;
287         background: rgba(33,37,41,.8); 287         background: rgba(33,37,41,.8);
288         bottom: 13%; 288         bottom: 13%;
289         color: #fff; 289         color: #fff;
290         font-size: 17px; 290         font-size: 17px;
291         font-weight: 600; 291         font-weight: 600;
292         left: 0; 292         left: 0;
293         letter-spacing: -.05em; 293         letter-spacing: -.05em;
294         padding: 13px 21px 2px; 294         padding: 13px 21px 2px;
295         position: absolute; 295         position: absolute;
296         z-index: 2; 296         z-index: 2;
297         max-width: 90%; 297         max-width: 90%;
298       } 298       }
299       .thumb-info-inner { 299       .thumb-info-inner {
300         transition: all 0.3s; 300         transition: all 0.3s;
301         display: block; 301         display: block;
302         font: inherit; 302         font: inherit;
303         color: inherit; 303         color: inherit;
304         margin-bottom: 0; 304         margin-bottom: 0;
305       } 305       }
306       .thumb-info-type { 306       .thumb-info-type {
307         display: inline-block; 307         display: inline-block;
308         float: left; 308         float: left;
309         font-size: .6em; 309         font-size: .6em;
310         font-weight: 600; 310         font-weight: 600;
311         letter-spacing: 0; 311         letter-spacing: 0;
312         margin: 8px -2px -15px 0; 312         margin: 8px -2px -15px 0;
313         padding: 2px 12px; 313         padding: 2px 12px;
314         text-transform: uppercase; 314         text-transform: uppercase;
315         z-index: 2; 315         z-index: 2;
316         line-height: 2.3; 316         line-height: 2.3;
317       } 317       }
318       img { 318       img {
319         transition: all 0.3s ease; 319         transition: all 0.3s ease;
320         position: relative; 320         position: relative;
321         width: 100%; 321         width: 100%;
322       } 322       }
323     } 323     }
324     .single-subscribe { 324     .single-subscribe {
325       .newsletter { 325       .newsletter {
326         .control { 326         .control {
327           display: flex; 327           display: flex;
328           align-items: center; 328           align-items: center;
329         } 329         }
330         .input-text {display: block;flex:1;} 330         .input-text {display: block;flex:1;}
331         input { 331         input {
332           height: 3rem; 332           height: 3rem;
333           padding-left: 20px; 333           padding-left: 20px;
334           padding-right: 25px; 334           padding-right: 25px;
335           border-radius: 30px 0 0 30px; 335           border-radius: 30px 0 0 30px;
336           font-size: .75rem; 336           font-size: .75rem;
337           color: #777; 337           color: #777;
338           border: none; 338           border: none;
339           margin: 0; 339           margin: 0;
340           width: 100%; 340           width: 100%;
341           display: block; 341           display: block;
342         } 342         }
343         .action { 343         .action {
344           height: 3rem; 344           height: 3rem;
345           padding-left: 20px; 345           padding-left: 20px;
346           padding-right: 20px; 346           padding-right: 20px;
347           text-transform: uppercase; 347           text-transform: uppercase;
348           font-weight: 700; 348           font-weight: 700;
349           border-radius: 0 30px 30px 0; 349           border-radius: 0 30px 30px 0;
350         } 350         }
351       } 351       }
352     } 352     }
353     .porto-links-block { 353     .porto-links-block {
354       border: 1px solid; 354       border: 1px solid;
355       .links-title { 355       .links-title {
356         border-bottom: 1px solid;font-size: 1em;font-weight: 700;line-height: 14px;padding: 15px 20px;margin: 0;text-transform: uppercase;position: relative;letter-spacing: .12px;transition: 0.25s; 356         border-bottom: 1px solid;font-size: 1em;font-weight: 700;line-height: 14px;padding: 15px 20px;margin: 0;text-transform: uppercase;position: relative;letter-spacing: .12px;transition: 0.25s;
357         i {margin-right: 5px;} 357         i {margin-right: 5px;}
358       } 358       }
359       .links-content ul {list-style: none;padding: 5px 0;margin: 0;} 359       .links-content ul {list-style: none;padding: 5px 0;margin: 0;}
360       li.porto-links-item { 360       li.porto-links-item {
361         display: block;margin: 0; 361         display: block;margin: 0;
362         &:first-child>a,&:first-child>span {border-top-width: 0;} 362         &:first-child>a,&:first-child>span {border-top-width: 0;}
363         a,span {display: block;font-size: 1em;line-height: 20px;color: #465157;letter-spacing: .1px;padding: 11px 6px 10px;margin: 0 10px -1px;text-decoration: none;border-top: 1px solid #ddd;} 363         a,span {display: block;font-size: 1em;line-height: 20px;color: #465157;letter-spacing: .1px;padding: 11px 6px 10px;margin: 0 10px -1px;text-decoration: none;border-top: 1px solid #ddd;}
364         a:hover {text-decoration: underline;} 364         a:hover {text-decoration: underline;}
365         i {margin-right: 12px;font-size: 20px;float: left;} 365         i {margin-right: 12px;font-size: 20px;float: left;}
366         i.icon-image {display: inline-block;vertical-align: middle;float: none;max-width: 20px;} 366         i.icon-image {display: inline-block;vertical-align: middle;float: none;max-width: 20px;}
367       } 367       }
368     } 368     }
369     .divider { 369     .divider {
370       height: 1px; 370       height: 1px;
371       &.divider-small { 371       &.divider-small {
372         margin: 22px auto;background: transparent; 372         margin: 22px auto;background: transparent;
373         &.divider-small-center { 373         &.divider-small-center {
374           text-align: center; 374           text-align: center;
375           hr {margin-left: auto;margin-right: auto;} 375           hr {margin-left: auto;margin-right: auto;}
376         } 376         }
377         hr {width: 50px;height: 1px;} 377         hr {width: 50px;height: 1px;}
378       } 378       }
379     } 379     }
380     .category-sidebar{ 380     .category-sidebar{
381       padding: .7143em 0; 381       padding: .7143em 0;
382       list-style:none; 382       list-style:none;
383       margin:0; 383       margin:0;
384       font-size: .9286em; 384       font-size: .9286em;
385       li { 385       li {
386         position:relative; 386         position:relative;
387         margin:0; 387         margin:0;
388         color: #777; 388         color: #777;
389         > a:not(.expand-icon){ 389         > a:not(.expand-icon){
390           display: block; 390           display: block;
391           font-size: .875rem; 391           font-size: .875rem;
392           font-weight: 600; 392           font-weight: 600;
393           padding-top: .625rem; 393           padding-top: .625rem;
394           padding-bottom: .625rem; 394           padding-bottom: .625rem;
395           border-bottom: 1px solid #e7e7e7; 395           border-bottom: 1px solid #e7e7e7;
396           color: inherit; 396           color: inherit;
397         } 397         }
398         >.expand-icon{ 398         >.expand-icon{
399           position: absolute; 399           position: absolute;
400           right: -6px; 400           right: -6px;
401           top: 9px; 401           top: 9px;
402           font-size: 18px; 402           font-size: 18px;
403           line-height: 24px; 403           line-height: 24px;
404           color: inherit; 404           color: inherit;
405           width: 24px; 405           width: 24px;
406           height: 24px; 406           height: 24px;
407           em.porto-icon-plus-squared::before {content:"\f807";} 407           em.porto-icon-plus-squared::before {content:"\f807";}
408           em.porto-icon-minus-squared::before {content:"\f804";} 408           em.porto-icon-minus-squared::before {content:"\f804";}
409         } 409         }
410       } 410       }
411       > li { 411       > li {
412         &:last-child { 412         &:last-child {
413           > a:not(.expand-icon){ 413           > a:not(.expand-icon){
414             border-bottom: 0; 414             border-bottom: 0;
415           } 415           }
416         } 416         }
417       } 417       }
418       ul{display:none;list-style:none;padding-left: 1.0714em;margin:0} 418       ul{display:none;list-style:none;padding-left: 1.0714em;margin:0}
419     } 419     }
420     .onepage-category{ 420     .onepage-category{
421       >.category-list{ 421       >.category-list{
422         position:fixed; 422         position:fixed;
423         left:0; 423         left:0;
424         top:0; 424         top:0;
425         bottom: 0; 425         bottom: 0;
426         min-height:100%; 426         min-height:100%;
427         width:80px; 427         width:80px;
428         text-align:left; 428         text-align:left;
429         background:#222529; 429         background:#222529;
430         padding:32px 0 0; 430         padding:32px 0 0;
431         z-index:20; 431         z-index:20;
432         >ul{ 432         >ul{
433           position:relative; 433           position:relative;
434           z-index:2; 434           z-index:2;
435           list-style:none; 435           list-style:none;
436           padding:0; 436           padding:0;
437           transition:all .3s; 437           transition:all .3s;
438           padding-top:0; 438           padding-top:0;
439           margin-bottom:0; 439           margin-bottom:0;
440           >li{ 440           >li{
441             margin: 0; 441             margin: 0;
442             margin-bottom: 1rem; 442             margin-bottom: 1rem;
443             >a{ 443             >a{
444               color:#fff; 444               color:#fff;
445               width:auto; 445               width:auto;
446               line-height:79px; 446               line-height:79px;
447               display:inline-block; 447               display:inline-block;
448               white-space:nowrap; 448               white-space:nowrap;
449               position:relative; 449               position:relative;
450               transition:all .3s; 450               transition:all .3s;
451               >em{ 451               >em{
452                 font-size:1.6875rem; 452                 font-size:1.6875rem;
453                 width:80px; 453                 width:80px;
454                 display:inline-block; 454                 display:inline-block;
455                 text-align:center; 455                 text-align:center;
456                 vertical-align:middle; 456                 vertical-align:middle;
457                 >img{ 457                 >img{
458                   vertical-align:middle; 458                   vertical-align:middle;
459                 } 459                 }
460               } 460               }
461               >span{ 461               >span{
462                 display:inline-block; 462                 display:inline-block;
463                 vertical-align:middle; 463                 vertical-align:middle;
464                 opacity:0; 464                 opacity:0;
465                 visibility:hidden; 465                 visibility:hidden;
466                 width:0; 466                 width:0;
467                 transition:all .3s; 467                 transition:all .3s;
468                 font-size:16px; 468                 font-size:16px;
469                 font-weight:600; 469                 font-weight:600;
470                 position:relative; 470                 position:relative;
471                 overflow:hidden; 471                 overflow:hidden;
472               } 472               }
473               &:after{ 473               &:after{
474                 content:""; 474                 content:"";
475                 width:16px; 475                 width:16px;
476                 height:16px; 476                 height:16px;
477                 position:absolute; 477                 position:absolute;
478                 display:block; 478                 display:block;
479                 right:-15px; 479                 right:-15px;
480                 top:50%; 480                 top:50%;
481                 margin-top:-8px; 481                 margin-top:-8px;
482                 border:8px solid transparent; 482                 border:8px solid transparent;
483                 transition:all .3s; 483                 transition:all .3s;
484               } 484               }
485               &.active,&:hover{ 485               &.active,&:hover{
486                 background-color:#00d59d; 486                 background-color:#00d59d;
487                 &:after{ 487                 &:after{
488                   border-left-color:#00d59d; 488                   border-left-color:#00d59d;
489                 } 489                 }
490               } 490               }
491               &:hover { 491               &:hover {
492                 >span{ 492                 >span{
493                   opacity:1; 493                   opacity:1;
494                   visibility:visible; 494                   visibility:visible;
495                   width:auto; 495                   width:auto;
496                   padding-right:50px; 496                   padding-right:50px;
497                 } 497                 }
498               } 498               }
499             } 499             }
500             &:last-child{margin-bottom:0;} 500             &:last-child{margin-bottom:0;}
501           } 501           }
502         } 502         }
503       } 503       }
504       >.category-details{ 504       >.category-details{
505         position:relative; 505         position:relative;
506         float:right; 506         float:right;
507         width:100%; 507         width:100%;
508         min-height:80vh; 508         min-height:80vh;
509       } 509       }
510       .category-details{ 510       .category-details{
511         padding: 70px 0; 511         padding: 70px 0;
512         .title-menu{ 512         .title-menu{
513           position:relative; 513           position:relative;
514           margin-bottom: 25px; 514           margin-bottom: 25px;
515           >a{ 515           >a{
516             font-family: 'Poppins'; 516             font-family: 'Poppins';
517             color: #222529; 517             color: #222529;
518             display: inline-block; 518             display: inline-block;
519             margin-top: 0; 519             margin-top: 0;
520             font-size: 1.375rem; 520             font-size: 1.375rem;
521             font-weight: 600; 521             font-weight: 600;
522             letter-spacing: .025em; 522             letter-spacing: .025em;
523             line-height: 46px; 523             line-height: 46px;
524             text-transform: uppercase; 524             text-transform: uppercase;
525             >span{ 525             >span{
526               display:inline-block; 526               display:inline-block;
527               vertical-align:middle; 527               vertical-align:middle;
528             } 528             }
529             &.parent{ 529             &.parent{
530               &:after{ 530               &:after{
531                 display:inline-block; 531                 display:inline-block;
532                 content:"\f813"; 532                 content:"\f813";
533                 font-family:porto-icons; 533                 font-family:porto-icons;
534                 margin-left:18px; 534                 margin-left:18px;
535                 font-size:18px; 535                 font-size:18px;
536                 vertical-align:middle; 536                 vertical-align:middle;
537                 line-height:36px; 537                 line-height:36px;
538               } 538               }
539               &.opened:after{content:"\f810";} 539               &.opened:after{content:"\f810";}
540             } 540             }
541           } 541           }
542           >.menu-popup{ 542           >.menu-popup{
543             position:absolute; 543             position:absolute;
544             left: 0; 544             left: 0;
545             top:100%; 545             top:100%;
546             display:none; 546             display:none;
547             width:100%; 547             width:100%;
548             z-index:3; 548             z-index:3;
549             background-color:#fff; 549             background-color:#fff;
550             border:1px solid #bebebe; 550             border:1px solid #bebebe;
551             border-radius:5px; 551             border-radius:5px;
552             padding:50px 0; 552             padding:50px 0;
553             &:before{ 553             &:before{
554               content:""; 554               content:"";
555               border:8px solid transparent; 555               border:8px solid transparent;
556               width:16px; 556               width:16px;
557               height:16px; 557               height:16px;
558               display:block; 558               display:block;
559               border-bottom-color:#bebebe; 559               border-bottom-color:#bebebe;
560               position:absolute;top:-16px; 560               position:absolute;top:-16px;
561               left:90px; 561               left:90px;
562             } 562             }
563             &:after{ 563             &:after{
564               content:""; 564               content:"";
565               border:7px solid transparent; 565               border:7px solid transparent;
566               width:14px; 566               width:14px;
567               height:14px; 567               height:14px;
568               display:block; 568               display:block;
569               border-bottom-color:#fff; 569               border-bottom-color:#fff;
570               position:absolute; 570               position:absolute;
571               top:-13px; 571               top:-13px;
572               left:91px; 572               left:91px;
573             } 573             }
574           } 574           }
575         } 575         }
576         .menu-popup { 576         .menu-popup {
577           ul{ 577           ul{
578             list-style:none; 578             list-style:none;
579             padding:0; 579             padding:0;
580             margin:0; 580             margin:0;
581             >li> a{ 581             >li> a{
582               color:#000; 582               color:#000;
583               font-size:16px; 583               font-size:16px;
584               line-height:2.5; 584               line-height:2.5;
585             } 585             }
586           } 586           }
587           >ul{ 587           >ul{
588             display:flex; 588             display:flex;
589             flex-wrap:wrap; 589             flex-wrap:wrap;
590             >li{ 590             >li{
591               float:left; 591               float:left;
592               border-left:1px solid #bebebe; 592               border-left:1px solid #bebebe;
593               margin:10px 0; 593               margin:10px 0;
594               padding:30px 0; 594               padding:30px 0;
595               > a{ 595               > a{
596                 font-weight:700; 596                 font-weight:700;
597                 text-transform:uppercase; 597                 text-transform:uppercase;
598               } 598               }
599             } 599             }
600             &.columns5>li{ 600             &.columns5>li{
601               width:20%; 601               width:20%;
602               padding-left:4%; 602               padding-left:4%;
603               padding-right:4%; 603               padding-right:4%;
604               &:nth-child(5n+1){ 604               &:nth-child(5n+1){
605                 border-left:0; 605                 border-left:0;
606                 clear:left; 606                 clear:left;
607               } 607               }
608             } 608             }
609           } 609           }
610           li.menu-item{margin-bottom:0;} 610           li.menu-item{margin-bottom:0;}
611         } 611         }
612         .products-area{ 612         .products-area{
613           .category-link{ 613           .category-link{
614             float:right; 614             float:right;
615             margin-top:-71px; 615             margin-top:-71px;
616             margin-right:0; 616             margin-right:0;
617             position:relative; 617             position:relative;
618             z-index:2; 618             z-index:2;
619             font-size: .8125rem; 619             font-size: .8125rem;
620             padding: 1em 3em; 620             padding: 1em 3em;
621             letter-spacing: .01em; 621             letter-spacing: .01em;
622             font-weight: 700; 622             font-weight: 700;
623             line-height: 1.42857; 623             line-height: 1.42857;
624             background: #222529; 624             background: #222529;
625             border: 1px solid transparent; 625             border: 1px solid transparent;
626             color: #fff; 626             color: #fff;
627             text-transform: uppercase; 627             text-transform: uppercase;
628           } 628           }
629         } 629         }
630       } 630       }
631       .additional-content { 631       .additional-content {
632         margin-bottom: 1.5vw; 632         margin-bottom: 1.5vw;
633         img{ 633         img{
634           max-width:100%; 634           max-width:100%;
635         } 635         }
636       } 636       }
637       .menu-popup a>span{ 637       .menu-popup a>span{
638         position:relative; 638         position:relative;
639         >span.cat-label{ 639         >span.cat-label{
640           top:3px; 640           top:3px;
641           right:-35px; 641           right:-35px;
642           font:inherit; 642           font:inherit;
643           font-size:9px; 643           font-size:9px;
644           padding:2px; 644           padding:2px;
645           z-index:1; 645           z-index:1;
646           border-radius:2px; 646           border-radius:2px;
647           line-height:1; 647           line-height:1;
648           border:1px solid #777; 648           border:1px solid #777;
649           position:absolute; 649           position:absolute;
650         } 650         }
651       } 651       }
652       .onepage-category & { 652       .onepage-category & {
653         display:flex; 653         display:flex;
654         flex-wrap:wrap; 654         flex-wrap:wrap;
655       } 655       }
656     } 656     }
657     .onepage-cat.category-list {position: fixed;width: 80px;left: 0;height: 100%;top: 0;bottom: 0;} 657     .onepage-cat.category-list {position: fixed;width: 80px;left: 0;height: 100%;top: 0;bottom: 0;}
658     body>.onepage-cat.category-list { 658     body>.onepage-cat.category-list {
659         display: none; 659         display: none;
660     } 660     }
661     // vc columns 661     // vc columns
662     .pt_row { 662     .pt_row {
663       &.pt_row-no-padding { 663       &.pt_row-no-padding {
664         .pt_column-inner { 664         .pt_column-inner {
665           padding-left: 0; 665           padding-left: 0;
666           padding-right: 0; 666           padding-right: 0;
667         } 667         }
668       } 668       }
669     } 669     }
670  670 
671     .pt_row-no-padding { 671     .pt_row-no-padding {
672       .pt_inner { 672       .pt_inner {
673         margin-left: 0; 673         margin-left: 0;
674         margin-right: 0; 674         margin-right: 0;
675       } 675       }
676     } 676     }
677  677 
678     .pt_row { 678     .pt_row {
679       &.pt_row-o-full-height { 679       &.pt_row-o-full-height {
680         min-height: 100vh; 680         min-height: 100vh;
681       } 681       }
682  682 
683       // enable flex 683       // enable flex
684       &.pt_row-flex { 684       &.pt_row-flex {
685         box-sizing: border-box; 685         box-sizing: border-box;
686         display: -webkit-box; 686         display: -webkit-box;
687         display: -webkit-flex; 687         display: -webkit-flex;
688         display: -ms-flexbox; 688         display: -ms-flexbox;
689         display: flex; 689         display: flex;
690         -webkit-flex-wrap: wrap; 690         -webkit-flex-wrap: wrap;
691         -ms-flex-wrap: wrap; 691         -ms-flex-wrap: wrap;
692         flex-wrap: wrap; 692         flex-wrap: wrap;
693  693 
694         > .pt_column_container { 694         > .pt_column_container {
695           display: -webkit-box; 695           display: -webkit-box;
696           display: -webkit-flex; 696           display: -webkit-flex;
697           display: -ms-flexbox; 697           display: -ms-flexbox;
698           display: flex; 698           display: flex;
699           > .pt_column-inner { 699           > .pt_column-inner {
700             -webkit-box-flex: 1; 700             -webkit-box-flex: 1;
701             -webkit-flex-grow: 1; 701             -webkit-flex-grow: 1;
702             -ms-flex-positive: 1; 702             -ms-flex-positive: 1;
703             flex-grow: 1; 703             flex-grow: 1;
704             display: -webkit-box; 704             display: -webkit-box;
705             display: -webkit-flex; 705             display: -webkit-flex;
706             display: -ms-flexbox; 706             display: -ms-flexbox;
707             display: flex; 707             display: flex;
708             -webkit-box-orient: vertical; 708             -webkit-box-orient: vertical;
709             -webkit-box-direction: normal; 709             -webkit-box-direction: normal;
710             -webkit-flex-direction: column; 710             -webkit-flex-direction: column;
711             -ms-flex-direction: column; 711             -ms-flex-direction: column;
712             flex-direction: column; 712             flex-direction: column;
713             z-index: 1; 713             z-index: 1;
714             max-width: 100%; 714             max-width: 100%;
715             @media (-ms-high-contrast: active), (-ms-high-contrast: none) { 715             @media (-ms-high-contrast: active), (-ms-high-contrast: none) {
716               /* IE10+ specific styles */ 716               /* IE10+ specific styles */
717               & > * { 717               & > * {
718                 min-height: 1em; 718                 min-height: 1em;
719               } 719               }
720             } 720             }
721           } 721           }
722         } 722         }
723  723 
724         &::before, 724         &::before,
725         &::after { 725         &::after {
726           display: none; 726           display: none;
727         } 727         }
728       } 728       }
729  729 
730       // columns alignment 730       // columns alignment
731       &.pt_row-o-columns-stretch { 731       &.pt_row-o-columns-stretch {
732         -webkit-align-content: stretch; 732         -webkit-align-content: stretch;
733         -ms-flex-line-pack: stretch; 733         -ms-flex-line-pack: stretch;
734         align-content: stretch; 734         align-content: stretch;
735       } 735       }
736       &.pt_row-o-columns-top { 736       &.pt_row-o-columns-top {
737         -webkit-align-content: flex-start; 737         -webkit-align-content: flex-start;
738         -ms-flex-line-pack: start; 738         -ms-flex-line-pack: start;
739         align-content: flex-start; 739         align-content: flex-start;
740       } 740       }
741       &.pt_row-o-columns-bottom { 741       &.pt_row-o-columns-bottom {
742         -webkit-align-content: flex-end; 742         -webkit-align-content: flex-end;
743         -ms-flex-line-pack: end; 743         -ms-flex-line-pack: end;
744         align-content: flex-end; 744         align-content: flex-end;
745       } 745       }
746       &.pt_row-o-columns-middle { 746       &.pt_row-o-columns-middle {
747         -webkit-align-content: center; 747         -webkit-align-content: center;
748         -ms-flex-line-pack: center; 748         -ms-flex-line-pack: center;
749         align-content: center; 749         align-content: center;
750       } 750       }
751       &.pt_row-o-columns-top, 751       &.pt_row-o-columns-top,
752       &.pt_row-o-columns-bottom, 752       &.pt_row-o-columns-bottom,
753       &.pt_row-o-columns-middle { 753       &.pt_row-o-columns-middle {
754         &::after { 754         &::after {
755           content: ''; 755           content: '';
756           width: 100%; 756           width: 100%;
757           height: 0; 757           height: 0;
758           overflow: hidden; 758           overflow: hidden;
759           visibility: hidden; 759           visibility: hidden;
760           display: block; 760           display: block;
761         } 761         }
762       } 762       }
763  763 
764       // equal height 764       // equal height
765       &.pt_row-o-equal-height { 765       &.pt_row-o-equal-height {
766         > .pt_column_container { 766         > .pt_column_container {
767           -webkit-box-align: stretch; 767           -webkit-box-align: stretch;
768           -webkit-align-items: stretch; 768           -webkit-align-items: stretch;
769           -ms-flex-align: stretch; 769           -ms-flex-align: stretch;
770           align-items: stretch; 770           align-items: stretch;
771         } 771         }
772       } 772       }
773  773 
774       // content alignment 774       // content alignment
775       &.pt_row-o-content-top { 775       &.pt_row-o-content-top {
776         > .pt_column_container { 776         > .pt_column_container {
777           > .pt_column-inner { 777           > .pt_column-inner {
778             -webkit-box-pack: start; 778             -webkit-box-pack: start;
779             -webkit-justify-content: flex-start; 779             -webkit-justify-content: flex-start;
780             -ms-flex-pack: start; 780             -ms-flex-pack: start;
781             justify-content: flex-start; 781             justify-content: flex-start;
782           } 782           }
783         } 783         }
784         &:not(.pt_row-o-equal-height) { 784         &:not(.pt_row-o-equal-height) {
785           > .pt_column_container { 785           > .pt_column_container {
786             -webkit-box-align: start; 786             -webkit-box-align: start;
787             -webkit-align-items: flex-start; 787             -webkit-align-items: flex-start;
788             -ms-flex-align: start; 788             -ms-flex-align: start;
789             align-items: flex-start; 789             align-items: flex-start;
790           } 790           }
791         } 791         }
792       } 792       }
793       &.pt_row-o-content-bottom { 793       &.pt_row-o-content-bottom {
794         > .pt_column_container { 794         > .pt_column_container {
795           > .pt_column-inner { 795           > .pt_column-inner {
796             -webkit-box-pack: end; 796             -webkit-box-pack: end;
797             -webkit-justify-content: flex-end; 797             -webkit-justify-content: flex-end;
798             -ms-flex-pack: end; 798             -ms-flex-pack: end;
799             justify-content: flex-end; 799             justify-content: flex-end;
800           } 800           }
801         } 801         }
802         &:not(.pt_row-o-equal-height) { 802         &:not(.pt_row-o-equal-height) {
803           > .pt_column_container { 803           > .pt_column_container {
804             -webkit-box-align: end; 804             -webkit-box-align: end;
805             -webkit-align-items: flex-end; 805             -webkit-align-items: flex-end;
806             -ms-flex-align: end; 806             -ms-flex-align: end;
807             align-items: flex-end; 807             align-items: flex-end;
808           } 808           }
809         } 809         }
810       } 810       }
811       &.pt_row-o-content-middle { 811       &.pt_row-o-content-middle {
812         > .pt_column_container { 812         > .pt_column_container {
813           > .pt_column-inner { 813           > .pt_column-inner {
814             -webkit-box-pack: center; 814             -webkit-box-pack: center;
815             -webkit-justify-content: center; 815             -webkit-justify-content: center;
816             -ms-flex-pack: center; 816             -ms-flex-pack: center;
817             justify-content: center; 817             justify-content: center;
818           } 818           }
819         } 819         }
820         &:not(.pt_row-o-equal-height) { 820         &:not(.pt_row-o-equal-height) {
821           > .pt_column_container { 821           > .pt_column_container {
822             -webkit-box-align: center; 822             -webkit-box-align: center;
823             -webkit-align-items: center; 823             -webkit-align-items: center;
824             -ms-flex-align: center; 824             -ms-flex-align: center;
825             align-items: center; 825             align-items: center;
826           } 826           }
827         } 827         }
828       } 828       }
829     } 829     }
830  830 
831     // Clearfix for column 831     // Clearfix for column
832     .pt_column-inner { 832     .pt_column-inner {
833       &::before, 833       &::before,
834       &::after { 834       &::after {
835         content: " "; 835         content: " ";
836         display: table; 836         display: table;
837       } 837       }
838       &::after { 838       &::after {
839         clear: both; 839         clear: both;
840       } 840       }
841     } 841     }
842     // 842     //
843     //  Footer 843     //  Footer
844     //  --------------------------------------------- 844     //  ---------------------------------------------
845     .widget { 845     .widget {
846       &:first-child {margin-top: 0;} 846       &:first-child {margin-top: 0;}
847       .tagcloud { 847       .tagcloud {
848         margin-top: -.3846em; 848         margin-top: -.3846em;
849         margin-bottom: -.3846em; 849         margin-bottom: -.3846em;
850         a { 850         a {
851           margin: .3846em .3846em .3846em 0; 851           margin: .3846em .3846em .3846em 0;
852           padding: .25rem .5rem; 852           padding: .25rem .5rem;
853           line-height: 1; 853           line-height: 1;
854           display: inline-block; 854           display: inline-block;
855           text-decoration: none; 855           text-decoration: none;
856           font-size: .75em!important; 856           font-size: .75em!important;
857           text-transform: uppercase; 857           text-transform: uppercase;
858           font-weight: 700; 858           font-weight: 700;
859           border-radius: 10px; 859           border-radius: 10px;
860         } 860         }
861       } 861       }
862       &.contact-info { 862       &.contact-info {
863         ul,li { 863         ul,li {
864           border-width: 0; 864           border-width: 0;
865           margin: 0; 865           margin: 0;
866           padding: 0; 866           padding: 0;
867         } 867         }
868         li { 868         li {
869           a{ 869           a{
870             &:hover {text-decoration: underline;} 870             &:hover {text-decoration: underline;}
871           } 871           }
872           &:not(:last-child) {margin-bottom: 10px;} 872           &:not(:last-child) {margin-bottom: 10px;}
873         } 873         }
874         p {margin-bottom: 10px;} 874         p {margin-bottom: 10px;}
875         i {clear: both;float: left;text-align: center;width: 16px;top: -2px;margin: 4px 9px 10px 0;font-size: 1.3em;position: static!important;} 875         i {clear: both;float: left;text-align: center;width: 16px;top: -2px;margin: 4px 9px 10px 0;font-size: 1.3em;position: static!important;}
876         .contact-details { 876         .contact-details {
877           strong,span {display: block;padding-left: 25px;} 877           strong,span {display: block;padding-left: 25px;}
878         } 878         }
879       } 879       }
880       &.follow-us { 880       &.follow-us {
881         .share-links { 881         .share-links {
882           a { 882           a {
883             width: 30px; 883             width: 30px;
884             height: 30px; 884             height: 30px;
885             border-radius: 30px; 885             border-radius: 30px;
886             margin: 2px; 886             margin: 2px;
887             overflow: hidden; 887             overflow: hidden;
888             box-shadow: 0 2px 2px 0 rgba(0,0,0,.3); 888             box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
889             transition: all 0.2s; 889             transition: all 0.2s;
890             font-size: 14px; 890             font-size: 14px;
891             &:hover {color: #fff;} 891             &:hover {color: #fff;}
892           } 892           }
893         } 893         }
894       } 894       }
895     } 895     }
896     .footer { 896     .footer {
897       &, p { 897       &, p {
898         font-size: 13px; 898         font-size: 13px;
899         line-height: 24px; 899         line-height: 24px;
900         letter-spacing: .065px; 900         letter-spacing: .065px;
901       } 901       }
902       ul { 902       ul {
903           list-style: none; 903           list-style: none;
904           margin: 0; 904           margin: 0;
905           padding: 0; 905           padding: 0;
906       } 906       }
907       li { 907       li {
908           margin: 0; 908           margin: 0;
909       } 909       }
910       .widget { 910       .widget {
911         margin-bottom: 20px; 911         margin-bottom: 20px;
912         p {margin-top: -3px;margin-bottom: 13px;font-size: 1em;} 912         p {margin-top: -3px;margin-bottom: 13px;font-size: 1em;}
913         & + .widget { 913         & + .widget {
914           margin-top: 20px; 914           margin-top: 20px;
915         } 915         }
916         .tagcloud { 916         .tagcloud {
917           a { 917           a {
918             background: none;border-radius: 0;font-size: 11px!important;font-weight: 400;text-transform: none;padding: .6em;border: 1px solid #313438; 918             background: none;border-radius: 0;font-size: 11px!important;font-weight: 400;text-transform: none;padding: .6em;border: 1px solid #313438;
919             &:hover {border-color: #fff;color: #fff;} 919             &:hover {border-color: #fff;color: #fff;}
920           } 920           }
921         } 921         }
922       } 922       }
923       .follow-us { 923       .follow-us {
924         .share-links { 924         .share-links {
925           a { 925           a {
926             width: 40px;height: 40px;border-radius: 20px;border: 1px solid #313438;box-shadow: none; 926             width: 40px;height: 40px;border-radius: 20px;border: 1px solid #313438;box-shadow: none;
927             &:not(:hover) {background: none;color: #fff;} 927             &:not(:hover) {background: none;color: #fff;}
928           } 928           }
929         } 929         }
930       } 930       }
931       .contact-info { 931       .contact-info {
932         i {display: none;} 932         i {display: none;}
933         .contact-details { 933         .contact-details {
934           strong, span {padding-left: 0;} 934           strong, span {padding-left: 0;}
935           strong {line-height: 1em;color: #fff;font-weight: 400;} 935           strong {line-height: 1em;color: #fff;font-weight: 400;}
936         } 936         }
937       } 937       }
938       .newsletter { 938       .newsletter {
939         margin-bottom: 0; 939         margin-bottom: 0;
940         label { 940         label {
941             display: none; 941             display: none;
942         } 942         }
943         .field .control:before { 943         .field .control:before {
944             display: none; 944             display: none;
945         } 945         }
946         input { 946         input {
947           height: 48px; 947           height: 48px;
948           padding-left: 25px; 948           padding-left: 25px;
949           padding-right: 25px; 949           padding-right: 25px;
950           border-radius: 30px 0 0 30px; 950           border-radius: 30px 0 0 30px;
951           font-size: .75rem; 951           font-size: .75rem;
952           color: #777; 952           color: #777;
953           border: none; 953           border: none;
954         } 954         }
955         .action.subscribe { 955         .action.subscribe {
956           height: 48px; 956           height: 48px;
957           padding-left: 25px; 957           padding-left: 25px;
958           padding-right: 25px; 958           padding-right: 25px;
959           text-transform: uppercase; 959           text-transform: uppercase;
960           font-weight: 700; 960           font-weight: 700;
961           font-size: .75rem; 961           font-size: .75rem;
962           border-radius: 0 30px 30px 0; 962           border-radius: 0 30px 30px 0;
963           border: none; 963           border: none;
964         } 964         }
965       } 965       }
966     } 966     }
967     .footer-top { 967     .footer-top {
968       .custom-block { 968       .custom-block {
969         display: flex; 969         display: flex;
970         -ms-flex-align: center; 970         -ms-flex-align: center;
971         align-items: center; 971         align-items: center;
972         -ms-flex-pack: justify; 972         -ms-flex-pack: justify;
973         justify-content: space-between; 973         justify-content: space-between;
974         -ms-flex-wrap: wrap; 974         -ms-flex-wrap: wrap;
975         flex-wrap: wrap; 975         flex-wrap: wrap;
976         &:before, &::after { 976         &:before, &::after {
977             content: ''; 977             content: '';
978             display: block; 978             display: block;
979             border-top: 1px solid #e7e7e7; 979             border-top: 1px solid #e7e7e7;
980             -ms-flex: 0 0 100%; 980             -ms-flex: 0 0 100%;
981             flex: 0 0 100%; 981             flex: 0 0 100%;
982         } 982         }
983         &:before { 983         &:before {
984             margin-bottom: 40px; 984             margin-bottom: 40px;
985         } 985         }
986         &:after { 986         &:after {
987             margin-top: 40px; 987             margin-top: 40px;
988         } 988         }
989       } 989       }
990       .widget:last-child { 990       .widget:last-child {
991         margin-bottom: 0; 991         margin-bottom: 0;
992       } 992       }
993     } 993     }
994     .footer-middle { 994     .footer-middle {
995         background-color: @footer-middle_background-color; 995         background-color: @footer-middle_background-color;
996         color: @footer-middle_font-color; 996         color: @footer-middle_font-color;
997         > .container { 997         > .container {
998             position: relative; 998             position: relative;
999             padding-top: 4rem;padding-bottom: 1.5rem; 999             padding-top: 4rem;padding-bottom: 1.5rem;
1000             &::after { 1000             &::after {
1001               content: ''; 1001               content: '';
1002               display: block; 1002               display: block;
1003               position: absolute; 1003               position: absolute;
1004               left: 10px; 1004               left: 10px;
1005               bottom: 0; 1005               bottom: 0;
1006               right: 10px; 1006               right: 10px;
1007               border-bottom: 1px solid #313438; 1007               border-bottom: 1px solid #313438;
1008             } 1008             }
1009         } 1009         }
1010         .widget_media_image img {max-width: 111px;height: auto;display: block;} 1010         .widget_media_image img {max-width: 111px;height: auto;display: block;}
1011         [class^="porto-icon-"], [class*=" porto-icon-"] { 1011         [class^="porto-icon-"], [class*=" porto-icon-"] {
1012             color: @footer-middle-icon_font-color; 1012             color: @footer-middle-icon_font-color;
1013         } 1013         }
1014         .block { 1014         .block {
1015           text-align: left; 1015           text-align: left;
1016           line-height: 1.5; 1016           line-height: 1.5;
1017           margin: 0; 1017           margin: 0;
1018           width: auto; 1018           width: auto;
1019           .block-title { 1019           .block-title {
1020             margin-bottom: 20px; 1020             margin-bottom: 20px;
1021             strong { 1021             strong {
1022               font-weight: 400; 1022               font-weight: 400;
1023               padding: 0; 1023               padding: 0;
1024               font-size: 16px; 1024               font-size: 16px;
1025               color: @footer-middle-block-title_font-color; 1025               color: @footer-middle-block-title_font-color;
1026               text-transform: none; 1026               text-transform: none;
1027             } 1027             }
1028           } 1028           }
1029         } 1029         }
1030         a { 1030         a {
1031             &, &:hover, &:focus { 1031             &, &:hover, &:focus {
1032                 color: @footer-middle-link_font-color; 1032                 color: @footer-middle-link_font-color;
1033             } 1033             }
1034         } 1034         }
1035     } 1035     }
1036     .footer-bottom { 1036     .footer-bottom {
1037         background-color: @footer-bottom_background-color; 1037         background-color: @footer-bottom_background-color;
1038         padding: 15px 0; 1038         padding: 15px 0;
1039         font-size: .9em; 1039         font-size: .9em;
1040         >.container { 1040         >.container {
1041           display: -webkit-flex; 1041           display: -webkit-flex;
1042           display: flex; 1042           display: flex;
1043           -webkit-align-items: center; 1043           -webkit-align-items: center;
1044           align-items: center; 1044           align-items: center;
1045           justify-content: 1045           justify-content:
1046           space-between;flex-wrap: wrap; 1046           space-between;flex-wrap: wrap;
1047         } 1047         }
1048         .widget {display: inline-block;margin: 0;} 1048         .widget {display: inline-block;margin: 0;}
1049         .logo { 1049         .logo {
1050             margin: 0; 1050             margin: 0;
1051             margin-right: 45px; 1051             margin-right: 45px;
1052             float: left; 1052             float: left;
1053         } 1053         }
1054         address { 1054         address {
1055             order: 1;padding: 10px 8px 10px 0;text-align: left;margin-right: auto;flex: auto; 1055             order: 1;padding: 10px 8px 10px 0;text-align: left;margin-right: auto;flex: auto;
1056         } 1056         }
1057         .custom-block { 1057         .custom-block {
1058             &.f-right { 1058             &.f-right {
1059                 margin: 0;order: 2; 1059                 margin: 0;order: 2;
1060                 padding: 10px 0 10px 8px; 1060                 padding: 10px 0 10px 8px;
1061                 text-align: right; 1061                 text-align: right;
1062                 flex: auto; 1062                 flex: auto;
1063             } 1063             }
1064         } 1064         }
1065         .switcher { 1065         .switcher {
1066             line-height: 1 !important; 1066             line-height: 1 !important;
1067             display: block; 1067             display: block;
1068             height: auto; 1068             height: auto;
1069             margin-top: 15px; 1069             margin-top: 15px;
1070             float: left; 1070             float: left;
1071  1071 
1072             label { 1072             label {
1073                 display: none; 1073                 display: none;
1074             } 1074             }
1075             select { 1075             select {
1076                 display: inline-block; 1076                 display: inline-block;
1077                 width: auto; 1077                 width: auto;
1078                 line-height: 1; 1078                 line-height: 1;
1079             } 1079             }
1080         } 1080         }
1081     } 1081     }
1082     .footer-ribbon { 1082     .footer-ribbon {
1083         background-color: @footer-ribbon_background-color; 1083         background-color: @footer-ribbon_background-color;
1084         position: absolute; 1084         position: absolute;
1085         top: 0; 1085         top: 0;
1086         margin: -16px 0 0; 1086         margin: -16px 0 0;
1087         padding: 10px 20px 6px; 1087         padding: 10px 20px 6px;
1088         color: #fff; 1088         color: #fff;
1089         font-size: 1.6em; 1089         font-size: 1.6em;
1090         z-index: 4; 1090         z-index: 4;
1091         span { 1091         span {
1092             color: @footer-ribbon_font-color; 1092             color: @footer-ribbon_font-color;
1093             font-family: "Shadows Into Light",cursive; 1093             font-family: "Shadows Into Light",cursive;
1094             line-height: 1; 1094             line-height: 1;
1095         } 1095         }
1096         &:before { 1096         &:before {
1097           content: ""; 1097           content: "";
1098           display: block; 1098           display: block;
1099           height: 0; 1099           height: 0;
1100           position: absolute; 1100           position: absolute;
1101           top: 0; 1101           top: 0;
1102           width: 7px; 1102           width: 7px;
1103           right: 100%; 1103           right: 100%;
1104           border-right: 10px solid #646464; 1104           border-right: 10px solid #646464;
1105           border-top: 16px solid transparent; 1105           border-top: 16px solid transparent;
1106         } 1106         }
1107     } 1107     }
1108  1108 
1109     /*** About US ***/ 1109     /*** About US ***/
1110     h2.word-rotator-title { 1110     h2.word-rotator-title {
1111         line-height: 30px; 1111         line-height: 30px;
1112         font-size: 20px; 1112         font-size: 20px;
1113         font-weight: 300; 1113         font-weight: 300;
1114         margin: 0 0 20px 0; 1114         margin: 0 0 20px 0;
1115         color: #121214; 1115         color: #121214;
1116     } 1116     }
1117     .word-rotate { 1117     .word-rotate {
1118         visibility: hidden; 1118         visibility: hidden;
1119         width: 100px; 1119         width: 100px;
1120         height: 0; 1120         height: 0;
1121         margin-bottom: -7px; 1121         margin-bottom: -7px;
1122         display: inline-block; 1122         display: inline-block;
1123         overflow: hidden; 1123         overflow: hidden;
1124         text-align: center; 1124         text-align: center;
1125         position: relative; 1125         position: relative;
1126  1126 
1127         h2 & { 1127         h2 & {
1128             margin-bottom: -7px 1128             margin-bottom: -7px
1129         } 1129         }
1130         &.active { 1130         &.active {
1131             visibility: visible; 1131             visibility: visible;
1132             width: auto; 1132             width: auto;
1133         } 1133         }
1134         .word-rotate-items { 1134         .word-rotate-items {
1135             position: relative; 1135             position: relative;
1136             top: 0; 1136             top: 0;
1137             width: 100%; 1137             width: 100%;
1138  1138 
1139             span { 1139             span {
1140                 display: block; 1140                 display: block;
1141                 white-space: nowrap; 1141                 white-space: nowrap;
1142             } 1142             }
1143         } 1143         }
1144     } 1144     }
1145     p .alternative-font { 1145     p .alternative-font {
1146         display: inline-block; 1146         display: inline-block;
1147         margin-top: -15px; 1147         margin-top: -15px;
1148         position: relative; 1148         position: relative;
1149         top: 3px; 1149         top: 3px;
1150         margin-bottom: -6px; 1150         margin-bottom: -6px;
1151         color: @theme-color; 1151         color: @theme-color;
1152         font-family: "Shadows Into Light",cursive; 1152         font-family: "Shadows Into Light",cursive;
1153         font-size: 1.6em; 1153         font-size: 1.6em;
1154     } 1154     }
1155     .btn-primary { 1155     .btn-primary {
1156         color: #fff; 1156         color: #fff;
1157         text-shadow: 0 -1px 0 rgba(0,0,0,.25); 1157         text-shadow: 0 -1px 0 rgba(0,0,0,.25);
1158         background-color: @button-primary__background; 1158         background-color: @button-primary__background;
1159         border-color: @button-primary__background; 1159         border-color: @button-primary__background;
1160  1160 
1161         &:hover { 1161         &:hover {
1162             color: #fff; 1162             color: #fff;
1163             opacity: 0.85; 1163             opacity: 0.85;
1164         } 1164         }
1165     } 1165     }
1166     .btn { 1166     .btn {
1167         display: inline-block; 1167         display: inline-block;
1168         margin-bottom: 0; 1168         margin-bottom: 0;
1169         font-weight: normal; 1169         font-weight: normal;
1170         text-align: center; 1170         text-align: center;
1171         vertical-align: middle; 1171         vertical-align: middle;
1172         cursor: pointer; 1172         cursor: pointer;
1173         background-image: none; 1173         background-image: none;
1174         border: 1px solid transparent; 1174         border: 1px solid transparent;
1175         white-space: nowrap; 1175         white-space: nowrap;
1176         padding: 6px 12px; 1176         padding: 6px 12px;
1177         font-size: 14px; 1177         font-size: 14px;
1178         line-height: 1.42857143; 1178         line-height: 1.42857143;
1179         border-radius: 4px; 1179         border-radius: 4px;
1180  1180 
1181         &:hover { 1181         &:hover {
1182             text-decoration: none; 1182             text-decoration: none;
1183         } 1183         }
1184  1184 
1185         &-lg { 1185         &-lg {
1186             padding: 10px 16px; 1186             padding: 10px 16px;
1187             font-size: 18px; 1187             font-size: 18px;
1188             line-height: 1.33; 1188             line-height: 1.33;
1189             border-radius: 6px; 1189             border-radius: 6px;
1190         } 1190         }
1191     } 1191     }
1192     .push-top { 1192     .push-top {
1193         margin-top: 20px; 1193         margin-top: 20px;
1194     } 1194     }
1195     hr.tall { 1195     hr.tall {
1196         margin: 30px 0; 1196         margin: 30px 0;
1197         background-image: -webkit-linear-gradient(left,transparent,rgba(0,0,0,.2),transparent); 1197         background-image: -webkit-linear-gradient(left,transparent,rgba(0,0,0,.2),transparent);
1198         background-image: linear-gradient(left,transparent,rgba(0,0,0,.2),transparent); 1198         background-image: linear-gradient(left,transparent,rgba(0,0,0,.2),transparent);
1199         border: 0; 1199         border: 0;
1200         height: 1px; 1200         height: 1px;
1201     } 1201     }
1202     .entry-content { 1202     .entry-content {
1203         h3 { 1203         h3 {
1204             font-size: 1.7em; 1204             font-size: 1.7em;
1205             font-weight: normal; 1205             font-weight: normal;
1206             color: @theme-color; 1206             color: @theme-color;
1207             letter-spacing: normal; 1207             letter-spacing: normal;
1208             line-height: 24px; 1208             line-height: 24px;
1209             margin-bottom: 33px; 1209             margin-bottom: 33px;
1210             text-transform: uppercase; 1210             text-transform: uppercase;
1211         } 1211         }
1212         p { 1212         p {
1213             font-size: 14px; 1213             font-size: 14px;
1214             line-height: 24px; 1214             line-height: 24px;
1215             margin-bottom: 20px; 1215             margin-bottom: 20px;
1216         } 1216         }
1217         .lead { 1217         .lead {
1218             font-size: 21px; 1218             font-size: 21px;
1219             line-height: 1.4; 1219             line-height: 1.4;
1220         } 1220         }
1221     } 1221     }
1222     .history { 1222     .history {
1223         margin: 25px 0; 1223         margin: 25px 0;
1224         padding: 0; 1224         padding: 0;
1225         clear: both; 1225         clear: both;
1226  1226 
1227         .thumb { 1227         .thumb {
1228             background: transparent url(../images/history-thumb.png) no-repeat 0 0; 1228             background: transparent url(../images/history-thumb.png) no-repeat 0 0;
1229             width: 227px; 1229             width: 227px;
1230             height: 160px; 1230             height: 160px;
1231             margin: 0 0 30px; 1231             margin: 0 0 30px;
1232             padding: 0; 1232             padding: 0;
1233             float: left; 1233             float: left;
1234  1234 
1235             img { 1235             img {
1236                 border-radius: 50%; 1236                 border-radius: 50%;
1237                 margin: 7px 8px; 1237                 margin: 7px 8px;
1238                 width: 145px; 1238                 width: 145px;
1239                 height: 145px; 1239                 height: 145px;
1240             } 1240             }
1241         } 1241         }
1242         h4 { 1242         h4 {
1243             float: left; 1243             float: left;
1244             margin: 15px 0; 1244             margin: 15px 0;
1245             padding: 0; 1245             padding: 0;
1246             color: @theme-color; 1246             color: @theme-color;
1247             line-height: 27px; 1247             line-height: 27px;
1248         } 1248         }
1249         p { 1249         p {
1250             margin: 0; 1250             margin: 0;
1251             margin-left: 55px; 1251             margin-left: 55px;
1252             line-height: 24px; 1252             line-height: 24px;
1253         } 1253         }
1254     } 1254     }
1255     .featured-box { 1255     .featured-box {
1256         background: #f5f5f5; 1256         background: #f5f5f5;
1257         background-color: transparent; 1257         background-color: transparent;
1258         background: linear-gradient(to bottom,white 1%,#f9f9f9 98%) repeat scroll 0 0 transparent; 1258         background: linear-gradient(to bottom,white 1%,#f9f9f9 98%) repeat scroll 0 0 transparent;
1259         box-sizing: border-box; 1259         box-sizing: border-box;
1260         border-bottom: 1px solid #DFDFDF; 1260         border-bottom: 1px solid #DFDFDF;
1261         border-left: 1px solid #ECECEC; 1261         border-left: 1px solid #ECECEC;
1262         border-radius: 8px; 1262         border-radius: 8px;
1263         border-right: 1px solid #ECECEC; 1263         border-right: 1px solid #ECECEC;
1264         box-shadow: 0 1px 1px 0 rgba(0,0,0,0.04); 1264         box-shadow: 0 1px 1px 0 rgba(0,0,0,0.04);
1265         margin-bottom: 20px; 1265         margin-bottom: 20px;
1266         margin-left: auto; 1266         margin-left: auto;
1267         margin-right: auto; 1267         margin-right: auto;
1268         margin-top: 20px; 1268         margin-top: 20px;
1269         min-height: 100px; 1269         min-height: 100px;
1270         position: relative; 1270         position: relative;
1271         text-align: center; 1271         text-align: center;
1272         z-index: 1; 1272         z-index: 1;
1273  1273 
1274         .box-content { 1274         .box-content {
1275             border-radius: 8px; 1275             border-radius: 8px;
1276             border-top: 4px solid @theme-color; 1276             border-top: 4px solid @theme-color;
1277             padding: 30px 20px; 1277             padding: 30px 20px;
1278         } 1278         }
1279         h4 { 1279         h4 {
1280             font-size: 1.3em; 1280             font-size: 1.3em;
1281             font-weight: 400; 1281             font-weight: 400;
1282             letter-spacing: -0.7px; 1282             letter-spacing: -0.7px;
1283             text-transform: uppercase; 1283             text-transform: uppercase;
1284         } 1284         }
1285         .block-flickr-photos { 1285         .block-flickr-photos {
1286             border: 0; 1286             border: 0;
1287  1287 
1288             .block-title { 1288             .block-title {
1289                 display: none; 1289                 display: none;
1290             } 1290             }
1291             a.flickr-image { 1291             a.flickr-image {
1292                 margin: 5px; 1292                 margin: 5px;
1293                 display: inline-block; 1293                 display: inline-block;
1294                 border: 1px solid #dcdcdc; 1294                 border: 1px solid #dcdcdc;
1295                 padding: 5px; 1295                 padding: 5px;
1296                 border-radius: 5px; 1296                 border-radius: 5px;
1297  1297 
1298                 img { 1298                 img {
1299                     max-width: 100%; 1299                     max-width: 100%;
1300                     width: 75px; 1300                     width: 75px;
1301                 } 1301                 }
1302             } 1302             }
1303         } 1303         }
1304     } 1304     }
1305     .history .featured-box { 1305     .history .featured-box {
1306         text-align: left; 1306         text-align: left;
1307         margin-left: 225px; 1307         margin-left: 225px;
1308         margin-bottom: 35px; 1308         margin-bottom: 35px;
1309         min-height: 115px; 1309         min-height: 115px;
1310  1310 
1311         .box-content { 1311         .box-content {
1312             border-top-color: @theme-color; 1312             border-top-color: @theme-color;
1313         } 1313         }
1314     } 1314     }
1315     #newsletter_popup { 1315     #newsletter_popup {
1316         background: #ffffff url(../images/shop_newsletter_popup.jpg) no-repeat; 1316         background: #ffffff url(../images/shop_newsletter_popup.jpg) no-repeat;
1317         box-shadow: 0 0 50px rgba(0, 0, 0, .12); 1317         box-shadow: 0 0 50px rgba(0, 0, 0, .12);
1318         background-position: center; 1318         background-position: center;
1319         background-size: cover; 1319         background-size: cover;
1320         padding: 4rem 2.5rem; 1320         padding: 4rem 2.5rem;
1321         margin: 0; 1321         margin: 0;
1322         width: 740px; 1322         width: 740px;
1323         min-height: 300px; 1323         min-height: 300px;
1324         text-align: left; 1324         text-align: left;
1325         position: relative; 1325         position: relative;
1326         .text_left { 1326         .text_left {
1327           img { 1327           img {
1328             max-width: 111px; 1328             max-width: 111px;
1329             display: block; 1329             display: block;
1330           } 1330           }
1331         } 1331         }
1332         form.subscribe {display: flex;align-items: center;} 1332         form.subscribe {display: flex;align-items: center;}
1333         .field {flex: 1;} 1333         .field {flex: 1;}
1334         .field,.actions {margin-bottom: 20px;} 1334         .field,.actions {margin-bottom: 20px;}
1335         input[type="email"] { 1335         input[type="email"] {
1336           height: 3rem; 1336           height: 3rem;
1337           border: none; 1337           border: none;
1338           border-radius: 1.5rem 0 0 1.5rem; 1338           border-radius: 1.5rem 0 0 1.5rem;
1339           background: #f4f4f4; 1339           background: #f4f4f4;
1340           box-shadow: none !important; 1340           box-shadow: none !important;
1341           padding-left: 1.375rem; 1341           padding-left: 1.375rem;
1342         } 1342         }
1343         .action.primary { 1343         .action.primary {
1344             height: 3rem; 1344             height: 3rem;
1345             padding-left: 1.5rem; 1345             padding-left: 1.5rem;
1346             padding-right: 2rem; 1346             padding-right: 2rem;
1347             border-radius: 0 1.5rem 1.5rem 0; 1347             border-radius: 0 1.5rem 1.5rem 0;
1348             box-shadow: none !important; 1348             box-shadow: none !important;
1349             margin-right: .5rem; 1349             margin-right: .5rem;
1350             font-weight: 700; 1350             font-weight: 700;
1351         } 1351         }
1352         label.checkbox { 1352         label.checkbox {
1353             display: inline-block; 1353             display: inline-block;
1354             margin-top: 0; 1354             margin-top: 0;
1355             margin-bottom: 0; 1355             margin-bottom: 0;
1356             margin-right: 5px; 1356             margin-right: 5px;
1357         } 1357         }
1358         .checkbox { 1358         .checkbox {
1359             font-size: .75rem; 1359             font-size: .75rem;
1360             input[type="checkbox"] { 1360             input[type="checkbox"] {
1361                 -webkit-appearance: none; 1361                 -webkit-appearance: none;
1362                 -moz-appearance: none; 1362                 -moz-appearance: none;
1363                 border: 1px solid #ccc; 1363                 border: 1px solid #ccc;
1364                 width: 1.25rem; 1364                 width: 1.25rem;
1365                 height: 1.25rem; 1365                 height: 1.25rem;
1366                 margin-top: -.1rem; 1366                 margin-top: -.1rem;
1367                 margin-left: 1px; 1367                 margin-left: 1px;
1368                 margin-right: 5px; 1368                 margin-right: 5px;
1369                 vertical-align: middle; 1369                 vertical-align: middle;
1370                 outline: none; 1370                 outline: none;
1371                 border-radius: 3px; 1371                 border-radius: 3px;
1372                 color: #555; 1372                 color: #555;
1373                 top: 0; 1373                 top: 0;
1374                 &:checked:before { 1374                 &:checked:before {
1375                   content: "\e8c5"; 1375                   content: "\e8c5";
1376                   font-family: 'porto-icons'; 1376                   font-family: 'porto-icons';
1377                   font-weight: 900; 1377                   font-weight: 900;
1378                   margin: 0; 1378                   margin: 0;
1379                   width: 1.15rem; 1379                   width: 1.15rem;
1380                   height: 1.2rem; 1380                   height: 1.2rem;
1381                   line-height: 1.2rem; 1381                   line-height: 1.2rem;
1382                   float: left; 1382                   float: left;
1383                   font-size: 11px; 1383                   font-size: 11px;
1384                   text-align: center; 1384                   text-align: center;
1385                 } 1385                 }
1386             } 1386             }
1387         } 1387         }
1388         div.mage-error[generated] { 1388         div.mage-error[generated] {
1389           position: absolute; 1389           position: absolute;
1390           margin-top: 40px; 1390           margin-top: 40px;
1391           font-size: .87em; 1391           font-size: .87em;
1392         } 1392         }
1393     } 1393     }
1394 } 1394 }
1395  1395 
1396 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { 1396 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
1397     .footer-bottom { 1397     .footer-bottom {
1398         & > .container > * { 1398         & > .container > * {
1399             float: none !important; 1399             float: none !important;
1400             line-height: 35px !important; 1400             line-height: 35px !important;
1401         } 1401         }
1402     } 1402     }
1403     .history { 1403     .history {
1404         .featured-box { 1404         .featured-box {
1405             margin-left: 0; 1405             margin-left: 0;
1406         } 1406         }
1407         .thumb { 1407         .thumb {
1408             display: none; 1408             display: none;
1409         } 1409         }
1410     } 1410     }
1411 } 1411 }
1412 @media (min-width: 768px) { 1412 @media (min-width: 768px) {
1413   .onepage-category{ 1413   .onepage-category{
1414     >.category-list{ 1414     >.category-list{
1415       >ul{ 1415       >ul{
1416         >li{ 1416         >li{
1417           margin-bottom: 1rem; 1417           margin-bottom: 1rem;
1418         } 1418         }
1419       } 1419       }
1420     } 1420     }
1421   } 1421   }
1422   .pt_row-o-full-height>.container>.row, .pt_row-o-equal-height>.container>.row>.pt_column_container>.pt_column-inner { 1422   .pt_row-o-full-height>.container>.row, .pt_row-o-equal-height>.container>.row>.pt_column_container>.pt_column-inner {
1423     height: 100%; 1423     height: 100%;
1424   } 1424   }
1425   .footer .footer-top .widget { 1425   .footer .footer-top .widget {
1426       margin: 0; 1426       margin: 0;
1427   } 1427   }
1428 } 1428 }
1429 @media(max-width:1199px){ 1429 @media(max-width:1199px){
1430   .onepage-cat.category-list+.main.container{padding:0 50px;} 1430   .onepage-cat.category-list+.main.container{padding:0 50px;}
1431   .onepage-category { 1431   .onepage-category {
1432     .category-detail { 1432     .category-detail {
1433       .menu-popup ul>li> a{font-size:11px;} 1433       .menu-popup ul>li> a{font-size:11px;}
1434       .title-menu>.menu-popup{padding:10px 0;} 1434       .title-menu>.menu-popup{padding:10px 0;}
1435     } 1435     }
1436   } 1436   }
1437 } 1437 }
1438 @media (max-width:991px) { 1438 @media (max-width:991px) {
1439   .footer .footer-bottom >.container {justify-content: flex-start;} 1439   .footer .footer-bottom >.container {justify-content: flex-start;}
1440   .footer .footer-bottom .custom-block.f-right {padding-left: 0;text-align: left;} 1440   .footer .footer-bottom .custom-block.f-right {padding-left: 0;text-align: left;}
1441   .porto-ibanner-layer { 1441   .porto-ibanner-layer {
1442       font-size:.875rem 1442       font-size:.875rem
1443   } 1443   }
1444 } 1444 }
1445 @media (min-width: 768px) and (max-width:991px) { 1445 @media (min-width: 768px) and (max-width:991px) {
1446   .onepage-category{ 1446   .onepage-category{
1447     >.category-list{ 1447     >.category-list{
1448       .nav-open &{position:absolute;} 1448       .nav-open &{position:absolute;}
1449     } 1449     }
1450   } 1450   }
1451 } 1451 }
1452 @media (max-width: 767px) { 1452 @media (max-width: 767px) {
1453   #newsletter_popup { 1453   #newsletter_popup {
1454     width: 100% !important; 1454     width: 100% !important;
1455     .col-10 { 1455     .col-10 {
1456       flex: 0 0 100%; 1456       flex: 0 0 100%;
1457       max-width: 100%; 1457       max-width: 100%;
1458     } 1458     }
1459   } 1459   }
1460   .porto-ibanner-layer { 1460   .porto-ibanner-layer {
1461       font-size:.8125rem 1461       font-size:.8125rem
1462   } 1462   }
1463   .cms-index-index .onepage-category,.onepage-category{display:block} 1463   .cms-index-index .onepage-category,.onepage-category{display:block}
1464   .onepage-category{ 1464   .onepage-category{
1465     >.category-list{ 1465     >.category-list{
1466       width:auto;float:none;padding:0;min-height:0;position:static;margin-bottom:20px; 1466       width:auto;float:none;padding:0;min-height:0;position:static;margin-bottom:20px;
1467       >ul{ 1467       >ul{
1468         padding:0; 1468         padding:0;
1469         >li{ 1469         >li{
1470           margin:0; 1470           margin:0;
1471           display:inline-block; 1471           display:inline-block;
1472           >a:after,>a:hover>span{display:none;} 1472           >a:after,>a:hover>span{display:none;}
1473         } 1473         }
1474       } 1474       }
1475     } 1475     }
1476     >.category-details{ 1476     >.category-details{
1477       float:none; 1477       float:none;
1478       width:auto; 1478       width:auto;
1479     } 1479     }
1480     >.category-list>ul{position:static!important;} 1480     >.category-list>ul{position:static!important;}
1481     .category-detail { 1481     .category-detail {
1482       .menu-popup { 1482       .menu-popup {
1483         >ul{ 1483         >ul{
1484           display:block; 1484           display:block;
1485           &.columns5>li{ 1485           &.columns5>li{
1486             width:50%; 1486             width:50%;
1487             padding:10px 15px; 1487             padding:10px 15px;
1488             &:nth-child(5n+1){ 1488             &:nth-child(5n+1){
1489               border-left:1px solid #bebebe; 1489               border-left:1px solid #bebebe;
1490               clear:none; 1490               clear:none;
1491             } 1491             }
1492             &:nth-child(2n+1){ 1492             &:nth-child(2n+1){
1493               border-left:0; 1493               border-left:0;
1494               clear:left; 1494               clear:left;
1495             } 1495             }
1496           } 1496           }
1497         } 1497         }
1498         ul>li> a{font-size:14px;} 1498         ul>li> a{font-size:14px;}
1499       } 1499       }
1500     } 1500     }
1501   } 1501   }
1502 } 1502 }
1503 @media (max-width: 575px) { 1503 @media (max-width: 575px) {
1504     .porto-ibanner-layer { 1504     .porto-ibanner-layer {
1505         font-size:.75rem 1505         font-size:.75rem
1506     } 1506     }
1507     .onepage-category .category-detail .products-area .category-link{ 1507     .onepage-category .category-detail .products-area .category-link{
1508       margin-left:0; 1508       margin-left:0;
1509       margin-bottom: 25px; 1509       margin-bottom: 25px;
1510       float:none; 1510       float:none;
1511       display:inline-block; 1511       display:inline-block;
1512     } 1512     }
1513 } 1513 }
    1514 //carousel
    1515 .has-ccols:not(.owl-loaded) {
    1516     display: flex;
    1517     width: auto;
    1518 }
    1519 .has-ccols {
    1520     flex-wrap: wrap;
    1521 }
    1522 .has-ccols.owl-carousel:not(.owl-loaded) {
    1523     flex-wrap: nowrap;
    1524     overflow: hidden;
    1525 }
    1526 .has-ccols > *, .ccols-wrap > * {
    1527     max-width: 100% !important;
    1528     flex: 0 0 auto !important;
    1529     width: var(--porto-cw, 100%) !important;
    1530 }
    1531 .porto-carousel .elementor-column {
    1532     width: 100% !important;
    1533 }
    1534 .has-ccols > {
    1535     .elementor-section, .elementor-column, .elementor-element {
    1536         width: var(--porto-cw, 100%) !important;
    1537     }
    1538 }
    1539 .owl-carousel.has-ccols:not(.owl-loaded) > * {
    1540     position: relative;
    1541 }
    1542 .ccols-1 {
    1543     --porto-cw: 100%;
    1544 }
    1545 .ccols-2 {
    1546     --porto-cw: 50%;
    1547 }
    1548 .ccols-3 {
    1549     --porto-cw: 33.3333%;
    1550 }
    1551 .ccols-4 {
    1552     --porto-cw: 25%;
    1553 }
    1554 .ccols-5 {
    1555     --porto-cw: 20%;
    1556 }
    1557 .ccols-6 {
    1558     --porto-cw: 16.6666%;
    1559 }
    1560 .ccols-7 {
    1561     --porto-cw: 14.2857%;
    1562 }
    1563 .ccols-8 {
    1564     --porto-cw: 12.5%;
    1565 }
    1566 .ccols-9 {
    1567     --porto-cw: 11.1111%;
    1568 }
    1569 .ccols-10 {
    1570     --porto-cw: 10%;
    1571 }
    1572 @media (min-width: 576px) {
    1573     .ccols-sm-1 > * {
    1574         --porto-cw: 100%;
    1575     }
    1576     .ccols-sm-2 > * {
    1577         --porto-cw: 50%;
    1578     }
    1579     .ccols-sm-3 > * {
    1580         --porto-cw: 33.3333%;
    1581     }
    1582     .ccols-sm-4 > * {
    1583         --porto-cw: 25%;
    1584     }
    1585     .ccols-sm-5 > * {
    1586         --porto-cw: 20%;
    1587     }
    1588     .ccols-sm-6 > * {
    1589         --porto-cw: 16.6666%;
    1590     }
    1591 }
    1592 @media (min-width: 768px) {
    1593     .ccols-md-1 > * {
    1594         --porto-cw: 100%;
    1595     }
    1596     .ccols-md-2 > * {
    1597         --porto-cw: 50%;
    1598     }
    1599     .ccols-md-3 > * {
    1600         --porto-cw: 33.3333%;
    1601     }
    1602     .ccols-md-4 > * {
    1603         --porto-cw: 25%;
    1604     }
    1605     .ccols-md-5 > * {
    1606         --porto-cw: 20%;
    1607     }
    1608     .ccols-md-6 > * {
    1609         --porto-cw: 16.6666%;
    1610     }
    1611 }
    1612 @media (min-width: 992px) {
    1613     .ccols-lg-1 > * {
    1614         --porto-cw: 100%;
    1615     }
    1616     .ccols-lg-2 > * {
    1617         --porto-cw: 50%;
    1618     }
    1619     .ccols-lg-3 > * {
    1620         --porto-cw: 33.3333%;
    1621     }
    1622     .ccols-lg-4 > * {
    1623         --porto-cw: 25%;
    1624     }
    1625     .ccols-lg-5 > * {
    1626         --porto-cw: 20%;
    1627     }
    1628     .ccols-lg-6 > * {
    1629         --porto-cw: 16.6666%;
    1630     }
    1631     .ccols-lg-7 > * {
    1632         --porto-cw: 14.2857%;
    1633     }
    1634     .ccols-lg-8 > * {
    1635         --porto-cw: 12.5%;
    1636     }
    1637     .ccols-lg-9 > * {
    1638         --porto-cw: 11.1111%;
    1639     }
    1640 }
    1641 @media (min-width: 1592px) {
    1642     .ccols-xl-2 > * {
    1643         --porto-cw:50%;
    1644     }
    1645     .ccols-xl-3 > * {
    1646         --porto-cw: 33.3333%;
    1647     }
    1648     .ccols-xl-4 > * {
    1649         --porto-cw: 25%;
    1650     }
    1651     .ccols-xl-5 > * {
    1652         --porto-cw: 20%;
    1653     }
    1654     .ccols-xl-6 > * {
    1655         --porto-cw: 16.6666%;
    1656     }
    1657     .ccols-xl-7 > * {
    1658         --porto-cw: 14.2857%;
    1659     }
    1660     .ccols-xl-8 > * {
    1661         --porto-cw: 12.5%;
    1662     }
    1663     .ccols-xl-9 > * {
    1664         --porto-cw: 11.1111%;
    1665     }
    1666     .ccols-xl-10 > * {
    1667         --porto-cw: 10%;
    1668     }
    1669 }
    1670 @media (min-width: 1400px) {
    1671     .ccols-sl-10 > * {
    1672         --porto-cw:10%;
    1673     }
    1674     .ccols-sl-9 > * {
    1675         --porto-cw: 11.1111%;
    1676     }
    1677     .ccols-sl-8 > * {
    1678         --porto-cw: 12.5%;
    1679     }
    1680     .ccols-sl-7 > * {
    1681         --porto-cw: 14.2857%;
    1682     }
    1683 }
    1684 .has-ccols.owl-loaded > div {
    1685     flex: none  !important;
    1686     width: auto  !important;
    1687     max-width: none  !important;
    1688 }
    1689 .has-ccols.owl-loaded > .owl-nav {
    1690     width: 100% !important;
    1691 }
    1692 .row > .porto-carousel {
    1693     padding-left: 0;
    1694     padding-right: 0
    1695 }