// Variables
// =========
// Colors
@colorPrimary: #ff0051; //4064d7
@colorSecondary: #b2c81e; //b2c81e
@colorTertiary: #ffee00; //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.active > a,
.header-section ul li:hover > 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.active > a,
.header-section.dark-dropdowns.style4 ul li:hover > 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.active > a,
.header-section.dark-dropdowns.style2 ul li:hover > 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.active > a,
.header-section.dark-dropdowns.style1 ul li:hover > 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.active > a,
.header-section.dark-dropdowns.style1 ul li:hover > 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.active a,
.header-section.style3 #menu ul li.mega-menu li ul li:hover a {
  color: @colorPrimary;
}

.header-section.style3 #menu ul li.mega-menu li ul li.active a,
.header-section.style3 #menu ul li.mega-menu li ul li:hover a {
  color: @colorPrimary;
}

.header-section.style3 #menu ul li ul li.active > a,
.header-section.style3 #menu ul li ul li:hover > 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.active > a,
.header-section.style5.dark #menu ul li ul li:hover > 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;
}

.ce-feature-box-16:hover .text-box .title {
  color: @colorPrimary;
}

.ce-feature-box-16:hover .text-box .btn.btn-border.dark:hover {
  border-color: @colorPrimary;
  background-color: @colorPrimary;
}

.ce-feature-box-16:hover .text-box .btn.btn-border.dark {
  color: @colorPrimary;
  border-color: @colorPrimary;
}

.section-primary {
  background-color: @colorPrimary;
}

.text-primary {
  color: @colorPrimary;
}

.btn.btn-prim {
  background-color: @colorPrimary;
}

.ce-feature-box-11 .icon {
  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;
}

.ce-feature-box-13 .main-box .img-box .overlay {
  background: fadeout(@colorPrimary, 6%);
}

.ce-feature-box-3.primary .text-box {
  background-color: @colorPrimary;
}

.footer-social-icons li a.active,
.footer-social-icons li a:hover {
  color: @colorPrimary;
}

.scrollup {
  background: @colorPrimary url(../images/scroll-top-arrow.png) no-repeat 15px 16px;
}

.ce-feature-box-1 .img-box .overlay {
  background: fadeout(@colorPrimary, 6%);
}

.btn.btn-border.prim {
  color: @colorPrimary;
  border-color: @colorPrimary;
}

.btn.btn-border:hover.prim {
  background-color: @colorPrimary;
  border-color: @colorPrimary;
}

.ce-feature-box-19:hover .icon {
  color: @colorPrimary;
}

.ce-feature-box-22 .img-box .overlay.primary {
  background: fadeout(@colorPrimary, 6%);
}

.ce-feature-box-22 .img-box .overlay .text-box .icon {
  background-color: @colorPrimary;
}

.ce-feature-box-16.primary .text-box {
  background-color: @colorPrimary;
}

.ce-feature-box-16:hover .text-box .icon {
  color: @colorPrimary;
}

.ce-feature-box-25 .img-box .overlay {
  background: fadeout(@colorPrimary, 6%);
}

.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-feature-box-20 .text-box {
  border-bottom: 3px solid @colorPrimary;
}

.ce-feature-box-20.primary .text-box {
  background-color: @colorPrimary;
}

.ce-price-table-1.active .inner-box .title,
.ce-price-table-1:hover .inner-box .title {
  color: @colorPrimary;
}

.ce-price-table-1.active .inner-box .price-circle,
.ce-price-table-1:hover .inner-box .price-circle {
  background-color: @colorPrimary;
}

.ce-feature-box-26 .icon {
  color: @colorPrimary;
  border: 2px solid @colorPrimary;
}

.ce-feature-box-28.active .img-box-main,
.ce-feature-box-28:hover .img-box-main {
  background-color: @colorPrimary;
}

.ce-feature-box-28.active .img-box-main .img-box,
.ce-feature-box-28:hover .img-box-main .img-box {
  background-color: @colorPrimary;
}

#togglePlay.pause {
  background: fadeout(@colorPrimary, 6%);
}

#togglePlay.play {
  background: fadeout(@colorPrimary, 6%);
}

.ce-feature-box-30 .img-circle {
  background-color: @colorPrimary;
}

.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;
}

.ce-feature-box-36 .icon {
  color: @colorPrimary;
}

.ce-feature-box-35 .main-box .inner-box .subtext {
  color: @colorPrimary;
}

.footer-tags li a.active,
.footer-tags li a:hover {
  border: 1px solid @colorPrimary;
  color: @colorPrimary;
}

.newsletter-submit-btn {
  border: 1px solid @colorPrimary;
  background-color: @colorPrimary;
}

.iconlist-2 .icon {
  color: @colorPrimary;
}

.ce-feature-box-39 .icon {
  color: @colorPrimary;
}

.ce-feature-box-3:hover.white .text-box .title {
  color: @colorPrimary;
}

.ce-feature-box-3:hover.white .text-box .icon {
  color: @colorPrimary;
}

.progressbar-style1 .progress-bar {
  color: @colorPrimary;
}

.ce-feature-box-40 .img-box .icon-top {
  background-color: @colorPrimary;
}

.ce-feature-box-38 .img-box .text-box .title-line {
  background-color: @colorPrimary;
}

.fo-newsletter-submit-1.gyellow {
  background-color: @colorPrimary;
  border: 1px solid @colorPrimary;
}

.ce-feature-box-41 .img-box .overlay .sub-text {
  color: @colorPrimary;
}

.slide-controls-3 .owl-theme .owl-controls .owl-page.active span {
  background-color: @colorPrimary;
  border: 1px solid @colorPrimary;
}

.ce-post-holder-1 .text-box .blog-post-info span {
  color: @colorPrimary;
}

.pagenation-holder .breadcrumb li.current a {
  color: @colorPrimary;
}

.ce-feature-box-43 .main-box {
  background-color: @colorPrimary;
}

.iconlist.gyellow li i {
  color: @colorPrimary;
}

.cp-feature-box-1 .img-box .text-box .sc-icons-box {
  background: fadeout(@colorPrimary, 6%);
}

.pages-sidebar-links li a.active,
.pages-sidebar-links li a:hover {
  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.active,
.blog-pagenation li a:hover {
  background-color: @colorPrimary;
  border: 1px solid @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.active,
.sp-sc-icons li a:hover {
  border: 1px solid @colorPrimary;
  color: @colorPrimary;
}

.sp-sb-links li a.active,
.sp-sb-links li a:hover {
  color: @colorPrimary;
}

.gallery .previews a.selected,
.gallery .previews a:hover {
  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;
}
// user defined

.header-section .logo.mar-4 {
  margin-top: 20px;
}

.loader-item.style4 .cube1,
.loader-item.style4 .cube2 {
  background-color: #ff0051;
}

.footer-logo {
  img {
    width: 120px;
  }
}

.footer-section {
  background: #ff0051;
  color: #fff;
}

.fullscreen-bg {
  position: relative;
  width: 100%;
  padding-top: 42%;
  overflow: hidden;
}
@media only screen and (max-width: 769px) {
  .fullscreen-bg {
    padding-top: 75%;
  }
}

.fullscreen-bg__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
}