// Variables // ========= // Colors @colorPrimary: #fc0606; @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{ color: #b21f6c; } .header-section ul li.active > a{ color:#a7a5a4; } .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 ==================== .section-primary { background-color: @colorPrimary; } .text-primary { color: #a7a5a4; } .btn.btn-prim { background-color: #a7a5a4; } 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; } .footer-social-icons li a:hover, .footer-social-icons li a.active { color: @colorPrimary; } .scrollup { background: #b21f6c 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; } #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; } .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: #b21f6c; } .pages-sidebar-links li a:hover, .pages-sidebar-links li a.active { 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-caption-buttonLeft, .cbp-l-caption-buttonRight { background-color: #fc0606; } .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; } .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-title-line.align-left { background-color: #a7a5a4; } .ce-title-line { background-color: #a7a5a4; } .tabstyle-13 .responsive-tabs li a:hover, .tabstyle-13 .responsive-tabs li.active, .tabstyle-13 .responsive-tabs li.active a { color: @colorPrimary; } .ce-price-table-1 .inner-box .price-circle .price { color: @colorPrimary; } .ce-price-table-1 .inner-box .price-circle span { color: @colorPrimary; } .smk_accordion .accordion_in.style6.act-light.acc_active > .acc_head { color: @colorPrimary; } .tp-caption.sbut2 a { background-color: @colorPrimary; } .ce-feature-box-64 .b-line-2 { background-color: @colorPrimary; } .ce-feature-box-64:hover .b-line-2{ background-color: @colorPrimary; } .ce-feature-box-9-main .ce-feature-box-9 .title span { border-bottom: 1px solid @colorPrimary; } .ce-feature-box-44 .name-box .name span { border-bottom: 1px solid @colorPrimary; } .ce-feature-box-56 .text-box .quote-icon i { color: @colorPrimary; } .ce-feature-box-55:hover .text-box{ background-color: #b21f6c; } .ce-feature-box-30 .icon { color: @colorPrimary; } .ce-feature-box-58 .text-box .top-line { background-color: @colorPrimary; } .ce-feature-box-3 .icon { color: @colorPrimary; } .cbp-l-filters-work .cbp-filter-item.cbp-filter-item-active { background-color: @colorPrimary; } .cbp-l-filters-work .cbp-filter-item:hover { background:@colorPrimary; } .ce-feature-box-16 .main-box .inner-box .subtext { color: @colorPrimary; } .ce-feature-box-45 .info-badge { background-color: @colorPrimary; } .ce-feature-box-29.dark-2 .icon { color: @colorPrimary; } .ce-feature-box-9-main .ce-feature-box-9.style-3 .title span { color: @colorPrimary; } .ce-price-table-1 .inner-box .price-circle { border-bottom: 1px solid @colorPrimary; } .ce-feature-box-34 .title { color: @colorPrimary; } .ce-feature-box-33 .img-box .overlay { background: fadeout(@colorPrimary, 6%); } .ce-feature-box-35 .newsletter-btn { border: 1px solid @colorPrimary; background-color: @colorPrimary; } .ce-feature-box-37 .date-box { border-bottom: 1px solid @colorPrimary; } .ce-feature-box-37 .date-box span { background-color: @colorPrimary; } .tp-shape.bg-prim { background-color: @colorPrimary; } .ce-feature-box-43 .text-box .top-line { background-color: @colorPrimary; } .ce-feature-box-69 .scicon-box { background-color: @colorPrimary; } .ce-feature-box-46 .subtitle { color: @colorPrimary; } .ce-feature-box-49 .text-box { background-color: @colorPrimary; } .ce-feature-box-1 .icon { color: @colorPrimary; } .ce-feature-box-1:hover { border: 1px solid @colorPrimary; background-color: @colorPrimary; } .tabstyle-15 .responsive-tabs li a:hover, .tabstyle-15 .responsive-tabs li.active, .tabstyle-15 .responsive-tabs li.active a { color: @colorPrimary; } .ce-feature-box-7 .img-box .postdate-box { background-color: @colorPrimary; } .ce-feature-box-7 .postinfo-box .title { border-bottom: 1px solid @colorPrimary; } .ce-feature-box-20:hover .imgbox .overlay .text-box .title-box { background-color: @colorPrimary; } .ce-feature-box-24:hover .img-box .overlay, .ce-feature-box-24.active .img-box .overlay { background: fadeout(@colorPrimary, 6%); } .ce-feature-box-27 .text-box .icon { color: @colorPrimary; } .ce-feature-box-19 .img-box .overlay { background-color: @colorPrimary; } #mc_embed_signup input#mc-embedded-subscribe, #mc_embed_signup input#mc-embedded-subscribe:focus { border: 1px solid @colorPrimary; background: @colorPrimary; } a.read-more.dark:hover { color: @colorPrimary; } .ce-feature-box-71 .text-box .top-line { background-color: @colorPrimary; } .ce-feature-box-15.dark .icon { color: @colorPrimary; } .ce-feature-box-15.dark:hover .title { color: @colorPrimary; } .ce-feature-box-15.dark:hover .icon { color: @colorPrimary; } .ce-feature-box-16:hover .text-box .inner-box { background-color: @colorPrimary; } .ce-feature-box-13 .icon { color: @colorPrimary; } .ce-feature-box-13 .title span { border-bottom: 1px solid @colorPrimary; } .divider-line.primary { border-bottom-color: @colorPrimary; } .ce-feature-box-31 .text-box .date-ifo { background-color: @colorPrimary; } .ce-feature-box-47 .icon { color: @colorPrimary; } .ce-feature-box-22 .main-box .text-box .subtext { background-color: @colorPrimary; } .ce-feature-box-43 .icon.primary { color: @colorPrimary; } .ce-feature-box-57.primary.active .text-box { background-color: @colorPrimary; } .progressbar-style6 { background: @colorPrimary; } .ce-feature-box-60 .title { color: @colorPrimary; } .ce-feature-box-68 .text-box { background-color: @colorPrimary; } .cforms_sty3 .button { background: @colorPrimary; border: 1px solid @colorPrimary; } // =========== shop ==================== .sp-feature-box-3 .img-box .badge { background-color: @colorPrimary; } .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; } .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; } .gallery .previews a:hover, .gallery .previews a.selected { border: 1px solid @colorPrimary; } // Border roundness .btn when (@borderType = "rounded") { border-radius: @bradius; }