.bundle.bundle-hover_image img.lazy-loaded {
    animation: fadeIn .4s forwards;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex
;
    align-items: center;
}
.bundle.bundle-hover_images{
    display: flex;
    gap: 30px; 
    flex-wrap: wrap;
}
.bundle.bundle-hover_images .title-wrap{
    width: 100%;
    text-align: center;
    font-family: var(--header);
    font-size: 20px;
    font-weight: 100;
    color: black;
}
.bundle.bundle-hover_images .title-wrap h2{
    font-weight: 100;
    color: black;
    margin-bottom: 0px;
}
.bundle.bundle-hover_images .collection-link{
        margin: 0px auto 15px;
    color: black;
    font-size: 18px;
    font-weight: 300;
}
.bundle.bundle-hover_image{
        flex: 1 1 calc(50% - 15px);
    padding-top: 49%;
    position: relative;
    margin: 0 !important;
}
.bundle.bundle-hover_image .image-up{
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.bundle.bundle-hover_image .image-hover{
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.bundle.bundle-hover_image:hover .image-up{
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.bundle.bundle-hover_image:hover .image-hover{
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
/*.collection-overview.collection-overview-images{
    column-count: 4;
  column-gap: 20px;
}*/
.collection-overview.collection-overview-intro{
    column-count: 3;
  column-gap: 20px;
}
.collection-overview.collection-overview-intro .collection-overview-image/*, .collection-overview.collection-overview-images .collection-overview-image*/{
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 20px;
  break-inside: avoid;
    width: 100% !important;
}
.collection-overview.collection-overview-intro .collection-overview-image > img , .collection-overview.collection-overview-images .collection-overview-image > img {
  grid-row: 1 / -1;
  grid-column: 1;
  max-height: 700px;
  width: 100%;
  object-fit: cover;
}
.bundle.bundle-hover_image::before{
    content: url(arrow.svg);
    position: absolute;
    top: 30px;
    right: 30px;
    background-color: white;
    padding: 10px;
    width: 20px;
    height: 20px;
}
.slide.swiper-slide img.lazy-loaded {
  display: block;
  max-height: 950px;
  object-fit: cover;
  width: 100%;
}
.bundle.bundle-button{
    text-align: center;
}
.masonry-grid.grid .masonry-sizer{
    display: none;
}
/*.masonry-grid.grid{
    border-spacing: 0;
  display: flex;
  height: inherit;
  table-layout: fixed;
  margin: 0 !important;
  flex-wrap: wrap;
  gap: 30px;
}*/
.masonry-grid.grid.gt-3 .grid4{
   width: calc(33% - 15px);
  padding: 0;
}
.collection-overview-image-intro, .bundle-hover_image, .masonry-item {
  position: relative;
  top: 100px;
  opacity: 0;
}
.collection-overview-image-intro.in-view, .bundle-hover_image.in-view, .introslide, .masonry-item.in-view{ 
  position: relative;
  top: 100px;
  opacity: 0;
  animation: 1.5s ease 0s slide-and-fade-in;
  animation-fill-mode: forwards;
}

.collection-overview-image-intro.in-view:nth-child(2), .bundle-hover_image.in-view:nth-child(2), .introslide:nth-child(2), .masonry-item.inv-view:nth-child(2)  {
  animation-delay: .5s;
}
.collection-overview-image-intro.in-view:nth-child(3), .bundle-hover_image.in-view:nth-child(3), .introslide:nth-child(3), .masonry-item.inv-view:nth-child(3)  {
  animation-delay: 1s;
}
.collection-overview-image-intro.in-view:nth-child(5), .bundle-hover_image.in-view:nth-child(4), .introslide:nth-child(4), .masonry-item.inv-view:nth-child(4)  {
  animation-delay: 1.5s;
}
.collection-overview-image-intro.in-view:nth-child(6), .bundle-hover_image.in-view:nth-child(5), .introslide:nth-child(5)  {
  animation-delay: 2s;
}
.collection-overview-image-intro.in-view:nth-child(7) {
  animation-delay: 2.5s;
}
.collection-overview-image-intro.in-view:nth-child(8) {
  animation-delay: 3s;
}
.collection-overview-image-intro.in-view:nth-child(9) {
  animation-delay: 3.5s;
}
.collection-overview-image-intro.in-view:nth-child(10) {
  animation-delay: 4s;
}

@keyframes slide-and-fade-in {
  0% {
    top: 100px;
    opacity: 0;
  }

  100% {
    top: 0px;
    opacity: 1.0;
  }
}
.card{
    position: relative;
}
.card .card-titel{
    position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  text-align: center;
}
.card .card-titel h3{
    background-color: white;
  display: inline-block;
  padding: 20px 50px 30px;
  font-family: var(--header);
  font-weight: 300;
  font-size: 2em;
  color: black;
}
.download-link{
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dotted #bbb;
}




.download-btn {
  cursor: pointer;
  display: inline-block;
}

.download {
  fill: #fff;
    stroke: #ddd;
    stroke-dashoffset: 10%;
}

.download--animate {
  -webkit-animation: circle-animate-1 2s forwards, circle-animate-2 0.5s 4s forwards;
          animation: circle-animate-1 2s forwards, circle-animate-2 0.5s 4s forwards;
}

.download-btn {
  position: relative;
  height: 40px;
  width: 40px;
}

.bar {
  stroke: #3bc27a;
}

.bar--animate {
  -webkit-animation-name: bar-animate;
          animation-name: bar-animate;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.btn--icon {
  transition: 0.3s;
    position: absolute;
    font-size: 15px;
    left: 13px;
    top: 13px;
}

.btn__arrow {
  color: #ddd;
  opacity: 1;
}

.btn__arrow--animate {
  -webkit-animation-name: arrow-animate;
          animation-name: arrow-animate;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.btn__stop {
  color: #ddd;
  opacity: 0;
}

.btn__stop--animate {
  -webkit-animation-name: stop-animate;
          animation-name: stop-animate;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.btn__done {
  color: #fff;
  opacity: 0;
}

.btn__done--animate {
  -webkit-animation-name: done-animate;
          animation-name: done-animate;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes arrow-animate {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: rotate(180deg);
  }
}

@keyframes arrow-animate {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: rotate(180deg);
  }
}
@-webkit-keyframes stop-animate {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: rotate(180deg);
  }
}
@keyframes stop-animate {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: rotate(180deg);
  }
}
@-webkit-keyframes done-animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes done-animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes circle-animate-1 {
  0% {
    fill: #fff;
    stroke: #ddd;
  }
  100% {
    fill: #fff;
    stroke: #D1EAFE;
  }
}
@keyframes circle-animate-1 {
  0% {
    fill: #fff;
    stroke: #ddd;
  }
  100% {
    fill: #fff;
    stroke: #D1EAFE;
  }
}
@-webkit-keyframes circle-animate-2 {
  0% {
    fill: #fff;
    stroke: #D1EAFE;
  }
  100% {
    fill: #3bc27a;
    stroke: #3bc27a;
  }
}
@keyframes circle-animate-2 {
  0% {
    fill: #fff;
    stroke: #D1EAFE;
  }
  100% {
    fill: #3bc27a;
    stroke: #3bc27a;
  }
}
@-webkit-keyframes bar-animate {
  0% {
    opacity: 0;
    transform: rotate(0deg);
    stroke-dashoffset: 565px;
  }
  5% {
    opacity: 1;
  }
  25% {
    stroke-dashoffset: 450px;
  }
  50% {
    stroke-dashoffset: 350px;
  }
  75% {
    stroke-dashoffset: 250px;
  }
  99% {
    stroke-dashoffset: 20px;
    stroke: #028EFF;
  }
  100% {
    stroke-dashoffset: 5px;
    stroke: #3bc27a;
  }
}
@keyframes bar-animate {
  0% {
    opacity: 0;
    transform: rotate(0deg);
    stroke-dashoffset: 565px;
  }
  5% {
    opacity: 1;
  }
  25% {
    stroke-dashoffset: 450px;
  }
  50% {
    stroke-dashoffset: 350px;
  }
  75% {
    stroke-dashoffset: 250px;
  }
  99% {
    stroke-dashoffset: 20px;
    stroke: #028EFF;
  }
  100% {
    stroke-dashoffset: 5px;
    stroke: #3bc27a;
  }
}


.grid.gallery{
    width: calc(100% + 20px);
    margin: 0 !important;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-sizer,
.grid-item {
  width: calc(25% - 20px) !important
  
}

.grid-item {
  float: left;
padding: 0 !important;
    margin-bottom: 20px;
    opacity: 0;
    display: block
}

.grid-item img {
  display: block;
  max-width: 100%;

}
/* Effect 2: Move Up */
.grid.effect-2 .grid-item.in-view {
	-webkit-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
.bundle-overview .masonry-grid{
    position: relative;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
    height: auto !important;
}
.frontpage .bundle.bundle-collection{
    position: relative;
}
.frontpage .bundle.bundle-collection > a{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    color: transparent;
}