#pk_flex_content{
	overflow: hidden;
}

#pk_flex_content .flex_layout.usps{
	position: relative;
	padding-block: 50px;
}

#pk_flex_content .flex_layout.usps .heading{
	margin-bottom: 10px;
}

.site-id-2 #pk_flex_content .flex_layout.usps .heading{
	font-size: 20px;
}

/* Begin bootje animatie */
.site-id-1 .flex_layout.usps:after {
  content: '';
  width: 200vw;
  height: 15px;
  position: absolute;
  left: -100vw;
  top: -14px;
  /*background-color: var(--pseudu-color);*/
  background-color: #e8ecef;
  mask-image: url("data:image/svg+xml,%3Csvg width='34' height='10' viewBox='0 0 34 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.89 7.03L25.42 0L16.96 7.03L8.47 0L0 7.03V9.31H33.89V7.03Z' fill='currentColor'/%3E%3C/svg%3E%0A");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='34' height='10' viewBox='0 0 34 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.89 7.03L25.42 0L16.96 7.03L8.47 0L0 7.03V9.31H33.89V7.03Z' fill='currentColor'/%3E%3C/svg%3E%0A");

  mask-repeat: repeat;
  mask-position: var(--bootje-pos, left bottom); 
  -webkit-mask-position: var(--bootje-pos, left bottom);
  mask-size: contain;

  z-index: 3;
  transition: none;
}


.site-id-1 .flex_layout.usps:before {
  content: '';
  position: absolute;
  top: -68px;
  left: var(--bootje-left, 70%); /* Scrollpositie wordt aangepast via JS */
  height: 64px;
  width: 59px;

  background-image: url("data:image/svg+xml,%3Csvg width='59' height='64' viewBox='0 0 59 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M58.746 49.5729L44.0646 63.7318H14.6814L-3.8147e-06 49.5729H58.746Z' fill='%23F5B335'/%3E%3Cpath d='M0.000728607 42.5102H44.0653V0.0534058L0.000728607 42.5102Z' fill='%23DAA2AB'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  z-index: 3;

  /* Standaard: zacht deinen */
  animation: bootje-deint 2s ease-in-out infinite;
  transition: none;
  transform-origin: center;
}

/* Hover: tijdelijk schommelen */
.site-id-1 .flex_layout.usps:hover:before {
  animation: bootje-schommelt 0.6s ease-in-out;
}

/* Zodra je geen hover meer hebt, gaat het bootje weer deinen */
.site-id-1 .flex_layout.usps:before:not(:hover) {
  animation: bootje-deint 2s ease-in-out infinite;
}
@keyframes bootje-deint {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@keyframes bootje-schommelt {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-3px) rotate(-5deg); }
  50%  { transform: translateY(0) rotate(5deg); }
  75%  { transform: translateY(-2px) rotate(-3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.site-id-1 .usp_icon {
  display: inline-block;
  transition: transform 3.3s ease;
}

.site-id-1 .usp_item:hover .usp_icon {
  animation: draaien-molen 3.4s linear infinite;
}

@keyframes draaien-molen {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Einde bootje animatie */

/* Begin Frizzle animatie */

.site-id-2 .poppetje-container {
  position: absolute;
  top: -80px;
  left: 90%;
  transform: translateX(-50%);
  width: 85px;
  height: 84px;
  z-index: 10;
  pointer-events: none;
}
.site-id-2 .spring-wrapper {
  width: 100%;
  height: 100%;
  animation: poppetje-huppelt 2s ease-in-out infinite;
  transform: translateY(0);
  pointer-events: auto;
}
.site-id-2 .poppetje {
  width: 100%;
  height: 100%;
  background-image: url("https://friskinderopvang.nl/wp-content/uploads/2025/03/3dasd.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: bottom center;
  transform: rotate(0);
}
@keyframes poppetje-huppelt {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-4px); }
  40%  { transform: translateY(0); }
  60%  { transform: translateY(-2px); }
  80%  { transform: translateY(0); }
  90%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.site-id-2 .poppetje-container.salto .spring-wrapper {
  animation: salto-spring 0.8s ease-in-out;
}

.site-id-2 .poppetje-container.salto .poppetje {
  animation: salto-draai 0.8s ease-in-out;
}

@keyframes salto-spring {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-65px); }
  60%  { transform: translateY(-65px); }
  100% { transform: translateY(0); }
}

@keyframes salto-draai {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.site-id-2 .stofwolk {
        position: absolute;
        bottom: -26px;
        left: 50%;
        width: 120px;
        height: 30px;
        background: radial-gradient(circle,rgb(255 246 246 / 38%) 20%,transparent 100%);
        opacity: 0;
        transform: translateX(-80%) scale(1.2);
        pointer-events: none;
        z-index: 5
}



.site-id-2 .poppetje-container.salto .stofwolk {
  animation: stofwolk 4.5s ease-out 0.4s forwards;
}


@keyframes stofwolk {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.5); }
  30%  { opacity: 0.7; transform: translateX(-50%) scale(1.1); }
  50%  { opacity: 0.8; transform: translateX(-50%) scale(1.3); }
  80%  { opacity: 0.6; transform: translateX(-50%) scale(1.5); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.8); }
}

.site-id-2 .usp_icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.site-id-2 .usp_item:hover .usp_icon {
  animation: wiebel 0.6s ease-in-out;
}

@keyframes wiebel {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-5deg); }
  50%  { transform: rotate(5deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

/* Einde Frizzle animatie */


.flex_layout.usps .flex_container .content_wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
	max-width: 1240px;
	margin: 0px auto;
}

.flex_layout.usps .flex_container .content_wrapper > div{
	flex: 1;
	min-width: 380px;
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.flex_layout.usps .flex_container .content_wrapper > div img{
	width: 50px;
	flex-shrink: 0;
}

.site-id-2 .flex_layout.usps .flex_container .content_wrapper > div img{
	width: 70px;
	flex-shrink: 0;
	margin-top: -10px;
}

.flex_layout.usps .flex_container .content_wrapper > div p{
	margin: 0px;	
}

@media screen and (max-width: 767px){
	#pk_flex_content .flex_layout.usps{
		padding-block: 40px;
	}
}