/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.cormorant-garamond {
	font-family: "Cormorant Garamond", serif !important;
	font-optical-sizing: auto !important;
	font-weight: 700 !important;
	font-style: italic !important;
	text-transform: none !important;
}

/* ============================
   SLIDER BACKGROUND ANIMATION
   ============================ */

.slider-gif {
	animation: seaSequence 12s infinite ease-in-out;
	background-size: cover;
	background-position: center 40%;
}

@keyframes seaSequence {
	0% {
		background-image: url('/assets/mare_1.jpg');
	}

	16.66% {
		background-image: url('/assets/mare_2.jpg');
	}

	33.33% {
		background-image: url('/assets/mare_3.jpg');
	}

	50% {
		background-image: url('/assets/mare_4.jpg');
	}

	100% {
		background-image: url('/assets/mare_4.jpg');
	}
}

/* ============================
   OVERLAY ANIMATION
   ============================ */

.video-wrap .video-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 160deg, rgba(12, 24, 9, 0.78) 0%, rgba(31, 58, 27, 0.62) 100% );
	animation: overlayOpacity 12s infinite ease-in-out;
	pointer-events: none;
}

@keyframes overlayOpacity {
	0% {
		opacity: 1;
	}
	/* mare_1 */
	16.66% {
		opacity: 0.8;
	}
	/* mare_2 */
	33.33% {
		opacity: 0.6;
	}
	/* mare_3 */
	50% {
		opacity: 0.4;
	}
	/* mare_4 */
	100% {
		opacity: 0.4;
	}
	/* mare_4 continua */
}


.video-wrap-only .video-overlay-only {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient( 160deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 100% ) !important;
	pointer-events: none !important;
	animation: none !important;
}