@charset "UTF-8";
/* CSS Document */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#banner_open_pit.hero::before,
#banner_dmnd_dams.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	/*background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.85)), url('../img/hero-dam.webp');
	background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.85)), url('../img/hero-dam.webp');
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.85)), url('../img/hero-dam.webp');*/
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 6s ease-out;
	animation: zoomIn 6s ease-in-out forwards;
	animation-delay: 0.25s; /* quarter-second delay before animation starts */
}
#banner_open_pit.hero::before {
	background-color: rgb(236, 222, 197);
	background-image: -webkit-linear-gradient(bottom, rgba(76, 30, 8, 0.5) 45%, rgba(20, 7, 1, 0.9)), url('../img/hero-mine.webp');
	background-image: -o-linear-gradient(bottom, rgba(76, 30, 8, 0.5) 45%, rgba(20, 7, 1, 0.9)), url('../img/hero-mine.webp');
	background-image: linear-gradient(to top, rgba(76, 30, 8, 0.5) 45%, rgba(20, 7, 1, 0.9)), url('../img/hero-mine.webp');
}
#banner_dmnd_dams.hero::before {
	background-color: hsla(192, 40%, 30%, 0.25);
	/*background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.85)), url('../img/hero-dam.webp');
	background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.85)), url('../img/hero-dam.webp');
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.85)), url('../img/hero-dam.webp');*/
	
	background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.75)), url('../img/hero-dam.webp');
	background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.75)), url('../img/hero-dam.webp');
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.75)), url('../img/hero-dam.webp');
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.15);
  }
}