// Variables // ========= // Colors @colorPrimary: #a9cd2e; @colorSecondary: #b2c81e; @colorTertiary: #38cef9; @colorBg: white; @bradius: 5px; // Metrics @boxWidth: 1240px; // Other @layoutType: "wide"; @borderType: "square"; @outerBgType: "color"; @outerBgColor: @colorSecondary; @outerBgImage: ""; @preloader: ""; // Mixins .animation(@animation) { -webkit-animation: @animation; animation: @animation; } .transform(@transform) { -webkit-transform: @transform; -ms-transform: @transform; // IE9 only transform: @transform; } // Styles // ====== // Backgrounds body { background: @colorBg !important; } body when (@layoutType = "boxed") and (@outerBgType = "color") { background: @outerBgColor !important; } body when (@layoutType = "boxed") and (@outerBgType = "pattern") and not (@outerBgImage = "") { background: url(@outerBgImage) @colorBg repeat left top !important; } html when (@layoutType = "boxed") and (@outerBgType = "image") and not (@outerBgImage = "") { height: 100%; background: url(@outerBgImage) @colorBg repeat center top / cover fixed !important; } body when (@layoutType = "boxed") and (@outerBgType = "image") { background: none !important; } // Layout .wrapper-boxed when (@layoutType = "boxed") { max-width: @boxWidth; } // Colors .text-color-primary { color: @colorPrimary !important; } .bg-color-primary { background-color: @colorPrimary; } .bg-color-secondary { background-color: @colorSecondary; } .bg-color-tertiary { background-color: @colorTertiary; } .btn.btn-color-primary { background-color: @colorPrimary; } //theme styles // =========== mega menu ==================== .header-section ul li.active > a { color: @colorPrimary; } .header-section.style4 ul li ul { background: @colorPrimary; } .header-section ul li:hover > a, .header-section ul li.active > a { color: @colorPrimary; } .header-section.style4 ul li.search-parent .search-box { background: @colorPrimary; } .header-section.style4 ul li.search-parent .search-box .form-control { background: @colorPrimary; } @media only screen and (max-width: 1000px) { .header-section.style4 #menu ul { background: @colorPrimary; } } .header-section ul li .number { background: @colorPrimary; } .header-section.style4 ul li.cart-parent .cart-box { background: @colorPrimary; } .header-section ul li.mega-menu > ul > li ul li a:hover { color:@colorPrimary; } .header-section ul li.search-parent a.m-link { color: @colorPrimary; } .header-section ul li.cart-parent a.m-link { color: @colorPrimary; } .header-section.dark-dropdowns.style4 ul li:hover > a, .header-section.dark-dropdowns.style4 ul li.active > a { color: @colorPrimary; } .header-section.dark-dropdowns.style4 ul li.mega-menu > ul > li ul li a:hover { color: @colorPrimary; } .header-section.dark-dropdowns.style4 #menu ul li ul li:hover a span.sub-arrow, header-section.dark-dropdowns.style4 #menu ul li ul li.active a span.sub-arrow { color: @colorPrimary; } .header-section.dark-dropdowns.style2 ul li:hover > a, .header-section.dark-dropdowns.style2 ul li.active > a { color: @colorPrimary; } .header-section.dark-dropdowns.style2 ul li.mega-menu > ul > li ul li.active a { color: @colorPrimary; } .header-section.dark-dropdowns.style2 ul li.mega-menu > ul > li ul li a:hover { color: @colorPrimary; } .btn-top-1 { background-color: @colorPrimary; } .header-section.dark-dropdowns.style1 ul li:hover > a, .header-section.dark-dropdowns.style1 ul li.active > a { color: @colorPrimary; } .header-section.dark-dropdowns.style1 ul li.mega-menu > ul > li ul li a:hover { color: @colorPrimary; } .header-section.dark-dropdowns.style1 ul li:hover > a, .header-section.dark-dropdowns.style1 ul li.active > a { color: @colorPrimary; } .header-section.act-style-1 ul li.active > a { background-color: @colorPrimary !important; } .header-section.style3 #menu ul li.mega-menu li ul li:hover a, .header-section.style3 #menu ul li.mega-menu li ul li.active a { color: @colorPrimary; } .header-section.style3 #menu ul li.mega-menu li ul li:hover a, .header-section.style3 #menu ul li.mega-menu li ul li.active a { color: @colorPrimary; } .header-section.style3 #menu ul li ul li:hover > a, .header-section.style3 #menu ul li ul li.active > a { color: @colorPrimary; } .header-section.style3 #menu ul li ul li:hover a span.sub-arrow, header-section.style3 #menu ul li ul li.active a span.sub-arrow { color: @colorPrimary; } .header-section.style5.dark #menu ul li ul li:hover > a, .header-section.style5.dark #menu ul li ul li.active > a { color: @colorPrimary; } .header-section ul li.cart-parent .cart-box span { color: @colorPrimary; } .header-section ul li.cart-parent .cart-box span { color: @colorPrimary; } .header-section ul li.cart-parent .cart-box .btn.btn-primary { background: @colorPrimary none repeat scroll 0 0 !important; } // =========== corporate ==================== .tp-caption.sbut2 a { background-color: @colorPrimary; } .section-primary { background-color: @colorPrimary; } .text-primary { color: @colorPrimary; } .btn.btn-prim { background-color: @colorPrimary; } a.read-more { color: @colorPrimary; } .cbp-l-filters-buttonCenter .cbp-filter-item.cbp-filter-item-active { background-color: @colorPrimary; border: 1px solid @colorPrimary; } .cbp-l-filters-buttonCenter .cbp-filter-counter { background-color: @colorPrimary; } .cbp-l-filters-buttonCenter .cbp-filter-counter::after { border-top: 4px solid @colorPrimary; } .tp-caption.btn-style-2.Agency-PlayBtn i { color: @colorPrimary; } .ce-feature-box-12-main .ce-feature-box-12.primary { background-color: @colorPrimary; } .footer-social-icons li a:hover, .footer-social-icons li a.active { color: @colorPrimary; } .scrollup { background: @colorPrimary url(../images/scroll-top-arrow.png) no-repeat 15px 16px; } .btn.btn-border.prim { color: @colorPrimary; border-color: @colorPrimary; } .btn.btn-border:hover.prim { background-color:@colorPrimary; border-color:@colorPrimary; } .tabstyle-11 .responsive-tabs li a:hover, .tabstyle-11 .responsive-tabs li.active, .tabstyle-11 .responsive-tabs li.active a { color: @colorPrimary; } .tabstyle-11 .responsive-tabs li a:hover span, .tabstyle-11 .responsive-tabs li.active a span { color: @colorPrimary; } .ce-price-table-1:hover .inner-box .title, .ce-price-table-1.active .inner-box .title { color: @colorPrimary; } .ce-price-table-1:hover .inner-box .price-circle, .ce-price-table-1.active .inner-box .price-circle { background-color: @colorPrimary; } #togglePlay.pause { background: fadeout(@colorPrimary, 6%); } #togglePlay.play { background: fadeout(@colorPrimary, 6%); } .slide-controls-2 .owl-theme .owl-controls .owl-page.active span { background-color: @colorPrimary; border: 1px solid @colorPrimary; } .slide-controls-2 .owl-theme .owl-controls .owl-page span { border: 1px solid @colorPrimary; } .footer-tags li a:hover, .footer-tags li a.active { border: 1px solid @colorPrimary; color: @colorPrimary; } .newsletter-submit-btn { border: 1px solid @colorPrimary; background-color: @colorPrimary; } .iconlist-2 .icon { color: @colorPrimary; } .progressbar-style1 .progress-bar { color: @colorPrimary; } .fo-newsletter-submit-1.gyellow { background-color: @colorPrimary; border: 1px solid @colorPrimary; } .slide-controls-3 .owl-theme .owl-controls .owl-page.active span { background-color: @colorPrimary; border: 1px solid @colorPrimary; } .pagenation-holder .breadcrumb li.current a { color: @colorPrimary; } .pages-sidebar-links li a:hover, .pages-sidebar-links li a.active { color: @colorPrimary; } .smart-forms .btn-primary { background-color: @colorPrimary; } .iconlist li i { color: @colorPrimary; } .parallax-overlay.primary { background: fadeout(@colorPrimary, 6%); } ul.sitemap li a { color: @colorPrimary; } .error-search-box .input_submit { background-color: @colorPrimary; border: 1px solid @colorPrimary; } .tp-caption.sbut1 a { background-color: @colorPrimary; } .cbp-l-filters-button .cbp-filter-item.cbp-filter-item-active { background-color: @colorPrimary; } .cbp-l-filters-button .cbp-filter-counter { background-color: @colorPrimary; } .cbp-l-filters-button .cbp-filter-counter::after { border-top: 4px solid @colorPrimary; } .cbp-l-filters-button .cbp-filter-item:hover { color: @colorPrimary; } .cbp-l-caption-buttonLeft, .cbp-l-caption-buttonRight { background-color: @colorPrimary; } .cbp-l-filters-alignRight .cbp-filter-item.cbp-filter-item-active { background-color: @colorPrimary; border-color: @colorPrimary; } .cbp-l-filters-alignRight .cbp-filter-counter { background-color: @colorPrimary; } .cbp-l-filters-alignRight .cbp-filter-counter::after { border-top: 4px solid @colorPrimary; } .cbp-l-grid-masonry-projects .cbp-l-caption-buttonLeft, .cbp-l-grid-masonry-projects .cbp-l-caption-buttonRight { background-color: @colorPrimary; } .cbp-l-grid-mosaic .cbp-caption-activeWrap { background-color: @colorPrimary; background: fadeout(@colorPrimary, 6%); } .cbp-l-grid-mosaic-projects .cbp-caption-activeWrap { background-color: @colorPrimary; background: fadeout(@colorPrimary, 6%); } .cb-feature-box-1 .img-box .postdate-box { background-color: @colorPrimary; } .cb-feature-box-1 .postinfo-box .title a:hover { color: @colorPrimary; } .blog-pagenation li a:hover, .blog-pagenation li a.active { background-color: @colorPrimary; border: 1px solid @colorPrimary; } .ce-feature-box-31.primary { background-color: @colorPrimary; } .ce-feature-box-31 .icon { color: @colorPrimary; } .ce-title-line { background-color: @colorPrimary; } .ce-title-line.align-left { background-color: @colorPrimary; } .ce-feature-box-39:hover .inner-box, .ce-feature-box-39.active .inner-box { background-color: @colorPrimary; } .ce-feature-box-39 .inner-box { border: 1px solid @colorPrimary; } .ce-feature-box-38:hover .img-box .bg-circle-box .circle{ border:30px solid @colorPrimary; } .ce-feature-box-38 .text-box.primary { background-color: @colorPrimary; } .ce-feature-box-38 .img-box .bg-circle-box .sc-icons li a { background-color: @colorPrimary; } .slider-btn-8 .owl-theme .owl-controls .owl-buttons .owl-prev { background-color: @colorPrimary; } .slider-btn-8 .owl-theme .owl-controls .owl-buttons .owl-prev { background-color: @colorPrimary; } .slider-btn-8 .owl-theme .owl-controls .owl-buttons .owl-next { background-color: @colorPrimary; } .slider-btn-8 .owl-theme .owl-controls .owl-buttons .owl-prev:hover { background-color: @colorPrimary; } .ce-feature-box-42 .text-box .icon-b { color: @colorPrimary; } .ce-feature-box-5:hover .overlay, .ce-feature-box-5.active .overlay { background: fadeout(@colorPrimary, 6%); } .ce-feature-box-12 .icon { color: @colorPrimary; } .ce-feature-box-29 .main-box .text-box .subtext { background-color: @colorPrimary; } .ce-feature-box-29 .main-box .img-box .overlay { background: fadeout(@colorPrimary, 6%); } .ce-feature-box-13 .text-box .price { color: @colorPrimary; } .ce-feature-box-13 .text-box .features-list li i { color: @colorPrimary; } .ce-feature-box-14 .icon { color: @colorPrimary; } .ce-feature-box-21 .icon { background-color: @colorPrimary; } .ce-feature-box-6:hover .overlay, .ce-feature-box-6.active .overlay { background: fadeout(@colorPrimary, 6%); } .ce-feature-box-27 .newsletter-btn { border: 1px solid @colorPrimary; background-color: @colorPrimary; } .ce-feature-box-37:hover .img-box .overlay, .ce-feature-box-37.active .img-box .overlay { background: fadeout(@colorPrimary, 6%); } .ce-feature-box-2 .icon { color: @colorPrimary; } .ce-feature-box-33 .icon { color: @colorPrimary; } .progressbar-style6 { background: @colorPrimary; } .ce-feature-box-40 .img-circle { background-color: @colorPrimary; } .ce-feature-box-34 .date-box { background-color: @colorPrimary; } .ce-feature-box-42 .img-box .overlay .post-icon.primary { background-color: @colorPrimary; } .ce-feature-box-23 .icon { color: @colorPrimary; } .slider-btn-9 .owl-theme .owl-controls .owl-buttons .owl-prev { background-color: @colorPrimary; } .slider-btn-9 .owl-theme .owl-controls .owl-buttons .owl-next:hover { background-color: @colorPrimary; } .slider-btn-9 .owl-theme .owl-controls .owl-buttons .owl-next { background-color: @colorPrimary; } .slider-btn-9 .owl-theme .owl-controls .owl-buttons .owl-prev:hover { background-color: @colorPrimary; } .ce-feature-box-11:hover .overlay, .ce-feature-box-11.active .overlay { background: fadeout(@colorPrimary, 6%); } .ce-feature-box-43 .icon { color: @colorPrimary; } .ce-feature-box-43:hover, .ce-feature-box-43.active { border: 2px solid @colorPrimary; background-color: @colorPrimary; } .ce-feature-box-4:hover .btn { background-color: @colorPrimary; } .ce-feature-box-46 .icon { color: @colorPrimary; } .ce-feature-box-46 .icon { color: @colorPrimary; } .ce-feature-box-45 .newsletter-btn { border: 1px solid @colorPrimary; background-color: @colorPrimary; } .ce-feature-box-44 .icon { color: @colorPrimary; } .ce-feature-box-34.primary { background-color: @colorPrimary; } .ce-feature-box-3 .postinfo-box .primbox { background-color: @colorPrimary; } .ce-feature-box-7:hover .icon, .ce-feature-box-7.active .icon { background-color: @colorPrimary; border: 1px solid @colorPrimary; } .ce-feature-box-7 .icon { color: @colorPrimary; } .slider-btn-8 .owl-theme .owl-controls .owl-buttons .owl-next:hover { background-color: @colorPrimary; } .ce-feature-box-48 { background-color: @colorPrimary; } .ce-feature-box-50 .text-box .icon { color: @colorPrimary; } .ce-feature-box-25 .newsletter-btn.prim { border: 1px solid @colorPrimary; background-color: @colorPrimary; } .ce-feature-box-15 .main-box .img-box .overlay { background-color: @colorPrimary; } .text-box .subtext { background-color: @colorPrimary; } .ce-feature-box-15 .main-box .text-box .subtext { background-color: @colorPrimary; } // =========== shop ==================== .sp-feature-box-3 .img-box .badge { background-color: @colorPrimary; } .sp-feature-box-3 .img-box a.view-btn { background: fadeout(@colorPrimary, 25%); } .sp-sc-icons li a:hover, .sp-sc-icons li a.active { border: 1px solid @colorPrimary; color: @colorPrimary; } .sp-sb-links li a:hover, .sp-sb-links li a.active { color: @colorPrimary; } .gallery .previews a:hover, .gallery .previews a.selected { border: 1px solid @colorPrimary; } .sp-feature-box-4 .submit-btn:hover { background-color: @colorPrimary; border: 1px solid @colorPrimary; } .stars span i { color: @colorPrimary; } .tp-caption.fe-white-box-5 { border: 3px solid @colorPrimary; } .tp-caption.fe-white-box-5 .inner-box { background-color: @colorPrimary; } .sp-feature-box-2 { background-color: @colorPrimary; } // Border roundness .btn when (@borderType = "rounded") { border-radius: @bradius; }