/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

@font-face {
    font-family: 'RigSans';
    src: url('RigSansBlackRegular.woff2') format('woff2'),
        url('RigSansBlackRegular.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

h1 {
	 font-family: 'RigSans' !important;
}

h2 {
	 font-family: 'RigSans' !important;
}

h3 {
	 font-family: 'RigSans' !important;
}

h4 {
	 font-family: 'RigSans' !important;
}

.product-footer {
	padding-top: 50px;
}
.sliderhome img { 
	height: 480px;
	max-height: 480px;
	object-fit: cover;
}  

#main img {
	border-radius: 30px;
}

.borderlinks .col-inner {
	border-radius: 30px 0 0 30px;
}

.borderrechts .col-inner {
	border-radius: 0px 30px 30px 0px;
}

.bordertop img {
	border-radius: 30px 30px 0 0 !important;
}

.borderbottom img {
	border-radius: 0px 0px 30px 30px !important;
}

.has-equal-box-heights .box-image img, .equalize-box img {
  object-fit: contain !important;
}

.product-small img {
	height: 370px;
	max-height:370px;
	object-fit: cover !important;
}
.scroll-text p {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 35s linear infinite;
  -webkit-animation: my-animation 35s linear infinite;
  animation: my-animation 35s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
} 
.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: running !important;
  }
}

/* Enable animation */
.enable-animation .marquee__content {
  animation: scroll 30s linear infinite;
}

/* Reverse animation */
.marquee--reverse .marquee__content {
  animation-direction: reverse;
}

/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
  animation-play-state: running;
}

/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
  max-width: fit-content;
}

/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
  animation-name: scroll-abs;
}

@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}

/* Other page demo styles */
.marquee__content > * {
  flex: 0 0 auto;
  color: white;
  margin: 2px;
  text-align: center;
}


* {
  box-sizing: border-box;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

.product-footer {
	padding-top: 10px;
}

}