section.anima {
  position: relative;
  background: #fff;
}

section.anima .hero-about {
	position: relative;
}

section.anima .hero-bg {
	position: relative;
	z-index: 1;
	left: 65px;
	top: -45px;
	max-width: 1200px;
	margin-inline: auto;
}

section.anima .hero-img {
	border-radius: 32px;
	width: 100%;
	height: 100%;
	position: absolute;
	    object-fit: cover;
	object-position: center;
}

section.anima .hero-img.hero-img__xl {
	max-height: 485px;
	max-width: 324px;
	
	height: calc(315px + (485 - 315) * ((100vw - 1024px) / (1200 - 320)));
	width: calc(215px + (324 - 215) * ((100vw - 1024px) / (1200 - 320)));
	top: 200px;
	left: calc(-52px + (-164 + 52) * ((100vw - 1024px) / (1200 + 1024)));
}

section.anima .hero-img.hero-img__lg {
	max-height: 360px;
	max-width: 240px;
	top: 125px;
    right: 0;
	right: calc(75px + (1 - 75) * ((100vw - 1024px) / (1200 + 1024)));
	
	height: calc(270px + (360 - 270) * ((100vw - 1024px) / (1200 - 320)));
	width: calc(170px + (240 - 170) * ((100vw - 1024px) / (1200 - 320)));
}

section.anima .hero-img.hero-img__md {
	max-height: 364px;
	max-width: 244px;
	bottom: -60px;
    left: 50%;

	height: calc(250px + (364 - 250) * ((100vw - 1024px) / (1200 - 320)));
    width: calc(160px + (244 - 160) * ((100vw - 1024px) / (1200 - 320)));
	
}

section.anima .hero-img.hero-img__sm {
	max-height: 204px;
	max-width: 136px;
	bottom: 120px;
	left: 21%;
	
	bottom: calc(50px + (120 - 50) * ((100vw - 1024px) / (1200 + 1024)));
}

section.anima .hero-img.hero-img__ex-sm {
	max-height: 150px;
	max-width: 100px;
	bottom: 20%;
    left: 73%;
}

section.anima:first-child {
  margin-top: 0;
  padding-top: 56px;
  z-index: 20;
}

section.anima:after {
  content: "";
  clear: both;
  display: block;
}

section.anima .hero-about h1 {
	margin-block: 0;
	margin-bottom: 24px;
}

section.anima img {
  position: relative;
}
section.anima .img-left {
  float: left;
  transform: translateX(-30px) translateY(0);
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.3s;
}
section.anima .img-left.animated {
  opacity: 1;
  transform: translateX(0) translateY(0);
}
section.anima .img-right {
  float: right;
  transform: translateX(30px) translateY(0);
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.3s;
}
section.anima .img-right.animated {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

section.anima .hero-about i {
  margin-right: 10px;
}
section.anima .hero-about h1 {
  transition-delay: 0.3s;
}
section.anima .hero-about .hero-location {
  transition-delay: 0.5s;
}
section.anima .hero-about .hero-date {
  transition-delay: 0.5s;
}
section.anima .hero-about > * {
  transform: translateX(0) translateY(20px);
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.1s;
}
section.anima .hero-about > *.animated {
  opacity: 1;
  transform: translateX(0) translateY(0);
}
section.anima .button {
  margin-top: 32px;
  font-size: 1rem;
  width: 284px;
  height: 74px;
}

@media (min-width: 1024px) and (max-width: 1600px) {
	section.anima .hero-img.hero-img__md {
		bottom: calc(-65px + (0 + -65) * ((100vw - 1024px) / (1200 + 1024)));
	}
}

@media (min-width: 1024px) and (max-width: 1048px) { 
	section.anima  {
    padding: 45px 0 190px;
	}
}


@media screen and (max-width: 1024px) {
	section.anima .hero-img,
	section.anima .hero-bg {
		display: none;
	}
	.anima .hero-location {
		margin-top: 0;
	}
	
	section.anima .hero-about {
		position: static;
		transform: translate(-0%);
		margin-inline: auto;
	}
}

@media screen and (max-width: 425px) {
  section.anima {
    min-height: auto;
    position: relative;
  }
  section.anima .hero-about {
    position: relative;
    padding-left: 0%;
    max-width: 90%;
    width: 90%;
    left: 0;
    transform: none;
    z-index: 5;
  }
  section.anima .img-left {
    position: absolute;
    width: 50vw;
    bottom: -7px;
    z-index: 0;
  }
  section.anima .img-right {
    position: absolute;
    width: 50vw;
    bottom: 0;
    right: 0;
  }
}

.hero-date.to-animate {
  display: flex;
  gap: 15px;
  justify-content: center;
}

@media (max-width: 542px) {
  .hero-date.to-animate {
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
  }
}

/*# sourceMappingURL=anima.css.map */