/*!
Theme Name: Instilled Kadence Child 
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.2
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

/* Theme customization starts here
-------------------------------------------------------------- */


/* Header */

.header-scroll-image,
.item-is-stuck .header-transparent-image {
  display: none;
}

.item-is-stuck .header-scroll-image {
  display: block;
}




/* Swop image for case studies */

.thumbnail-image {cursor: pointer;}


.home .wp-block-kadence-header.header-desktop-transparent .kb-header-container.item-at-start,
.page-id-14127 .wp-block-kadence-header.header-desktop-transparent .kb-header-container.item-at-start  {
    background: transparent !important;
}

.hero-animated::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image: url('/wp-content/uploads/2025/03/Instillled_SoundWave_repeat1.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  opacity: 0.2;
  transform-origin: center; /* Expand from the centre */
  transform: scaleX(0);     /* Start collapsed */
  animation: expandFromCenter 3s ease-out forwards;
  z-index: 0;
}

@keyframes expandFromCenter {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1.4);
    opacity: 0.2;
  }
}


/* B&B Image Slide 1 */

:root {
  --bb-image-slide-1-width: 55px;
}

.bb-image-slide-1 {
	overflow: hidden;
}

.bb-image-slide-1 .wp-block-kadence-image {
  transition: transform 0.5s cubic-bezier(0.75, 0, 0.85, 1);
}

.bb-image-slide-1
  .kt-row-column-wrap
  > .wp-block-kadence-column:hover
  .wp-block-kadence-image {
  transform: translateX(calc(var(--bb-image-slide-1-width) * -1));
  transform: translatex(-50px);
}

.bb-image-slide-1 .bb-image-slide-1-cta {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.bb-image-slide-1 .bb-image-slide-1-content {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}

/* Vertical Marquee */

.ins-vertical-marquee-1 {
  position: relative;
  overflow: hidden;
}

.ins-vertical-marquee-1 > .kt-inside-inner-col {
  position: absolute;
  top: 0;
  right: -8px;
  left: 0;
}

.ins-vertical-marquee-1 .down .kt-inside-inner-col {
  animation: scrollDown 20s linear infinite;
}

.ins-vertical-marquee-1 .up .kt-inside-inner-col {
  animation: scrollUp 20s linear infinite;
}

@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes scrollUp {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-50%);
  }
}

@media all and (max-width: 767px) {
  .ins-vertical-marquee-1 {
    height: auto;
    width: 100%;
  }

  .ins-vertical-marquee-1 > .kt-inside-inner-col {
    position: relative;
    overflow: hidden;
    width: 400%;
  }
  
  .ins-vertical-marquee-1>.kt-inside-inner-col>.wp-block-kadence-column {
    
    flex: auto !important;
  }

  .ins-vertical-marquee-1 :is(.down, .up) .kt-inside-inner-col :is(figure, img) {
    width: 100%;
    height: auto;
  }

  .ins-vertical-marquee-1 .down .kt-inside-inner-col {
    animation: scrollRight 20s linear infinite;
  }

  .ins-vertical-marquee-1 .up .kt-inside-inner-col {
    animation: scrollLeft 20s linear infinite;
  }

  @keyframes scrollRight {
    0% {
      transform: translateX(-50%);
    }
    100% {
      transform: translateX(0%);
    }
  }

  @keyframes scrollLeft {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}

@media all and (max-width: 1024px) {
  .ins-image-slide-1
	.kt-row-column-wrap
	> .wp-block-kadence-column
	.wp-block-kadence-image {
	transform: translateX(calc(var(--bb-image-slide-1-width) * -1));
  }
}

@media only screen and (max-width: 768px) {
  .ticker-header {
    padding-right: 100px !important;
  }
}