@charset "utf-8";
/* CSS Document
SVG: https://www.shapedivider.app
Curve: https://cssmatic.net/css-curved-background-generator/
*/

/* --------- FILL COLORS need to be added as a class to the shape ----------- */

.bg_SVG-wave_page-name {
	fill: var(--bg-color_page-name);
}

.bg_SVG-wave_1 {
	fill: var(--bg-color_SVG-wave_1);
}
.bg_SVG-wave_2 {
	fill: var(--bg-color_SVG-wave_2);
}

.divider_page-name_shape-top, .divider-curve-top_content, .sticky-top-shape_on-scroll, .divider-wave_SVG-up, .divider-wave_SVG-down {
	/*shape-rendering: crispEdges;*/
}

/* top of page
	place immediately after header start tag */
.divider-curve-top_header {
	/* [disabled]position: absolute; */
	width: 300px;
	overflow: hidden;
	line-height: 0;
	box-sizing: border-box;
	height: 90px;
	/* [disabled]background-color: rgba(255,255,255,0.90); */
	clip-path: ellipse(40% 80% at 50% 0%);
	margin-right: auto;
	margin-left: auto;
	/* Curvature (lower=steeper)  LEAVE at Offset (0=down 100=up)
	the last flips it vertically = 0 or 100% */
	/* need larger height to make steep */
	transition: height 1s;
}


/* bottom slider shape
	place inside page-title at top */
.divider_page-name_shape-top {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	box-sizing: border-box;
	height: 50px;
	background-color: #7E5F03;
	clip-path: ellipse(60% 100% at 50% 100%);
	transition: height 1s;
}

/* add immediately after 'page-name'' inside 'page-name_wrapper' */
.divider-curve-top_content {
	display: block;
	box-sizing: border-box;
	height: 70px;
	background-color: #FFFFFF;
	clip-path: ellipse(60% 100% at 50% 100%);
	margin-top: 20px;
}


/* SVG 
add immediately after 'page-name'' inside 'page-name_wrapper' --- */
.sticky-top-shape_on-scroll {
	position: absolute;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
	z-index: 10000;
}

.sticky-top-shape_on-scroll svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 88px;
}


/* ----------------- WAVES ----------------- */
	
	/* ONLY CHANGE height */
	
	/* WAVE Up */	
		.divider-wave_SVG-up {
			position: absolute;
			top: -31px; /* pull up by the height -1 to remove the fine gap */
			left: 0;
			width: 100%;
			overflow: hidden;
			line-height: 0;
			transform: rotate(180deg);
		}

		.divider-wave_SVG-up svg {
			position: relative;
			display: block;
			width: calc(100% + 1.3px);
			height: 30px;
		}

		.divider-wave_SVG-up .shape-fill {
			fill: var(--bg-color_deco-shape-waves);
		}
	
	/* WAVE Down */
		.divider-wave_SVG-down {
			position: absolute;
			bottom: -30px; /* push down by the height */
			left: 0;
			width: 100%;
			overflow: hidden;
			line-height: 0;
			transform: rotate(180deg); /* flip shape */
		}

		.divider-wave_SVG-down svg {
			position: relative;
			display: block;
			width: calc(104% + 1.3px);
			height: 30px;
			transform: rotateY(180deg);
		}

		.divider-wave_SVG-down .shape-fill {
			fill: var(--bg-color_deco-shape-waves);
		}


/* Masked Images - https://10015.io/tools/svg-blob-generator */
	.image-masked {
	width: 400px;
	height: 400px;
	margin: auto;
	margin-bottom: 20px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-mask-size: auto;
	mask-size: auto;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: top center;
	mask-position: center;
	}
	
	.mask_shape-1 {
		-webkit-mask-image: url(../images/shapes-SVG/blob-1.svg);
		mask-image: url(../images/shapes-SVG/blob-1.svg);
		background-color: aqua;
	}
	.mask_shape-2 {
		-webkit-mask-image: url(../images/shapes-SVG/blob-2.svg);
		mask-image: url(../images/shapes-SVG/blob-2.svg);
	}
	.mask_shape-3 {
		-webkit-mask-image: url(../images/shapes-SVG/blob-3.svg);
		mask-image: url(../images/shapes-SVG/blob-3.svg);
	}
	
	.mask_image-1 {
	background-image: url(../images/backgrounds/masked-image/1.jpg);
	}
	.mask_image-2 {
		background-image: url(../images/backgrounds/masked-image/2.jpg);
	}
	.mask_image-3 {
		background-image: url(../images/backgrounds/masked-image/3.jpg);
	}
	.mask_image-4 {
		background-image: url(../images/backgrounds/masked-image/4.jpg);
	}
	.mask_image-5 {
		background-image: url(../images/backgrounds/masked-image/5.jpg);
	}
	.mask_image-6 {
		background-image: url(../images/backgrounds/masked-image/6.jpg);
	}


/* Underline */
	.deco-underline_custom {
		position: relative;
	}
	
	.deco-underline_custom::after {
		content: "";
		position: absolute;
		background-image: linear-gradient(120deg, #e5ea15, #00c4ff);
		width: 45%;
		height: 5px;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%) skew(-50deg);
	}

	.underline-double {
	  -webkit-text-decoration: hotpink double underline;
	  text-decoration: hotpink double underline;
	}	
	.underline-wavy {
	  text-decoration: underline;
	  -webkit-text-decoration-color: salmon;
	  text-decoration-color: salmon;
	  -webkit-text-decoration-style: wavy;
	  text-decoration-style: wavy;
	}	
	.underline-strike {
	  -webkit-text-decoration-color: red;
	  text-decoration-color: red;
	  -webkit-text-decoration-line: line-through;
	  text-decoration-line: line-through;
	}
	.underline-close {
	-webkit-text-decoration: darkturquoise solid underline;
	text-decoration: solid underline;
	text-decoration-color: #8097A8;
	-webkit-text-decoration-skip: ink;
	margin: 6px;
	text-decoration-skip: ink;
	}

	.underline-under {
	  -webkit-text-decoration: slateblue solid underline;
	  text-decoration: slateblue solid underline;
	  -webkit-text-underline-position: under;
	  text-underline-position: under;
	}


@media (min-width: 660px) {

	.divider-curve-top_header {
		height: 110px;
		width: 336px;
		clip-path: ellipse(40% 80% at 50% 0%);
		margin: auto;
		/* [disabled]min-width: 300px; */
	}
	
	.divider-bottom_page-name {
		height: 30px;
	}
	
	
	/* ------------ WAVES -------------- */

		.divider-wave_SVG-down {
			bottom: -50px; /* push down by the height */
		}
		.divider-wave_SVG-down svg {
			height: 50px;
		}	
	
		.divider-wave_SVG-up {
			top: -50px; /* push down by the height */
		}
		.divider-wave_SVG-up svg {
			height: 50px;
		}	
	
	/* ------------ Masked Images -------------- */
		.image-masked {
			width: 340px;
			height: 340px;
			margin: 0;
			-webkit-mask-position: top left;
			mask-position: top left;
			float: left;
		}	
	
}