/*
---- VARIABLES
*/

:root {
  --color-main: #181818;
  --font-base: "Flama";
  --font-main: "Univers";
}




/*
---- TYPO
*/

body, p {
  font-family: var(--font-base), "Nunito", "Helvetica", "Arial", sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
#mainMenu nav > ul > li > a,
#mainMenu nav > ul > li .dropdown-menu > li > a,
#mainMenu nav > ul > li .dropdown-menu > li > span,
#mainMenu nav > ul > li .dropdown-menu > li [class*="col-"] > ul > li > a,
#mainMenu nav > ul > li.mega-menu-item .mega-menu-content .mega-menu-title,
.header-extras > ul > li > a:not(.btn),
.header-extras > ul > li .topbar-dropdown > .title,
.page-menu nav > ul > li,
.page-menu nav > ul > li .dropdown-menu,
.sidebar-menu,
button,
a.btn:not([href]):not([tabindex]),
.btn,
.inspiro-slider .slide .slide-captions .strong,
#page-title .page-title>h1,
#footer,
#footer p,
#footer .widget .widget-title,
#footer .widget h4,
#footer .widget .widget-title ul li a,
#footer .widget h4 ul li a {
  font-family: var(--font-main), "Poppins", "Helvetica", "Arial", sans-serif;
}




/*
---- CUSTOM FONTS
*/

@font-face {
  font-family: 'Univers';
  src: url('../webfonts/UniversLTStd-ThinUltraCn.woff2') format('woff2'),
  url('../webfonts/UniversLTStd-ThinUltraCn.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Univers';
  src: url('../webfonts/UniversLTStd-BoldCn.woff2') format('woff2'),
  url('../webfonts/UniversLTStd-BoldCn.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../webfonts/UniversLTStd-BoldCnObl.woff2') format('woff2'),
  url('../webfonts/UniversLTStd-BoldCnObl.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-Ultralight.woff2') format('woff2'),
  url('../webfonts/Flama-Ultralight.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-UltralightItalic.woff2') format('woff2'),
  url('../webfonts/Flama-UltralightItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-Light.woff2') format('woff2'),
  url('../webfonts/Flama-Light.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-LightItalic.woff2') format('woff2'),
  url('../webfonts/Flama-LightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Flama Book';
  src: url('../webfonts/Flama-Book.woff2') format('woff2'),
  url('../webfonts/Flama-Book.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama Book';
  src: url('../webfonts/Flama-BookItalic.woff2') format('woff2'),
  url('../webfonts/Flama-BookItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Flama Basic';
  src: url('../webfonts/Flama-Basic.woff2') format('woff2'),
  url('../webfonts/Flama-Basic.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama Basic';
  src: url('../webfonts/Flama-BasicItalic.woff2') format('woff2'),
  url('../webfonts/Flama-BasicItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-Medium.woff2') format('woff2'),
  url('../webfonts/Flama-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-MediumItalic.woff2') format('woff2'),
  url('../webfonts/Flama-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-Semibold.woff2') format('woff2'),
  url('../webfonts/Flama-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-SemiboldItalic.woff2') format('woff2'),
  url('../webfonts/Flama-SemiboldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-Bold.woff2') format('woff2'),
  url('../webfonts/Flama-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-BoldItalic.woff2') format('woff2'),
  url('../webfonts/Flama-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-Extrabold.woff2') format('woff2'),
  url('../webfonts/Flama-Extrabold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-ExtraboldItalic.woff2') format('woff2'),
  url('../webfonts/Flama-ExtraboldItalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-Black.woff2') format('woff2'),
  url('../webfonts/Flama-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama';
  src: url('../webfonts/Flama-BlackItalic.woff2') format('woff2'),
  url('../webfonts/Flama-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}




/*
---- FIXED BANNERS
*/

.fullPageBanner-container {
  margin-top: 200px;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.fullPageBanner-image {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.fullPageBanner-image img {
  position: absolute;
  width: 1920px;
  height: 1080px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}




/*
---- HEADER
*/

#header + .inspiro-slider,
#header + #slider,
#header + .fullscreen,
#header + .halfscreen,
#header + #google-map {
  top: -80px;
  margin-bottom: -80px;
}

.header-extras > ul,
.header-extras > ul > li { height: 100% }

.header-extras > ul > li > a:not(.btn),
.header-extras > ul > li .topbar-dropdown > .title {
  height: 100%;
  display: flex;
  align-items: center;
}

#header .header-inner #logo a > img,
#header #header-wrap #logo a > img {
  height: 82%;
}
@media (max-width: 576px) {
  #header .header-inner #logo a > img,
  #header #header-wrap #logo a > img {
    height: 55%;
  }
}

#header nav > ul > li.dropdown > a {
  cursor: default !important;
}

@media (max-width: 992px)   {
  #header #logo {
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    justify-content: center;
  }
}




/*
---- SOCIAL ICONS
*/

.social-icons li a {
  margin-bottom: 0;
}




/*
---- PAGE TITLE
*/

#page-title { background-color: #252525; padding: 60px 0 }
#page-title .page-title *,
#page-title .breadcrumb ul li a,
#page-title .breadcrumb ul li:before { color: white }




/*
---- BUTTONS
*/

.tabs .nav-tabs .nav-link.active { border-color: var(--color-main) }
#scrollTop:after, #scrollTop:before { background-color: var(--color-main) }

button.btn,
button.btn.btn-outline:hover,
button.btn.btn-outline:focus,
button.btn.btn-outline:active,
button.btn.btn-outline.active,
.btn:not(.close):not(.mfp-close).btn-outline:hover,
.btn:not(.close):not(.mfp-close).btn-outline:focus,
.btn:not(.close):not(.mfp-close).btn-outline:active,
.btn:not(.close):not(.mfp-close).btn-outline.active,
a.btn:not([href]):not([tabindex]).btn-outline:hover,
a.btn:not([href]):not([tabindex]).btn-outline:focus,
a.btn:not([href]):not([tabindex]).btn-outline:active,
a.btn:not([href]):not([tabindex]).btn-outline.active,
.btn:not(.close):not(.mfp-close),
a.btn:not([href]):not([tabindex]),
.tags a:hover,
.post-item .post-image .post-meta-category {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
.page-menu.menu-outline nav > ul > li:hover > a, .page-menu.menu-outline nav > ul > li.active > a,
button.btn.btn-outline, .btn:not(.close):not(.mfp-close).btn-outline, a.btn:not([href]):not([tabindex]).btn-outline {
  border-color: var(--color-main);
  color: var(--color-main);
}

#search .btn-search-close { background-color: var(--color-main) }

a { color: var(--color-main) }

.text-theme,
.list-icon.list-icon-colored li:before,
.list-icon.icon-list-colored i,
.text-primary { color: var(--color-main) !important }

a:not(.btn):not(.badge):hover,
a:not(.btn):not(.badge):focus,
a:not(.btn):not(.badge):active,
#mainMenu nav > ul > li.hover-active > a,
#mainMenu nav > ul > li.hover-active > span,
#mainMenu nav > ul > li.current > a,
#mainMenu nav > ul > li.current > span,
#mainMenu nav > ul > li:hover > a,
#mainMenu nav > ul > li:hover > span,
#mainMenu nav > ul > li:focus > a,
#mainMenu nav > ul > li:focus > span{
  color: #d91e13 !important;
}

button.btn:hover,
button.btn:focus,
button.btn:not(:disabled):not(.disabled):active,
button.btn:not(:disabled):not(.disabled).active,
.btn:not(.close):not(.mfp-close):hover,
.btn:not(.close):not(.mfp-close):focus,
.btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled):active,
.btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled).active,
a.btn:not([href]):not([tabindex]):hover, a.btn:not([href]):not([tabindex]):focus,
a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled):active,
a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled).active,
.bg-dark,
.post-meta-category.premium {
  background-color: var(--color-main) !important;
  border-color: var(--color-main);
  color: white !important;
  text-decoration: none;
}

.flickity-button:hover { background-color: var(--color-main) }

.post-item .post-image .post-meta-category a { color: white !important }




/*
---- TEXTS
*/

.heading-text.heading-section > h2:before { background-color: var(--color-main) }
.tabs .nav-tabs .nav-link.active,
.comments .comment_number span,
.comments .comment .text .comment-reply-link { color: var(--color-main) }
.heading-text h4 {
  font-size: 21px;
  letter-spacing: 0;
}




/*
---- CARD SHOP CATEGORY
*/

.shop-category-box .shop-category-box-title {
  bottom: 0;
  padding: 10px 0;
}




/*
---- CARD RADIO
*/

.card-radio {
  cursor: pointer;
}

.card-radio input[type='radio'] {
  position: absolute;
  opacity: .01;
}

.card-custom-radio {
  width: 28px;
  height: 28px;
  border-radius: 100%;
  border: 1px solid rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
}

.card-custom-radio i {
  margin-left: 1px;
  margin-top: 1px;
}

.card-radio input[type='radio']:checked + .card-custom-radio {
  background-color: #007bff;
  color: white;
  border-color: transparent;
}




/*
---- CARD PRODUCT
*/

.product .product-sale,
.product .product-sale-off { background-color: #ffb20e }
.product .product-new { background-color: #2250fc }
.product .product-hot { background-color: var(--color-main) }
.product .product-image, .widget-shop .product .product-image img { border: 2px solid var(--color-main) }
.widget-shop .product .product-image { border: 0 }

.shop .product .product-image { padding-top: 136%; position: relative }
.shop .product .product-image > a,
.shop .product .product-image img { position: absolute; top: 0; object-fit: cover }
.shop .product .product-title { max-width: none; padding-right: 1em }
.shop .product .product-title h3,
.shop .product .product-title h3 a,
.shop .product .product-price ins { font-size: 16px }
.shop .product .product-price { width: auto; float: none; flex-shrink: 0; text-align: left; opacity: .5; margin-top: .3em }



/*
---- CARD CATEGORY
*/

.shop-category-box { padding-top: 60%; position: relative }
.shop-category-box img { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover }
.shop-category-box .shop-category-box-title {
  height: 60%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.shop-category-box .shop-category-box-title h5 { color: white }
.shop-category-box .shop-category-box-title small { color: white; opacity: .7 }




/*
---- BG OVERLAY
*/

.bg-overlay[data-style="10-2"] {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0.99)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0.99) 100%);
  opacity: 1;
}




/*
---- TABLE
*/

.table thead th { border-bottom-width: 1px }




/*
---- HOME SLIDER
*/

.inspiro-slider { height: 54vh }
.inspiro-slider .slide .slide-captions .strong { font-size: 14px !important }
.inspiro-slider .slide .slide-captions h2 { font-size: 55px }
@media (max-width: 992px) {
  .inspiro-slider { height: 60vh }
  .inspiro-slider .slide .slide-captions .strong { font-size: 13px !important }
  .inspiro-slider .slide .slide-captions h2 { font-size: 30px }
}

.flickity-page-dots .dot {
  margin: 0 7px;
  width: 15px;
  height: 15px;
  opacity: .5;
}
@media (max-width: 992px) {
  .flickity-page-dots { display: none }
  .inspiro-slider .flickity-prev-next-button {
    --size: 60px;
    opacity: 1;
    background-color: var(--color-main);
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inspiro-slider .flickity-prev-next-button.previous { left: 10px !important }
  .inspiro-slider .flickity-prev-next-button.next { right: 10px !important }
  .inspiro-slider .slide .container, .inspiro-slider .slide .container-wide {
    padding-left: 100px;
    padding-right: 100px;
  }
}

.flickity-page-dots .dot.is-selected { opacity: 1 }




/*
---- STRIPE
*/

#payment-form {
  width: 100%;
  max-width: 500px;
  margin: 30px auto 0;
  display: flex;
  position: relative;
}
#payment-form #card-element {
  width: 100%;
  background-color: rgba(0,0,0,.05);
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 15px;
}
#payment-form #card-element .__PrivateStripeElement {
  width: 100%;
}
#payment-form #submit {
  background-color: var(--color-main);
  color: white;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  padding: 0 20px;
  border-radius: 0 3px 3px 0;
}
#payment-form .result-message {
  position: absolute;
  top: 100%;
  width: 100%;
  padding-top: 10px;
}




/*
---- POST
*/

.post-meta-category.premium {
  right: auto !important;
  left: 10px;
}
.post-meta-description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}




/*
---- COMMENTS
*/

.comments .comment .text {
  padding: 0;
}




/*
---- PAGINATION
*/

.pagination-select .btn i {
  opacity: .5;
}
.pagination-select #select-page {
  border-color: #ebebeb;
  font-weight: 600;
  text-transform: uppercase;
  padding-left: 14px;
  padding-right: 20px;
  font-size: 11px;
  height: 30px;
  line-height: 19px;
  min-height: 30px;
}




.page-funding .sidebar {
  position: relative;
  background: white;
}
.page-funding .sidebar:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 1px;
  height: calc( 100% - 30px );
  box-shadow: 0 0 10px 8px rgba(0, 0, 0, .25);
  z-index: -1;
}
.funding-objective {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.funding-progress {
  flex: 1;
}
.funding-trophy svg {
  width: 40px;
  fill: var(--color-main);
}
.funding-progress-meter {
  position: relative;
  margin-top: 4px;
  width: 100%;
  height: 34px;
  background: #d6d6d6;
  border: #d6d6d6 4px solid;
  border-radius: 5px;
  overflow: hidden;
}
.funding-progress-bar {
  position: relative;
  z-index: 3;
  height: 100%;
  background: var(--color-main);
  background: linear-gradient(
          var(--color-main) 0%,
          #f0584f 30%,
          var(--color-main) 80%,
          #ae180f 100%
  );
  border-radius: 3px;
}
.funding-progress-bar-second {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 80%;
  width: 12px;
  height: calc( 100% - 6px );
  background: linear-gradient(to right,
  #d91e1300 0%,
  #d91e13 20%,
  #f0584f 30%,
  #d91e13 50%,
  #d91e1300 100%
  );
  border-radius: 3px;
  animation: funding-progress-bar-second 2.4s linear infinite;
}
.funding-progress-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--color-main);
  opacity: 0.25;
  transform: translateY(-50%);
}
.funding-progress-values {
  margin-top: 3px;
  font-size: 14px;
  text-align: right;
}
.product-funding .product-title {
  max-width: 100% !important;
}
@keyframes funding-progress-bar-second {
  0% {
    left: -30px;
    opacity: 0;
  }
  5% {
    left: -30px;
    opacity: 1;
  }
  50% {
    left: calc( 100% + 30px );
    opacity: 1;
  }
  55% {
    left: calc( 100% + 30px );
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}




.page-funding .sidebar {
  position: relative;
  background: white;
}
.page-funding .sidebar:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 1px;
  height: calc( 100% - 30px );
  box-shadow: 0 0 10px 8px rgba(0, 0, 0, .25);
  z-index: -1;
}
.funding-objective {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.funding-progress {
  flex: 1;
}
.funding-trophy svg {
  width: 40px;
  fill: var(--color-main);
}
.funding-progress-meter {
  position: relative;
  margin-top: 4px;
  width: 100%;
  height: 34px;
  background: #d6d6d6;
  border: #d6d6d6 4px solid;
  border-radius: 5px;
  overflow: hidden;
}
.funding-progress-bar {
  position: relative;
  z-index: 3;
  height: 100%;
  background: var(--color-main);
  background: linear-gradient(
          var(--color-main) 0%,
          #141414 30%,
          var(--color-main) 80%,
          #000000 100%
  );
  border-radius: 3px;
}
.funding-progress-bar-second {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 80%;
  width: 12px;
  height: calc( 100% - 6px );
  background: linear-gradient(to right,
  #d91e1300 0%,
  #000000 20%,
  #141414 30%,
  #000000 50%,
  #d91e1300 100%
  );
  border-radius: 3px;
  animation: funding-progress-bar-second 2.4s linear infinite;
}
.funding-progress-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--color-main);
  opacity: 0.25;
  transform: translateY(-50%);
}
.funding-progress-values {
  margin-top: 3px;
  font-size: 14px;
  text-align: right;
}
.product-funding .product-title {
  max-width: 100% !important;
}
@keyframes funding-progress-bar-second {
  0% {
    left: -30px;
    opacity: 0;
  }
  5% {
    left: -30px;
    opacity: 1;
  }
  50% {
    left: calc( 100% + 30px );
    opacity: 1;
  }
  55% {
    left: calc( 100% + 30px );
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}