// Variables
// =========

// Colors
@colorPrimary: #443b97;
@colorSecondary: #e54b84;
@primaryDark: #332b7b;
@secondaryDark: #ce2e69;
@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;
}

.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: @colorSecondary;
}
.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;
}  
.header-section ul li .number {
    background: @colorSecondary none repeat scroll 0 0 !important;
}


// theme styles


.tp-caption.offerbadge {
    background-color: @colorSecondary;
}
.btn.btn-second {
    background-color: @colorSecondary;
}
.domain-search-home-3 #search-submit {
    background-color: @colorPrimary;
}
.ce-feature-box-1 {
    background-color: @colorPrimary;
    border: 2px solid @colorPrimary;
}
.ce-feature-box-1:hover, .ce-feature-box-1.active {
    border: 2px solid @colorPrimary;
}
.ce-feature-box-1:hover .icon, .ce-feature-box-1.active .icon {
    color: @colorPrimary;
}
.ce-feature-box-1:hover .title, .ce-feature-box-1.active .title {
    color: @colorPrimary;
}
.ce-feature-box-1:hover .btn-circle, .ce-feature-box-1.active .btn-circle {
    border: 1px solid @colorPrimary;
    color: @colorPrimary;
}
.ce-sub-title {
    color: @colorPrimary;
}
.ce-feature-box-2 .icon {
    color: @colorPrimary;
}
.ce-feature-box-2:hover .title, .ce-feature-box-2.active .title {
    color: @colorPrimary;
}
.ce-price-table-1 .bottom-box {
    background-color: @colorPrimary;
}
.ce-price-table-1 .price-circle .price {
    color: @colorPrimary;
}
.ce-price-table-1 .price-circle {
    border-bottom: 1px solid @colorPrimary;
}
.ce-price-table-1 .price-circle i {
    color: @colorPrimary;
}
.ce-pricing-overlay-bottom .dark-overlay {
    background: fadeout(@primaryDark, 25%);
}
.ce-price-table-1:hover, .ce-price-table-1.active {
    background-color: @colorSecondary;
}
.ce-price-table-1:hover .bottom-box, .ce-price-table-1.active .bottom-box {
    background-color: @secondaryDark;
}
.ce-feature-box-4 {
    background-color: @colorSecondary;
}
.ce-feature-box-3 {
    background-color: @colorPrimary;
}
.ce-feature-box-6 {
    background-color: @primaryDark;
}
.ce-feature-box-5 .item-holder .text-box {
    background-color: @colorPrimary;
}
.ce-feature-box-5 .btn-circle.primary {
    border: 1px solid @colorPrimary;
    color: @colorPrimary;
}
.ce-feature-box-8 .icon {
    color: @colorPrimary;
}
.btn.btn-prim {
    background-color: @colorPrimary;
}
.btn.btn-border.secondary:hover {
    background-color: @colorSecondary;
    border-color: @colorSecondary;
}
.btn.btn-border.secondary {
    border-color: @colorSecondary;
    color: @colorSecondary;
}
.ce-feature-box-9-main .border-box {
    border: 2px solid @colorPrimary;
}
.text-primary {
	color: @colorPrimary;
}
.text-secondary {
	color: @colorSecondary;
}
.ce-feature-box-10 .text-box {
    background-color: @colorPrimary;
}
.ce-feature-box-10 .text-box .client-holder .img-circle {
    background-color: @colorSecondary;
}
.ce-feature-box-10 .text-box .client-holder .img {
    background-color: @secondaryDark;
}
.ce-feature-box-11 {
    background-color: @primaryDark;
}
.slide-controls-2 .owl-theme .owl-controls .owl-page.active span {
    background-color: @colorSecondary;
    border: 1px solid @colorSecondary;
}
.tabstyle-7 .responsive-tabs li a:hover, .tabstyle-7 .responsive-tabs li.active, .tabstyle-7 .responsive-tabs li.active a {
    background-color: @colorPrimary;
    border-right: 1px solid @colorPrimary;
}
.ce-feature-box-13 .bottom-box {
    background-color: @colorPrimary;
}
.tab-btn-circle.primary {
    border: 1px solid @colorPrimary;
    color: @colorPrimary;
}
a.read-more {
    color: @colorPrimary;
}
.parallax-overlay.primary {
    background: fadeout(@colorPrimary, 10%);
}
.ce-feature-box-15 .offer-badge {
    background-color: @colorSecondary;
}
.text-secondary {
    color: @colorSecondary;
}
.btn.btn-second {
    background-color: @colorSecondary;
}
.slide-controls-3 .owl-theme .owl-controls .owl-page.active span {
    background-color: @colorSecondary;
    border: 1px solid @colorSecondary;
}
.ce-sc-icons li a {
    background-color: @colorPrimary;
}
.ce-sc-icons li a:hover, .ce-sc-icons li a.active {
    background-color: @colorSecondary;
}
.ce-newsletter-submit-1 {
    background-color: @colorPrimary;
    border: 1px solid @colorPrimary;
}
.section-primary {
    background-color: @colorPrimary;
}
.tp-caption.list-icon.color-primary i {
    color: @colorPrimary;
}
.domain-search-home-2 #search-submit {
    background-color: @colorSecondary;
}
.ce-feature-box-17 {
    background-color: @colorPrimary;
    border: 1px solid @colorPrimary;
}
.ce-feature-box-17:hover, .ce-feature-box-17.active {
    border: 1px solid @colorPrimary;
}
.ce-feature-box-17:hover .circle, .ce-feature-box-17.active .circle {
    border: 1px solid fadeout(@colorPrimary, 25%);;
    color: @colorPrimary;
}
.ce-feature-box-17:hover .circle h4, .ce-feature-box-17.active .circle h4 {
    color: @colorPrimary;
}
.ce-feature-box-17:hover .btn.btn-border.white, .ce-feature-box-17.active .btn.btn-border.white {
    border: 1px solid @colorPrimary;
    color: @colorPrimary;
}
.ce-feature-box-18:hover .icon, .ce-feature-box-18.active .icon {
    background-color: @colorPrimary;
}
.ce-feature-box-18:hover .title, .ce-feature-box-18.active .title {
    color:  @colorPrimary;
}
.parallax-overlay.primary-dark {
    background: fadeout(@primaryDark, 10%);
}
.ce-price-table-1:hover, .ce-price-table-1.active {
    background-color: @colorSecondary;
}
.ce-price-table-1:hover .bottom-box, .ce-price-table-1.active .bottom-box {
    background-color: @secondaryDark;
}
.tp-caption.offerbadge.bg-primary {
    background-color: @colorPrimary;
}
.iconlist.primary li i {
    color: @colorPrimary;
}
.ce-feature-box-21 .btn-box {
    background-color: @colorPrimary;
}
.ce-price-table-2 {
    background-color: @colorPrimary;
}
.ce-price-table-2.active {
    background-color: @colorSecondary;
}
.ce-price-table-2 .price-circle {
    background-color: @colorPrimary;
}
.ce-feature-box-30 .offerbadge {
    background-color: @colorSecondary;
}
.ce-feature-box-31:hover .title, .ce-feature-box-31:hover .icon, .ce-feature-box-31.active .title, .ce-feature-box-31.active .icon {
    color: @colorPrimary;
}
.ce-feature-box-31:hover .title, .ce-feature-box-31:hover .icon, .ce-feature-box-31.active .title, .ce-feature-box-31.active .icon {
    color: @colorPrimary;
}
.ce-feature-box-32 .client-holder .img-circle {
    background-color: @colorSecondary;
}
.ce-feature-box-34:hover .icon, .ce-feature-box-34.active .icon {
    background-color: @colorSecondary;
    border: 1px solid @colorSecondary;
}
.ce-feature-box-34:hover .title, .ce-feature-box-34.active .title {
    color: @colorSecondary;
}
.ce-feature-box-35:hover, .ce-feature-box-35.active {
    background-color: @colorPrimary;
}
.post-infoicon {
    background-color: @colorPrimary;

}
.ce-price-table-3 th .title-header {
    background-color: @colorPrimary;
}
.ce-price-table-3 tr:nth-child(2n) {
    background: @colorPrimary none repeat scroll 0 0;
}
.ce-price-table-3 th .title-header.active {
    background-color: @colorSecondary;
}
.btn.btn-border.primary {
    border-color: @colorPrimary;
    color: @colorPrimary;
}
.btn.btn-border.primary:hover {
    background-color: @colorPrimary;
    border-color: @colorPrimary;
}
.ce-feature-box-24 .img-box {
    border: 1px solid @colorPrimary;
}
.ce-feature-box-24 .img-box .icon-box {
    background: fadeout(@colorPrimary, 25%);
}
.topbar.primary {
    background-color: @colorPrimary;
}
.ce-feature-box-23:hover, .ce-feature-box-23.active {
    border: 1px solid @colorPrimary;
}
.ce-feature-box-23:hover .title, .ce-feature-box-23.active .title {
    color: @colorPrimary;
}
.ce-feature-box-23:hover .inner-box .title-line, .ce-feature-box-23.active .inner-box .title-line {
    background-color: @colorPrimary;
}
.parallax-overlay.primary-dark {
    background: fadeout(@primaryDark, 10%);
}
.ce-price-table-4:hover, .ce-price-table-4.active {
    background-color: @colorPrimary;
}
.ce-price-table-4:hover .inner-box .price-circle, .ce-price-table-4.active .inner-box .price-circle {
    color: @colorSecondary;
}
.ce-price-table-4:hover .inner-box .price-circle .price, .ce-price-table-4.active .inner-box .price-circle .price {
    color: @colorSecondary;
}
.ce-price-table-5:hover .inner-box, .ce-price-table-5.active .inner-box {
    background-color: @colorPrimary;
    border: 1px solid @colorPrimary;
}
.ce-price-table-5 .inner-box {
    border: 1px solid @colorPrimary;
}
.ce-price-table-5:hover .inner-box .price-circle, .ce-price-table-5.active .inner-box .price-circle {
    color: @colorPrimary;
}
.ce-price-table-5:hover .inner-box .price-circle, .ce-price-table-5.active .inner-box .price-circle {
    border: 3px solid @colorPrimary;
}
.ce-price-table-5:hover .inner-box .price-circle .price, .ce-price-table-5.active .inner-box .price-circle .price {
    color: @colorPrimary;
}
.pagenation-holder .breadcrumb li.current a {
    color: @colorPrimary;
}
.personal-info li {
    color: @colorPrimary;
}
.slide-controls-4 .owl-theme .owl-controls .owl-page.active span {
    background-color: @colorPrimary;
    border: 1px solid @colorPrimary;
}
.slide-controls-4 .owl-theme .owl-controls .owl-page span {
    background-color: @colorPrimary;
    border: 1px solid @colorPrimary;
}
.iconlist li i {
    color: @colorPrimary;
}
.ce-feature-box-25 .img-box .text-box .sc-icons-box {
    background-color: @colorPrimary;
}
.ce-feature-box-19:hover .icon, .ce-feature-box-19:hover .title, .ce-feature-box-19.active .icon, .ce-feature-box-19.active .title {
    color: @colorPrimary;
}
.ce-price-table-1:hover .bottom-box, .ce-price-table-1.active .bottom-box {
    background-color: @secondaryDark;
}
.table-style-3 th {
    background: @colorPrimary none repeat scroll 0 0;
}
#domain-search-holder #searchsubmit {
    background-color: @colorPrimary;
}
.pages-tags li a:hover, .pages-tags li a.active {
    background-color: @colorPrimary;
}
.section-primary-dark {
    background-color: @primaryDark;
}
.domain-pricing-table-holder {
    background-color: @colorPrimary;
}
.table-style-2 tr:nth-of-type(2n+1) {
    background: @primaryDark none repeat scroll 0 0;
}
.table-style-2 tr:nth-of-type(2n) {
    background: @colorPrimary none repeat scroll 0 0;
}
.table-style-2 th {
    color: @colorPrimary;
}
.btn.btn-second-2 {
    background-color: @colorSecondary;
}
.ce-price-table-1:hover .bottom-box, .ce-price-table-1.active .bottom-box {
    background-color: @secondaryDark;
}
.ce-feature-box-20 .client-holder .img-circle {
    background-color: @colorPrimary;
}
.ce-feature-box-22:hover .icon, .ce-feature-box-22.active .icon {
    background-color: @colorPrimary;
    border: 1px solid @colorPrimary;
}
.ce-feature-box-22:hover .title, .ce-feature-box-22.active .title {
    color: @colorPrimary;
}
.post-date-box {
    background-color: @colorPrimary;
}
.blog-pagenation li a:hover, .blog-pagenation li a.active {
    background-color: @colorPrimary;
    border: 1px solid @colorPrimary;
}
.pages-sidebar-links li a:hover, .pages-sidebar-links li a.active {
    color: @colorPrimary;
}
.ce-feature-box-27 {
    background-color: @colorPrimary;
}
.ce-feature-box-28 {
    background-color: @colorPrimary;
}
.ce-feature-box-28 {
    background-color: @colorPrimary;
}
.ce-feature-box-29 .img-box .badge {
    background-color: @colorPrimary;
}
.ce-feature-box-29 .img-box a.view-btn {
    background: fadeout(@colorPrimary, 25%);
}
.sp-feature-box-4 .submit-btn {
    background-color: @colorSecondary;
    border: 1px solid @colorSecondary;
}

.sky-form .button {
    background-color: @colorPrimary;
}
.sky-form .input:hover input,
.sky-form .select:hover select,
.sky-form .textarea:hover textarea,
.sky-form .radio:hover i,
.sky-form .checkbox:hover i,
.sky-form .toggle:hover i,
.sky-form .ui-slider-handle:hover {
	border-color: @colorPrimary;
}
.sky-form .rating input + label:hover,
.sky-form .rating input + label:hover ~ label {
	color: @colorPrimary;
}
.sky-form .input input:focus,
.sky-form .select select:focus,
.sky-form .textarea textarea:focus,
.sky-form .radio input:focus + i,
.sky-form .checkbox input:focus + i,
.sky-form .toggle input:focus + i {
	border-color: @colorPrimary;
}
.sky-form .radio input + i:after {
	background-color: @colorPrimary;	
}
.sky-form .checkbox input + i:after {
	color: @colorPrimary;
}
.sky-form .radio input:checked + i,
.sky-form .checkbox input:checked + i,
.sky-form .toggle input:checked + i {
	border-color: @colorPrimary;	
}
.sky-form .rating input:checked ~ label {
	color: @colorPrimary;	
}

































// Border roundness
.btn when (@borderType = "rounded") {
	border-radius: @bradius;
}