/* Z-index */
.z-index-0 {
  z-index: 0;
}
.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}
.z-index-3 {
  z-index: 3;
}
.z-index-4 {
  z-index: 4;
}
.z-index-5 {
  z-index: 5;
}
.z-index-6 {
  z-index: 6;
}
.z-index-7 {
  z-index: 7;
}
.z-index-8 {
  z-index: 8;
}
.z-index-9 {
  z-index: 9;
}
.z-index-minus-1 {
  z-index: -1;
}
.z-index-minus-2 {
  z-index: -2;
}

/* Float animation */
.animation-float {
    animation: float 2000ms linear 500ms infinite alternate both;
  }
  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(15px);
    }
    100% {
      transform: translateY(30px);
    }
  }
  .animation-float-small {
    animation: float 2000ms linear 500ms infinite alternate both;
  }
  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(5px);
    }
    100% {
      transform: translateY(10px);
    }
  }
  /* Zoom animation */
  .animation-zoom {
    animation: zoom-in-zoom-out 2000ms linear 500ms infinite alternate both;
  }
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.2, 1.2);
    }
    100% {
      transform: scale(1, 1);
    }
  }
	
	@keyframes float1 {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-15px); }
	}

	@keyframes float2 {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-25px); }
	}

	@keyframes float3 {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-10px); }
	}

	.animation-float-1 {
		animation: float1 3s ease-in-out infinite;
	}

	.animation-float-2 {
		animation: float2 4s ease-in-out infinite;
	}

	.animation-float-3 {
		animation: float3 2.5s ease-in-out infinite;
	}

	
  /* Box shadow animation  */
  [data-shadow-animation] {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  }
  [data-shadow-animation].shadow-in {
    box-shadow: 0 20px 100px rgba(0, 0, 0, 0.1);
  }
  [data-shadow-animation].shadow-in img {
    opacity: 1;
    transition-delay: 0.35s;
  }
  [data-shadow-animation] img {
    opacity: 0;
    transition: opacity 0.65s cubic-bezier(0.5, 1, 0.5, 1);
  }
  /* Parallax liquid  */
  [data-parallax-liquid] {
    overflow: hidden;
    will-change: transform;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  [data-parallax-liquid] .liquid-parallax {
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateY(0px) scale(1.201);
    position: relative;
    top: 50px;
  }
	
  /* Masked image animation */
  .masked-image {
    position: absolute;
    top: -100px;
    right: 0;
  }
  .masked-image svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .masked-image figure {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .masked-image img {
    width: 100%;
    height: auto;
    visibility: visible;
  }
  .text-hard-dark {
    color:#21262c;
  }
  
  .img-grayscale img { 
      filter: grayscale(100%) !important; 
      opacity: 0.5;
  }
		
/* FADE EFFECT ON THE LEFT AND RIGHT EDGES  */	
	.swiper:not(.hero)::before,
	.swiper:not(.hero)::after {
		content: "";
		position: absolute;
		top: 0;
		width: 100px;
		height: 100%;
		z-index: 2;
		pointer-events: none;
	}

	.swiper:not(.hero)::before {
		left: 0;
		background: linear-gradient(to left, rgba(237, 242, 252, 0), rgba(237, 242, 252, 1));
	}

	.swiper:not(.hero)::after {
		right: 0;
		background: linear-gradient(to left, rgba(237, 242, 252, 1), rgba(237, 242, 252, 0));
	}


.ribbon {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 1;
  overflow: hidden;
  width: 150px;
  height: 150px;
}

.ribbon span {
  position: absolute;
  display: block;
  width: 200px;
  padding: 10px 0;
  background-color: red; /* Customize color */
  color: #fff;
  text-align: center;
  font-weight: bold;
  transform: rotate(45deg);
  top: 30px;
  right: -50px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
	.fs-md-11 { font-size: 11px; }
	.fs-md-12 { font-size: 12px; }
}

@media (min-width: 992px) {
	.fs-md-11,	.fs-md-12 { font-size: inherit; }
}
	
  
/**/