/* btns */
@keyframes slide {
  to {
    color: white;
  }
}
@keyframes slide2 {
  to {
    color: #1d1d1d;
  }
}
@keyframes toRight {
  from {
    transform: translateX(-1000px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes toLeft {
  from {
    transform: translateX(1800px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 100%;
  }
}

/* nav buttons */
.button1::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  background: #1D1D1D;

  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s ease;

  z-index: -1;
}
.button2::before, .button3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  background: #AFFF50;

  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s ease;

  z-index: -1;
}

.button1:hover {
  animation: slide 0.8s ease forwards;
}
.button2:hover, .button3:hover {
  animation: slide2 0.8s ease forwards;
}
.button3 span:hover {
  animation: slide2 0.8s ease forwards;
}

.button1:hover::before, .button2:hover::before, .button3:hover::before {
  transform: scaleY(1);
}


/* buttons onpage */
.tocatalog a:hover {
  background-color: #9ee647; 
}



/* main block */
.familypak {
  animation: toRight 2s ease forwards;
}
.tocatalog {
  animation: toLeft 2s ease forwards;
}
.backtext1 {
  animation: opacity 6s ease forwards;
}



/* cards */
.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-20px);
}

/* catalog buttons */
.whatsapp:hover {
  background-color: #9ee647;
}
.call:hover {
  background-color: #0c0c0c;
}
.openmap:hover {
  background-color: #bbbbbb;
}