Subversion Repositories Matrimonio

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
27 xraver 1
*:focus,button:focus,input:focus,*,input,button,*:active,input:active,button:active,.bootstrap-select .btn:focus, option{
2
	outline: none !important;
3
	outline: 0px !important;
4
}
5
.banner-section{
6
	background: #000;
7
	height: 500px;
8
	font-size: 14px;
9
}
10
 
11
.header-section{
12
	font-family: 'Open Sans', sans-serif;
13
	background-color: #020203;
14
	padding-top: 5px;
15
	border-bottom: 1px solid #302f2f;
16
	&.style3{
17
		background: #fff;
18
	}
19
	img{
20
		max-width: 100%;
21
	}
22
	.container{
23
		max-width: 1200px;
24
		width: auto;
25
	}
26
	.logo{
27
		display: inline-block;
28
		margin-top: 22px;
29
	}
30
	.row{
31
		position: static;
32
		>*{
33
			position: static;
34
		}
35
	}
36
	.mod-menu{
37
		position: relative;
38
 
39
	}
40
	ul{
41
		list-style: none;
42
		padding:0px;
43
		margin:0 0 0 10px;
44
		li{
45
			text-transform: uppercase;
46
			a{
47
				color:#fff;
48
				background: none !important;
49
				padding:30px 15px;
50
				text-decoration: none !important;
51
			}
52
			&.active{
53
				> a{
54
					color:#ecae3d;
55
				}
56
			}
57
			.number{
58
				font-size: (10/14)+em;
59
				background: #ecae3d;
60
				width: 17px;
61
				height: 17px;
62
				line-height: 17px;
63
				text-align: center;
64
				color:#fff;
65
				position: absolute;
66
				right: -4px;
67
				top: 19px;
68
				border-radius: 100%;
69
			}
70
			position: relative;
71
			ul{
72
				position: absolute;
73
				top:100%;
74
				left:50%;
75
				margin-left: -115px;
76
				background: #fff;
77
				width: 230px;
78
				-webkit-transition: all .4s;
79
				transition: all .4s;
80
 
81
 
82
				li{
83
 
84
					a{
85
						color:#242424;
86
						padding:20px 30px;
87
						display: block;
88
						text-transform: none;
89
					}
90
					border-bottom: 1px solid #e6e6e6;
91
					ul{
92
						left:auto;
93
						right:100%;
94
						top:0px;
95
						margin-left: 0px;
96
						width: 0px;
97
						overflow: hidden;
98
						display: block;
99
						li{
100
							width: 230px;
101
						}
102
					}
103
					// &:hover{
104
					// 	> ul{
105
					// 		width: 230px;
106
 
107
 
108
					// 	}
109
					// }
110
				}
111
			}
112
			// &:hover{
113
			// 	> ul{
114
			// 		display: block;
115
			// 	}
116
			// }
117
			&.mega-menu{
118
				position: static;
119
				> ul{
120
					width: 100%;
121
					left:0px;
122
					float: none;
123
 
124
					margin-left: 0px;
125
					max-height: 0px;
126
					display: block;
127
					overflow: hidden;
128
					-webkit-transition: all .7s;
129
					transition: all .7s;
130
					-webkit-transition-delay: .3s;
131
					transition-delay: .3s;
132
					>li{
133
						padding:30px 0;
134
						float: left;
135
						border:none;
136
						width: 25%;
137
						>a{
138
							text-transform: uppercase;
139
							padding-bottom: 10px;
140
							font-weight: 600;
141
						}
142
 
143
						ul{
144
							width: 100%;
145
							position: relative;
146
							right:auto;
147
							top:auto;
148
							li{
149
								border:none;
150
								a{
151
									padding-top:15px;
152
									padding-bottom:15px;
153
								}
154
							}
155
						}
156
					}
157
 
158
				}
159
				// &:hover{
160
				// 	> ul{
161
				// 		max-height: 2000px;
162
				// 	}
163
				// }
164
			}
165
			&.search-parent{
166
				position: static;
167
				// &:hover,&.active{
168
				// 	.search-box{
169
				// 		max-height: 2000px;
170
				// 		-webkit-transition-delay: 0s;
171
				// 		transition-delay: 0s;
172
				// 	}
173
				// }
174
				.search-box{
175
					background: #fff;
176
					-webkit-transition: all .4s;
177
					transition: all .4s;
178
					-webkit-transition-delay: .3s;
179
					transition-delay: .3s;
180
					position: absolute;
181
					top:100%;
182
					left:0px;
183
					.content{
184
						padding:30px 95px 30px 30px;
185
					}
186
					width: 100%;
187
					max-height: 0px;
188
					overflow: hidden;
189
					.form-control{
190
						height: auto;
191
						border:1px solid #e6e6e6;
192
						border-radius: 0px;
193
						box-shadow: none;
194
						padding-right: 45px;
195
						padding-bottom: 10px;
196
						padding-top: 10px;
197
						input{
198
							background: none;
199
							border:none;
200
							width: 100%;
201
							font-size: (20/14)+em;
202
							color:#727272;
203
						}
204
						.search-btn{
205
							font-size: (20/14)+em;
206
							position: absolute;
207
							right: 96px;
208
							top: 11px;
209
							color:#070607;
210
						}
211
					}
212
					.close-btn{
213
						position: absolute;
214
						top:6px;
215
						right: 20px;
216
						color:#070607;
217
						font-size:(26/14)+em;
218
						opacity: .5;
219
					}
220
				}
221
			}
222
			&.cart-parent{
223
				// &:hover,&.active{
224
				// 	.cart-box{
225
				// 		max-height: 2000px;
226
				// 		-webkit-transition-delay: 0s;
227
				// 		transition-delay: 0s;
228
				// 	}
229
				// }
230
				.cart-box{
231
					background: #fff;
232
					width: 370px;
233
					position: absolute;
234
					top:100%;
235
					right:0%;
236
					-webkit-transition: all .4s;
237
					transition: all .4s;
238
					-webkit-transition-delay: .3s;
239
					transition-delay: .3s;
240
					.content{
241
						padding:30px;
242
					}
243
					max-height: 0px;
244
					overflow: hidden;
245
					span{
246
						color:#ecae3d;
247
					}
248
					ul{
249
						display: block;
250
						position: relative;
251
						left:0px;
252
						margin: 0px;
253
						width: 100%;
254
						border-top:1px solid #ededed;
255
						margin-top: 25px;
256
						max-height: none !important;
257
						opacity: 1 !important;
258
 
259
						li{
260
							position: relative;
261
							padding:30px 30px 30px 100px;
262
							min-height: 141px;
263
							font-size: (17/14)+em;
264
							.close-btn{
265
								position: absolute;
266
								top:50%;
267
								margin-top: -15px;
268
								padding:0px;
269
								right:10px;
270
								font-size: (18/17)+em;
271
								color:#070707;
272
								opacity: .4;
273
								font-weight: 300;
274
							}
275
							span{
276
								display: block;
277
								font-size: (18/17)+em;
278
								padding-top: 10px;
279
							}
280
							img{
281
								position: absolute;
282
								top:30px;
283
								left:0px;
284
							}
285
						}
286
					}
287
					.row{
288
						margin-left: -5px;
289
						margin-right: -5px;
290
						>*{
291
							padding-left: 5px;
292
							padding-right: 5px;
293
						}
294
					}
295
					.btn{
296
						margin-top: 30px;
297
						border-radius: 0px;
298
						background: #070607 !important;
299
						padding:15px;
300
						color:#a1a1a1;
301
						font-size: 14px;
302
						border:none;
303
						// &:hover{
304
						// 	opacity: .8;
305
						// }
306
						&.btn-primary{
307
							background: #ecae3d !important;
308
							color:#fff;
309
 
310
						}
311
					}
312
				}
313
			}
314
		}
315
 
316
	}
317
	#menu{
318
		float: right;
319
	}
320
	.main-nav{
321
		.nav{
322
			float: none;
323
			&.top-nav{
324
				float: right;
325
				> li{
326
					float: left;
327
				}
328
			}
329
		}
330
	}
331
}
332
@media only screen and (min-width: 1001px){
333
	.header-section{
334
		position: absolute;
335
		top:0px;
336
		left:0px;
337
		width: 100%;
338
		z-index: 9999;
339
		&.style2{
340
			.col-sm-2{
341
				float: right;
342
				text-align: right;
343
			}
344
			.col-sm-10{
345
				float: left;
346
				text-align: left;
347
				width: auto;
348
			}
349
			.logo{
350
				display: block;
351
			}
352
 
353
		}
354
		&.style3{
355
			padding-top: 70px;
356
			background: #fff;
357
			border:none;
358
			.logo{
359
				position: absolute;
360
				left:50%;
361
				margin-left: -65px;
362
				top:-27px;
363
				margin-top: 0px;
364
			}
365
			ul li.search-parent .search-box{
366
				background: #101010;
367
				.form-control{
368
					background: #282828;
369
					border:none;
370
					.search-btn{
371
						color:#fff;
372
					}
373
				}
374
				.close-btn{
375
					color:#fff;
376
				}
377
			}
378
			ul li.cart-parent .cart-box{
379
				background: #070607;	color:#fff;
380
				ul{
381
 
382
					border-top:1px solid #070607;
383
					background: none;
384
					li{
385
						color:#fff;
386
						.close-btn{
387
							color:#fff;
388
						}
389
 
390
					}
391
				}
392
			}
393
			.mod-menu{
394
				border-top:1px solid #ececec;
395
				border-bottom:1px solid #ececec;
396
 
397
			}
398
			ul{
399
				li{
400
					a{
401
						color:#101010;
402
					}
403
				}
404
			}
405
			.col-sm-10{
406
				width: 100%;
407
				float: none;
408
			}
409
			.col-sm-2{
410
				float: none;
411
			}
412
			#menu{
413
				float: left;
414
				width: 90%;
415
				ul{
416
					&:first-child{
417
						float: left;
418
					}
419
					&:last-child{
420
						float: right;
421
					}
422
					li{
423
						ul{
424
							background: #101010;
425
							float: none !important;
426
							li{
427
								a{
428
									color:#fff;
429
 
430
								}
431
								border-color:#282828;
432
								&:hover,&.active{
433
									> a{
434
										color:#ecae3d;
435
									}
436
								}
437
							}
438
						}
439
						&.mega-menu{
440
							li{
441
								ul{
442
									li{
443
										a{
444
											color:#727272;
445
										}
446
										&:hover,&.active{
447
											a{
448
												color:#ecae3d;
449
											}
450
 
451
										}
452
									}
453
								}
454
							}
455
						}
456
					}
457
				}
458
			}
459
		}
460
		&.style4{
461
			background:none;
462
			padding-top: 50px;
463
			.mod-menu{
464
				background: #fff;
465
				padding-left: 20px;
466
				padding-right: 20px;
467
			}
468
			ul{
469
				li{
470
					a{
471
						color:#101010;
472
					}
473
				}
474
			}
475
			ul li ul{
476
				background: #ecae3d;
477
				li{
478
					border-color: #f0be64;
479
					a{
480
						color:#fff;
481
					}
482
				}
483
			}
484
			ul li.search-parent .search-box{
485
				background: #ecae3d;
486
				.form-control{
487
					background: #ecae3d;
488
					input{
489
						color:#fff;
490
					}
491
					border:1px solid #f0be64;
492
					.search-btn{
493
						color:#fff;
494
					}
495
				}
496
				.close-btn{
497
					color:#fff;
498
				}
499
			}
500
			ul li.cart-parent .cart-box{
501
				background: #ecae3d;	color:#fff;
502
				span{
503
					color:#fff;
504
				}
505
				ul{
506
 
507
					border-top:1px solid #f0be64;
508
					background: none;
509
					li{
510
						color:#fff;
511
						.close-btn{
512
							color:#fff;
513
						}
514
 
515
					}
516
				}
517
				.btn.btn-primary{
518
					background: #fff !important;
519
					color:#070607;
520
				}
521
			}
522
		}
523
		.mod-menu{
524
 
525
		}
526
		ul{
527
 
528
			li{
529
 
530
				&:hover,&.active{
531
					> a{
532
						color:#ecae3d;
533
					}
534
				}
535
 
536
				ul{
537
					opacity: 0;
538
					max-height: 0px;
539
					overflow-y: hidden;
540
 
541
					li{
542
						ul{
543
							max-height:none;
544
							opacity: 1;
545
						}
546
						&:hover{
547
							> ul{
548
								width: 230px;
549
 
550
 
551
							}
552
						}
553
					}
554
				}
555
				&:hover{
556
					> ul{
557
						opacity: 1;
558
						max-height: 2000px;
559
						overflow:visible;
560
						li{
561
							ul{
562
								overflow: hidden;
563
								opacity: 1;
564
							}
565
						}
566
					}
567
				}
568
				&.mega-menu{
569
					> ul{
570
						opacity: 0;
571
 
572
					}
573
					&:hover{
574
						> ul{
575
							opacity: 1;
576
							max-height: 2000px;
577
						}
578
					}
579
				}
580
				&.search-parent{
581
					position: static;
582
					.search-box{
583
						opacity: 0;
584
					}
585
					&:hover,&.active{
586
						.search-box{
587
							opacity: 1;
588
							max-height: 2000px;
589
							-webkit-transition-delay: 0s;
590
							transition-delay: 0s;
591
						}
592
					}
593
				}
594
				&.cart-parent{
595
					.cart-box{
596
						opacity: 0;
597
					}
598
					&:hover,&.active{
599
						.cart-box{
600
							opacity: 1;
601
							max-height: 2000px;
602
							-webkit-transition-delay: 0s;
603
							transition-delay: 0s;
604
						}
605
					}
606
					.cart-box{
607
 
608
 
609
						.btn{
610
 
611
							&:hover{
612
								opacity: .8;
613
							}
614
 
615
						}
616
					}
617
				}
618
			}
619
 
620
		}
621
 
622
	}
623
}
624
// @media only screen and (max-width: 813px){
625
// 	.header-section ul li a{
626
// 		padding-left: 10px;
627
// 		padding-right: 10px;
628
// 	}
629
// }
630
// @media only screen and (max-width: 1000px) and (min-width: 768px){
631
// 	.header-section.style3 #menu{
632
// 		width: 88%;
633
// 	}
634
// 	.header-section.style3 .logo{
635
// 		width: 70px;
636
// 		margin-left: -35px;
637
// 		top:-10px;
638
 
639
// 	}
640
// 	.header-section ul li a{
641
// 		padding:15px 9px;
642
// 	}
643
// 	.header-section .logo{
644
// 		margin-top:6px;
645
// 	}.header-section.style2 .logo{
646
// 		margin-top:11px;
647
// 	}.header-section.style4 .logo{
648
// 		margin-top:8px;
649
// 	}
650
// }
651
@media only screen and (max-width: 1000px){
652
	.header-section ul li.menu-icon{
653
		font-size: (24/14)+em;
654
		padding:19px 0 0 30px;
655
		a{
656
			margin: 0px;
657
			border:none;
658
			padding:10px;
659
		}
660
 
661
 
662
	}
663
	.header-section{
664
		padding-bottom: 20px;
665
		border:none;
666
		.logo{
667
			position: relative;
668
			z-index: 9999;
669
		}
670
		.main-nav{
671
			.nav{
672
				float: none;
673
				&.top-nav{
674
					position: absolute;
675
					right:0px;
676
					top:0px;
677
					width: 100%;
678
					z-index: 2;
679
					text-align: right;
680
					li{
681
						display: inline-block !important;
682
						vertical-align: top;
683
						float: none;
684
					}
685
				}
686
			}
687
		}
688
		.logo{
689
			padding-left: 10px;
690
		}
691
		#menu{
692
			float: none;
693
			border:none;
694
			box-shadow: none;
695
			margin:0 -15px;
696
			padding:25px 0;
697
			>ul{
698
				background: #fff;
699
				margin:0px;
700
				li{
701
					a{
702
						color:#242424;
703
						padding:15px 25px;
704
						text-transform: none;
705
					}
706
					position: relative;
707
					.arrow{
708
						width:20px;
709
						height: 20px;
710
 
711
						position: absolute;
712
						top:17px;
713
						right: 25px;
714
						cursor: pointer;
715
						z-index: 999;
716
						&:before{
717
							content: "";
718
							background: #242424;
719
							position: absolute;
720
							top:6px;
721
							left:0px;
722
							width: 15px;
723
							height: 3px;
724
						}
725
						&:after{
726
							content: "";
727
							background: #242424;
728
							position: absolute;
729
							top:0px;
730
							left:6px;
731
							height: 15px;
732
							width: 3px;
733
						}
734
					}
735
 
736
					&.hover,&.active{
737
 
738
						> a{
739
							color:#ecae3d;
740
						}
741
 
742
					}
743
					&.hover{
744
						> .arrow{
745
							&:after{
746
								display: none;
747
							}
748
						}
749
 
750
						>ul{
751
							display: block;
752
						}
753
					}
754
					border-bottom:1px solid #ececec;
755
					ul{
756
						display: none;
757
						max-height: none;
758
						position: relative;
759
						width: 100%;
760
						left:auto;
761
						margin:0px;
762
						top:auto;
763
						border-top:1px solid #ececec;
764
						li{
765
							float: none;
766
							width: 100%;
767
							padding:0px;
768
							border:none;
769
 
770
							a{
771
								text-transform: none;
772
								font-weight: 400;
773
								padding-left: 45px;
774
							}
775
							ul{
776
								li{
777
									a{
778
										padding-left: 65px;
779
									}
780
								}
781
								right: 0px;
782
							}
783
						}
784
					}
785
				}
786
			}
787
		}
788
		ul li.search-parent{
789
			&.active{
790
				>a {
791
					color:#ecae3d;
792
				}
793
				.search-box{
794
					max-height: none;
795
				}
796
			}
797
 
798
		}
799
		ul li.cart-parent{
800
			position: static;
801
			&.active{
802
				>a {
803
					color:#ecae3d;
804
				}
805
				.cart-box{
806
					width: 100%;
807
					max-height: 2000px;
808
					-webkit-transition-delay: 0s;
809
					transition-delay: 0s;
810
					ul{
811
						li{
812
							display: block !important;
813
							text-align: left;
814
						}
815
					}
816
					.col-xs-8{
817
						text-align: left;
818
					}
819
				}
820
			}
821
		}
822
		&.style3{
823
			.logo{
824
				margin-top: 5px;
825
			}
826
			.main-nav .nav.top-nav{
827
				top:32px;
828
			}
829
			ul{
830
				li{
831
					a{
832
						color:#000;
833
					}
834
				}
835
			}
836
			.main-nav {
837
				padding-top: 10px;
838
			}
839
			#menu{
840
				background: #101010;
841
				ul{
842
					background: none;
843
					li{
844
						border-color:#262626;
845
						a{
846
							color:#ffffff;
847
 
848
						}
849
						.arrow{
850
							&:before,&:after{
851
								background: #fff;
852
							}
853
						}
854
						&.active,&.hover{
855
 
856
							>a{
857
								color:#ecae3d;
858
							}
859
						}
860
						ul{
861
							border-color:#262626;
862
							li{
863
								a{
864
									color:#727272;
865
								}
866
							}
867
						}
868
					}
869
				}
870
			}
871
		}
872
		&.style4{
873
			background: #fff;
874
			padding-bottom: 0px;
875
			.logo{
876
				margin-bottom: 20px;
877
			}
878
			ul{
879
				li{
880
					a{
881
						color:#050505;
882
					}
883
				}
884
			}
885
			#menu{
886
				padding-top: 0px;
887
				padding-bottom: 0px;
888
				ul{
889
					background: #ecae3d;
890
					li{
891
						border-color:#f0be64;
892
 
893
						a{
894
							color:#fff;
895
 
896
						}
897
						.arrow{
898
							&:before,&:after{
899
								background: #fff;
900
							}
901
						}
902
 
903
						ul{
904
							border-color:#f0be64;
905
							li{
906
								border-color:#f0be64;
907
							}
908
						}
909
					}
910
				}
911
			}
912
		}
913
	}
914
 
915
 
916
}
917
@media only screen and (max-width:360px){
918
	.header-section .logo{
919
		width: 85px;
920
	}
921
	.header-section .main-nav .nav.top-nav{
922
		top:-7px;
923
	}
924
	.header-section ul li.menu-icon{
925
		padding-left: 5px;
926
	}
927
	.header-section.style3 .main-nav .nav.top-nav {
928
		top: 7px;
929
	}
930
}
931
@media only screen and (min-width:1001px){
932
	#menu{
933
		display: block;
934
	}
935
}
936
@media only screen and (max-width:1000px){
937
	.header-section {
938
		.col-sm-10,.col-sm-2{
939
			width: auto;
940
			float: none;
941
		}
942
 
943
 
944
	}
945
	.navbar-nav > li{
946
		float: none;
947
	}
948
}